1301次阅读
动态效果

先来看下欣欣说得上一个笔记的坏味道,看看ul和li怎么重写九个盒子的例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
  .outUl {
    width : 360px;
    height : 360px;
    background-color : pink;
    padding : 0px;
  }
  .innerLi {
    width : 100px;
    height : 100px;
    margin : 10px;
    float : left;
    background-color : blue;
    list-style-type : none;
  }
</style>
</head>
<body>
  <ul class="outUl">
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
    <li class="innerLi">内部文字</li>
  </ul>
</body>	
check the result

果然很简单,样式上只改动两点:1、设置li的list-style-type为none,去掉前面的小圆点;2、设置ul的padding为0px,去掉ul的内边距。

迫不及待想试试导航栏效果,看看例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
  ul {
    width : 1085px;
    margin : 0px auto;
    padding : 0px;
  }
  li {
    list-style-type : none;
    text-align : center;
    float : left;
  }
  a {
    display : block;
    width : 155px;
    height : 55px;
    line-height : 55px;
    color : #777777;
    font-size : 25px;
    text-decoration : none;
  }
  a:hover {
    background-color : pink;
    text-decoration : underline;
  }
</style>
</head>
<body>
  <ul>
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">ServerSide</a></li>
    <li><a href="#">ASP.NET</a></li>
    <li><a href="#">XML</a></li>
    <li><a href="#">WebService</a></li>
    <li><a href="#">WebBuilding</a></li>
  </ul>
</body>	
check the result

这个例子稍微和W3School的不一样,不过原理是一样的,主要有以下几点:1、想让li中的文字水平居中,可设置text-align为center;2、想让a标签中的文字垂直居中,可设置line-height等于height;3、a标签是行内元素,不是块元素,想要使它的width和height生效,要设置display为block,指定以块元素来显示,li默认是块元素,所以我们不用设置;4、可以通过color设置字体颜色,通过font-size设置字体大小;5、可以通过text-decoration来设定a标签的下划线是否显示;6、最最重要的a:hover,可以设置鼠标划过时,a标签的样式。

话说其他元素也能用hover呢,再来看个例子:

<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
  ul {
    width : 480px;
    height : 300px;
    margin : 0px auto;
    padding : 0px;
  }
  .greenLi {
    width : 98px;
    height : 298px;
    float : left;
    list-style-type : none;
    border : 1px solid green;
    margin : 0px 10px;
  }
  .greenLi:hover {
    background-color : green;
  }
  .yellowLi {
    width : 98px;
    height : 298px;
    float : left;
    list-style-type : none;
    border : 1px solid yellow;
    margin : 0px 10px;
  }
  .yellowLi:hover {
    background-color : yellow;
  }
  .grayLi {
    width : 98px;
    height : 298px;
    float : left;
    list-style-type : none;
    border : 1px solid gray;
    margin : 0px 10px;
  }
  .grayLi:hover {
    background-color : gray;
  }
  .pinkLi {
    width : 98px;
    height : 298px;
    float : left;
    list-style-type : none;
    border : 1px solid pink;
    margin : 0px 10px;
  }
  .pinkLi:hover {
    background-color : pink;
  }
</style>
</head>
<body>
  <ul>
    <li class="greenLi"></li>
    <li class="yellowLi"></li>
    <li class="grayLi"></li>
    <li class="pinkLi"></li>
  </ul>
</body>	
check the result

这个例子应该是很好懂的,需要注意的就是.xxxLi:hover,其实类选择器也是可以使用hover的,好了,有了hover这样的法器,我的页面又能增色不少了。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录