CSS实例：图片导航块

1.认识CSS的盒子模型。
2.CSS选择器的灵活使用。
3.实例:
a.图片文字用div等元素布局形成HTML文件。
b.新建相应CSS文件，并link到html文件中。
c.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>Cake</title>
   <link rel="stylesheet" type="text/css" href="../static/css/3026.css">
</head>
<body bgcolor="gray">

<h1>蛋糕Cake预定</h1>
<div>
    <div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201709/15663/display_15663_27734.jpg"></a>
        <div class="desc"><a href="http://www.lecake.com/shop/goods-105601.html">天秤花园蛋糕 </a> </div>
    </div>

<div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201709/15657/display_15657_15752.jpg"></a>
        <div class="desc"><a href="http://www.lecake.com/shop/goods-105595.html">实栗派核桃栗蓉蛋糕 </a> </div>
    </div>

    <div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201710/15714/display_15714_92402.jpg"></a>
        <div class="desc"><a href="http://www.lecake.com/shop/goods-105652.html">魔法引力蛋糕</a> </div>
    </div>

  <div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201212/10800/display_10800_50122.jpg"></a>
        <div class="desc"><a href="http://www.lecake.com/shop/goods-100801.html">雪域牛乳芝士蛋糕</a> </div>
    </div>

  <div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201706/15474/display_15474_21191.jpg"></a>
      <div class="desc"><a href="http://www.lecake.com/shop/goods-105652.html">美刀刀蛋糕</a></div>
    </div>
  <div class="img">
        <a href="http://www.lecake.com/">
            <img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201405/12775/display_12775_23730.jpg"></a>
        <div class="desc"><a href="http://www.lecake.com/shop/goods-102714.html">提拉米苏乐脆蛋糕</a> </div>
    </div>

</div>

<div class="clearfloat">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201709/15663/display_15663_27734.jpg">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201709/15657/display_15657_15752.jpg">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201710/15714/display_15714_92402.jpg">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201212/10800/display_10800_50122.jpg">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201706/15474/display_15474_21191.jpg">
<img src="http://imagecdn.lecake.com/postsystem/docroot/images/goods/201405/12775/display_12775_23730.jpg">
</div>

</body>
</html>

img{
    width:300px;
}
div.img{
    border:1px solid gray;
    width: 200px;
    float: left;
    margin: 5px;
}
div.img img{
    width:100%;
    height:100%;
}
div.desc{
    text-align: center;
    padding: 3px;
    font-family: "华文隶书";
    font-size: medium;
    color: chartreuse;
    background: pink;
}
div.img:hover{
    border:1px solid blueviolet;
}
div.clearfloat{
    clear: both;
}
h1{
    font-family: 华文彩云;
    text-align: center;
}

posted @ 2017-10-20 14:07 爱学习的土豆阅读(196) 评论(0) 收藏举报

yyjdxgz

CSS实例：图片导航块

公告