10-DIV+CSS-盒子模型实例

川长思鸟来 2022-09-18 02:00 145阅读 0赞

示例下载: [CSS+DIV-盒子模型示例.zip][CSS_DIV-_.zip]

![SouthEast][]

<body>
          
        <div class="outerDiv">
          <ul class="faceul">
            <li><img src="1.jpg"/><a href="#">诸葛亮</a></li>
            <li><img src="2.jpg"/><a href="#">刘备</a></li>
            <li><img src="3.jpg"/><a href="#">赵云</a></li>
            <li><img src="4.jpg"/><a href="#">司马懿</a></li>
            <li><img src="5.jpg"/><a href="#">夏侯淳</a></li>
            <li><img src="6.jpg"/><a href="#">张飞</a></li>
            <li><img src="7.jpg"/><a href="#">甄姬</a></li>
            <li><img src="8.jpg"/><a href="#">张辽</a></li>
            <li><img src="9.jpg"/><a href="#">关羽</a></li>
            <li><img src="10.jpg"/><a href="#">华佗</a></li>
            <li><img src="11.jpg"/><a href="#">郭嘉</a></li>
            <li><img src="12.jpg"/><a href="#">大乔</a></li>
          </ul>
        </div>
    
      </body>

<style type="text/css">
          
          /*去掉边距和填充*/
          body {
            margin: 0px;
            padding: 0px;
          }
          
          /*最外围的div, 控制显示的位置*/
          .outerDiv {
            width: 600px;
            height: 500px;
            border: 1px solid gray;
            margin-left: 50px;
            margin-top: 50px;
          }
          
          /*中间的边框ul, 控制显示图片区域的宽度和高度*/
          .faceul {
            width: 460px;
            height: 420px;
            border: 1px solid red;
            list-style-type: none; /*去掉列表项的标识*/
            padding: 0;
            margin: 10px auto;
          }
    
          /*控制单个图片区域的大小*/
          .faceul li {
            width: 100px;
            height: 125px;
            border: 1px solid blue;
            float: left;  /*左浮动, 让列表水平放置*/
            margin-left: 10px; /*控制图片间距*/
            margin-top: 10px;
            text-align: center; /*让超链接和图片居中*/
    
          }
        
          /*对图片进行控制, 原始大小 120X120 */
          .faceul img {
            width: 90px;
            /*margin-left: 5px;*/
            margin-top: 5px;
            margin-bottom: 5px; /*调整与超链接的间距*/
            border: 1px solid red;
          }
          
          
    
          .faceul a {
            font-size: 12px;
            /*margin-left: 40px;*/
            /*margin-bottom: 0px;*/
            margin-top: 115px;
            /*border: 1px solid black;*/
    
          }
    
          a:link {
            text-decoration: none;
            color: black;
          }
          a:hover {
            font-size: 13px;
            text-decoration: underline;
            color: blue;
          }
    
        </style>

![SouthEast 1][]

<body>
          
          <div class="outerDiv">
            <div>
              <span class="spanCls1"><font class="font1">蜀国</font><a href="#">更多人物</a></span>
              <ul class="faceul">
                <li><img src="1.jpg"/><br/><a href="#">诸葛亮</a></li>
                <li><img src="2.jpg"/><br/><a href="#">刘备</a></li>
                <li><img src="3.jpg"/><br/><a href="#">赵云</a></li>
              </ul>
            </div>
            <hr/>
            <div>
              <span class="spanCls1"><font class="font1">魏国</font><a href="#">更多人物</a></span>
              <ul class="faceul">
                <li><img src="4.jpg"/><br/><a href="#">诸葛亮</a></li>
                <li><img src="5.jpg"/><br/><a href="#">刘备</a></li>
                <li><img src="6.jpg"/><br/><a href="#">赵云</a></li>
              </ul>
            </div>
            <hr/>
            <div>
              <span class="spanCls1"><font class="font1">吴国</font><a href="#">更多人物</a></span>
              <ul class="faceul">
                <li><img src="7.jpg"/><br/><a href="#">诸葛亮</a></li>
                <li><img src="8.jpg"/><br/><a href="#">刘备</a></li>
                <li><img src="9.jpg"/><br/><a href="#">赵云</a></li>
              </ul>
            </div>
    
          </div>
    
      </body>

<style type="text/css">
        
          body {
            margin: 0 auto; /*水平居中*/
            padding: 0;
            width: 1000px;
            height: 1000px;
            border: 1px solid blue;
            font-size: 12px;
          }
    
    
          .outerDiv {
            width: 500px;
            height: 500px;
            border: 1px solid gray;
          }
          
          /*定义常用字体样式*/
          .font1 {
            font-weight: bold;
            font-size: 20px;
            margin-left: 5px;
            margin-top: 2px;
          }
          
          /*去掉超链接的下划线*/
          a {
            text-decoration: none;
          }
    
          span a {
            font-size: 15px;
          }
          
          a:hover {
            text-decoration: underline;
            color: red;
          }
    
          .spanCls1 {
            /*background-color: pink;*/
            display: block; /*将其变成块,适应整个div*/
            margin-top: 2px;
          }
          
          /*span中的超链接的位置*/
          .spanCls1 a {
            margin-left: 390px; 
          }
    
          .faceul {
            width: 500px;
            height: 100px;
            /*border: 1px solid red;*/
            padding: 0px; /*去掉填充*/
            list-style-type: none; /*去掉li的标记*/
          }
    
          .faceul li {
            float: left; /*左浮动,水平放置*/
            /*border: 1px solid black;*/
            width: 160px;
            height: 90px;
            padding: 0;
            /*background-color: pink;*/
            margin-left: 5px;
            margin-top: 5px;
            text-align: center; /*图片和文本居中*/
          }
    
          .faceul img {
            width: 80px;
            height: 80px;
            margin-top: 5px;
            margin-bottom: 2px;
          }
          
          
    
        </style>

[CSS_DIV-_.zip]: http://download.csdn.net/detail/wuqinfei_cs/6496337
[SouthEast]: /images/20220828/fc26e8a4c04f4e09b824ee6ef0ad9d72.png
[SouthEast 1]: /images/20220828/0ca8fe8146b64b35a3ff97abaabc0444.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.1 认识盒子模型-盒子模型的四个部分

非零基础自学前端最后一遍文章目录非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模

今天药忘吃喽~/ 2024年03月25日 23:53/ 0 赞/ 84 阅读

相关 CSS--盒子模型(box)--使用/教程/实例

原文网址：[CSS--盒子模型(box)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_box_--_IT_-CSDN] 简介说明本文介绍

左手的ㄟ右手/ 2023年10月01日 10:12/ 0 赞/ 2 阅读

相关 CSS-盒子模型，标准盒子模型，IE 盒子模型，盒模型之间的转换

我们可以把每一个HTML标记，都看成是一个"盒子"；这个"盒子"的特征包含：内容的宽度（width）或高度（height）、边框线（padding）、内填充（padding）、

分手后的思念是犯贱/ 2023年06月01日 11:13/ 0 赞/ 178 阅读

相关盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型具有属性： 1. content内容 2. padding内边距 3. border

╰半夏微凉°/ 2023年05月31日 06:58/ 0 赞/ 14 阅读

相关 web前端学习10-css盒子模型

学习10-css盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我就是我/ 2023年02月17日 06:29/ 0 赞/ 180 阅读

相关盒子模型

![盒子模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

今天药忘吃喽~/ 2023年02月16日 06:45/ 0 赞/ 120 阅读

相关 10-DIV+CSS-盒子模型实例

示例下载: [CSS+DIV-盒子模型示例.zip][CSS_DIV-_.zip] ![SouthEast][] <body>

川长思鸟来/ 2022年09月18日 02:00/ 0 赞/ 146 阅读

相关盒子模型

W3C标准的盒子模型是：width(height) 都不包含padding和border的。但是ie浏览器的盒子模型 width和height是包含padding bor

╰+攻爆jí腚メ/ 2022年07月15日 00:47/ 0 赞/ 244 阅读

相关盒子模型

盒子模型的概念页面中所有元素都可以看成是一个“矩形”，占据着一定的页面空间，这些被占用的空间都比单纯的内容要大这个矩形框就是盒子. 盒子模型的组成: ![

不念不忘少年蓝@/ 2021年11月11日 00:01/ 0 赞/ 386 阅读

相关盒子模型

盒子模型 ![70][] 今年过年不收礼，收礼就收五仁月饼！！！下面咱们就来讲一讲盒子模型。最近快过端午节了，收到了两盒月

- 日理万妓/ 2021年06月11日 15:11/ 0 赞/ 592 阅读