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

最新推荐文章于 2023-04-19 18:20:13 发布

forwardNow

最新推荐文章于 2023-04-19 18:20:13 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： DIV+CSS 盒子模型实例

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/14106623

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

示例下载: CSS+DIV-盒子模型示例.zip

  <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>

  <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>