HTML 第七章：浮动课后作业

最新推荐文章于 2022-05-03 18:56:15 发布

原创

最新推荐文章于 2022-05-03 18:56:15 发布 · 4.7k 阅读

27 ·

CC 4.0 BY-SA版权

本文详细探讨了HTML中的浮动概念，讲解如何使用浮动实现页面元素的布局，并结合课后作业提供了实例解析，帮助读者深入理解并掌握浮动在网页设计中的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影社区热门小镇</title>
     <style>
         #Ba{width:520px;height:250px;margin:0px auto;border: 1px solid gray;padding: 0px 10px}
         h5{padding: 10px 10px;margin: 0px;color: grey}
         ul {list-style-type: none;padding: 0px 5px}
         li strong{color: #388DFF;font-size: 12px}   span{color: gray;font-size: 10px}
         img{border: 1px solid gray;border-radius:8px;padding:3px;margin-left:10px;}
         img:nth-of-type(3){margin-left:35px}
     </style>
</head>
<body>
       <div id="Ba">
         <h5>摄影社区热门小镇</h5>
           <img src="images/pic_01.jpg"/>
         <ul style="display: inline-block">
             <li><strong>风景狙击手</strong></li>
             <li><span>成员：80</span></li>
             <li><span>作品：276</span></li>
         </ul>
           <img src="images/pic_02.jpg"/>
           <ul style="display: inline-block">
             <li><strong>叙事感</strong></li>
             <li><span>成员：235</span></li>
             <li><span>作品：116</span></li>
         </ul>
           <img src="images/pic_03.jpg " />
           <ul style="display: inline-block;">
               <li><strong>定焦视界</strong></li>
               <li><span>成员：56</span></li>
               <li><span>作品：456</span></li>
           </ul>
           <img src="images/pic_04.jpg"/>
           <ul style="display: inline-block">
               <li><strong>中画幅乐园</strong></li>
               <li><span>成员：130</span></li>