鱼C论坛

 找回密码
 立即注册
查看: 3642|回复: 2

[已解决]请教“Web开发0007传送门”超链接边框无填充颜色的问题

[复制链接]
发表于 2017-6-22 23:40:49 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
各位大神好:
教程:Web开发0007传送门
为什么我写的超链接“传送门”设置的边框无填充颜色呢?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>欢迎来到HTML世界</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         color: #FF0088;/*字体颜色*/
  10.                         font-family: sans-serif;/*系统自动选择最佳显示字体,但是这个属性针对WIN8以上有效,之前的貌似还是显示宋体*/
  11.                 }

  12.                 body{
  13.                         background: url(background.jpg) center center;/*背景图片*/
  14.                         background-size: cover;
  15.                         margin: 0;
  16.                         padding: 0;
  17.                         position: relative;
  18.                 }
  19.                 #container{
  20.                         width: 100%;
  21.                         text-align: center;
  22.                         position: absolute;
  23.                         top: 50%
  24.                         transform: translateY(-50%);/*垂直居中*/
  25.                 }
  26.                 h1{
  27.                         font-size: 66px;
  28.                         margin-bottom: 22px;/*设置h1与p之间的距离*/
  29.                 }
  30.                 p{
  31.                         font-size: 33px;
  32.                         margin-bottom: 22px;/*设置p与“传送门”之间的距离*/
  33.                 }
  34.                 a{
  35.                        
  36.                         font-size: 55px;
  37.                         color: #33ffff;/*超链接默认字体紫色*/
  38.                         border: 1px solid #33ffff;/*设置圆角矩形:1px的白色边框+3px的圆角值*/
  39.                         border-radius: 3px;/*圆角边框*/
  40.                         padding: 10px 66px;/*上下10px,左右两边66px*/
  41.                         text-decoration:none;/*去掉超链接下划线*/

  42.                 }
  43.         </style>

  44. </head>
  45. <body>
  46.         <div id="container">
  47.                 <h1>我爱鱼C</h1>
  48.                 <p>www.fishC.com-让编程改变世界        </p>
  49.                 <a href="www.baidu.com">传送门</a>
  50.         </div>
  51. </body>
  52. </html>
复制代码

最佳答案
2017-6-23 06:16:53

首先你想要<a>“填充色”,那你就要在样式中添加背景色

  1.      a{

  2.          /*原始代码*/

  3.             /*不加填充色怎么有填充色。。。*/
  4.             background-color: crimson;
  5.         }
复制代码

Snip20170623_213.png


最后一个小问题,<a>中的href属性,要写http
  1. <a href="http://www.fishc.com">传送门</a>
复制代码
1.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-6-23 06:16:53 | 显示全部楼层    本楼为最佳答案   

回帖奖励 +1 鱼币


首先你想要<a>“填充色”,那你就要在样式中添加背景色

  1.      a{

  2.          /*原始代码*/

  3.             /*不加填充色怎么有填充色。。。*/
  4.             background-color: crimson;
  5.         }
复制代码

Snip20170623_213.png


最后一个小问题,<a>中的href属性,要写http
  1. <a href="http://www.fishc.com">传送门</a>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-6-23 09:22:36 | 显示全部楼层
不二如是 发表于 2017-6-23 06:16
首先你想要有“填充色”,那你就要在样式中添加背景色,

你这样一说还真的是哎,谢谢啦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 06:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表