CSS实例：图片导航块

时间：2022-11-26 05:29:50
  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" href="../static/css/22c.css" ype="text/css">
        </head>
        <body>

        <div>
        <div class="img">
        <a href="http://www.baidu.com/">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508502727361&di=10c6b8b7e89ba8b2f4aa64a4416aea8d&imgtype=0&src=http%3A%2F%2Flol.wanyx.com%2Fimg.wanyx.com%2Fpublic%2Fupload%2Fhero%2F1436233111.jpg" ></a>
        <div class="sa"><a href="http://www.baidu.com/">原始维恩</a></div>
        </div>

        <div class="img">
        <a href="http://www.baidu.com/">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480168515&di=4d42c1fad395143bf3bc06f113f8e15e&imgtype=0&src=http%3A%2F%2Fcdn.aixifan.com%2Fdotnet%2Fartemis%2Fu%2Fcms%2Fwww%2F201604%2F23035814tgyvdcay.jpg"></a>
        <div class="sa"> <a href="http://www.baidu.com/">苍穹之光</a></div>
        </div>

        <div class="img">
        <a href="http://www.baidu.com/">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480208667&di=dfeb6814b609126dd86544439333869d&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-6%2F201606201843411957975.png"></a>
        <div class="sa"> <a href="http://www.baidu.com/">觅心猎手</a></div>
        </div>

        <div class="img">
        <a href="http://www.baidu.com/">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508480386760&di=0728372e74a6195ebd7f69dc5d1c4ff3&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201604%2F25%2F20160425090144_KNXtu.jpeg"></a>
        <div class="sa"> <a href="http://www.baidu.com/">驯龙猎手</a></div>

        </div>


        </div>



        </body>
        </html>
        img {
            width        : 500px; /*设置图片的大小*/
        }

        div.img         {
            border-style        : solid; /*设置边距线条格式*/
            border-width        : 5px; /*设置边距线条大小*/
            border-color        : #484cff; /*设置边距线条颜色*/
            width        : 400px; /*盒子大小*/
            float        : left; /*向左浮动*/
            margin        : 5px; /*设置外边距*/
        }

        div.img img         {
            width        : 100%; /*设置盒子内容的缩放*/
            heigh        : aute; /*aute是自动对齐格式*/
        }

        div.sa         {
            text-align        : center;
            padding        : 2px; /*设置内边距*/
        }

        div.img:hover         {
            border-style        : solid;
            border-width        : 5px;
            border-color        : green;
        }  /*设置鼠标经过时产生的变化*/

        CSS实例：图片导航块

标签：

相关文章