CSS实例：图片导航块

时间：2017-10-20 20:09:27 阅读：237 评论：0 收藏：0 [点我收藏+]

认识CSS的盒子模型。
CSS选择器的灵活使用。

实例:

图片文字用div等元素布局形成HTML文件。
新建相应CSS文件，并link到html文件中。

CSS文件中定义样式

div.img：border,margin,width,float
div.img img：width，height
div.desc：text-align,padding
div.img:hover：border

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实例：图片导航块

标签：模型浮动 jpg 内容 xtu ati otn UI amp

原文地址：http://www.cnblogs.com/ffr0068/p/7700813.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行