CSS实例：图片导航块

  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 实例:
    1. 图片文字用div等元素布局形成HTML文件。
    2. 新建相应CSS文件，并link到html文件中。
    3. CSS文件中定义样式
      1. div.img：border,margin,width,float
      2. div.img img：width，height
      3. div.desc：text-align,padding
      4. div.img:hover：border
      5. div.clearfloat：clear 
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏中心</title>
    <link rel="stylesheet" type="text/css" href="../static/css/202.css">

</head>
<body>
<div>
    <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01f52549dbaa0009e2.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">玩法说明</a></div>
    </div>
    <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01953c97e81ffda462.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">攻略百科</a></div>
    </div>
        <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p4.so.qhimgs1.com/bdr/_240_/t01929434685380e98a.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">原声音乐</a></div>
    </div>
             <div class="img">
           <a href="http://xyq.163.com/">
               <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01cc8b6adc9fb8ae70.jpg"></a>
           <div class="desc"><a href="http://xyq.163.com/">游戏素材</a></div>
    </div>
</div>
<div CLASS="clearfloat">
       <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01f52549dbaa0009e2.jpg">
       <img src="http://p2.so.qhimgs1.com/bdr/_240_/t01953c97e81ffda462.jpg">
       <img src="http://p4.so.qhimgs1.com/bdr/_240_/t01929434685380e98a.jpg">
       <img src="http://p0.so.qhimgs1.com/bdr/_240_/t01cc8b6adc9fb8ae70.jpg">
</div>
</body>
</html>
        img{
     width:300px;
}
div.img{
    border:1px; solid:#cccccc;
    width:180px;
    float:left;
    margin:5px;
}
div.img img{
    width:100%;
    height:auto;
}
div.desc{
    text-align:center;
    padding: 5px;
}
div.img:hover{
    border: 1px;solid:#777777;
}
.clearfloat{
    clear:both;
}

posted on 2017-10-20 17:47  083李笑晴  阅读(153)  评论(0)  编辑  收藏  举报

导航