黑马程序员技术交流社区

标题: 关于css的一点体会和心得 [打印本页]

作者: 李元峰 时间: 2012-6-14 01:17
标题: 关于css的一点体会和心得
首先我把 css 文件贴出来大家看看
body{
background-color:#B0C4DE;
   }
.logo{
width:100%;
height:50px;
margin:auto;
background-color:#D3D3D3;

}
.box{
width:400px;
height:50px;
margin:10px auto;

}
a{
   display:block;
   font-family:arial;
   font-size:15px;
   text-align:center;

   margin:10px 5px;
   float:left;
   text-decoration:none;
}

a:link, a:visited{
         color:#B22222;
         background-color:#D19275;
         padding:4px 10px 5px 8px;

         border-top:1px solid #DCDCDC;
         border-right:1px solid #808080;
         border-bottom:1px solid #808080;
         border-left:1px solid #DCDCDC;
         }
a:hover{
      color:#DC143C;

      background-color:#8FBC8F;
      padding:6px 8px 3px 10px;
      border-top:1px solid #808080;
      border-right:1px solid #DCDCDC;
      border-bottom:1px solid #DCDCDC;
      border-left:1px solid #808080;
      cursor:pointer;
}
  .line{
      width:4px;
      height:30px;
      background-color:#FCFCFC;
      float:left;
      margin:10px 2px;
}

我的目的是把连接做成按钮样式
看我上面的样式
但是为什么我的链接样式不一样呢？

还有当我鼠标移动到每个链接上时还会出现如下现象

看看这是怎么回事？

错位2.jpg (11.02 KB, 下载次数: 15)

作者: 郑健初 时间: 2012-6-14 11:12
这个一般是将一张按钮样式的图片设置为背景,就可以实现

作者: 李元峰 时间: 2012-6-14 16:59

郑健初发表于 2012-6-14 11:12
这个一般是将一张按钮样式的图片设置为背景,就可以实现

恩你说的可能比较简单这个是通过 padding 和boder 属性实现的比较繁琐

作者: 符云爵 时间: 2012-6-14 17:13
.box{
width:400px;
height:50px;
margin:10px auto;

}
这个是菜单的外层？你写死宽度为400px了，鼠标移上去后加边框会拉大每个菜单的宽度吧我估计，大于外层宽度了自然会往下行排，你可以把它们的外层宽度改大些。
至于所有链接的样式，不清楚原因，可以慢慢调出来，如果box是所有菜单的外层的class值，可以试试以下方法：
.box a{
}
这样定义到class值为box的那个层底下所有的a标签，其它样式类似。

只是个想法哦，不知道行不行得通，楼主可以试下。
还有一种方法就是给所有a标签加上class属性值，值要一样，再写这个class的样式。

作者: 李元峰 时间: 2012-6-14 17:23

符云爵发表于 2012-6-14 17:13
.box{
width:400px;
height:50px;

可以你说的是对的我把 .box{
width:600px;
}
改成把width 加大后就好了
原来宽度定死了后如果所容纳的内容超过外边框（父元素）就会错位！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2