7.29学习内容

最新推荐文章于 2024-07-06 11:09:29 发布

lu2211866078

最新推荐文章于 2024-07-06 11:09:29 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/lu2211866078/article/details/119234285

版权

本文通过两个实例展示了HTML和CSS在页面布局中的应用。例一介绍了如何使用内部样式表创建单图单例布局，包括图片浮动和文字排列；例二则演示了如何利用外部样式表实现多图多例布局，调整元素的宽度、浮动和内联样式，以达到美观的展示效果。

摘要由CSDN通过智能技术生成

复习了块标签行标签浮动

做了两个案例

例 1 单图单例

css使用内部样式表

实现效果

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style type="text/css">
       div {
           height: 60px;
           margin-top: 10px;

       }
       img{
           width: 50px;
           float: left;
           margin-right: 10px;
       }
       span{
           height: 50;
           display: inline-block;
           margin-top: 15px;
           color: rgb(82,82,82);
       }

</style>
   <body>

       <div>
           <img src="img/1.jpg" >
           <span>360摄影机大众版</span>
           </div>
           <div>
               <img src="img/2.jpg" >
               <span>360摄影机1080P版</span>
           </div>
           <div>
               <img src="img/3.jpg" >
               <span>360安全路由P3</span>
           </div>
           <div>
               <img src="img/4.jpg" >
               <span>360安全路由P2</span>
           </div>
           <div>
               <img src="img/5.jpg" >
               <span>360儿童机器人</span>
       </div>

   </body>
</html>

例二多表多例

css使用外部样式表

css文件：

/* 初始化浏览器样式 */
body,h1,h2,h3,h4,h5,h6,p{
   margin: 0;
}
ul,ol{
   /* 去除列表默认样式 */
   list-style: none;
}
a{
   /* 去掉下划线 */
   text-decoration: none;
}
.main div{
               width: 400px;
               float: left;
           }
.main div img{
               width: 100px;
               float: left;
               margin-right: 20px;
           }
h4, p{
               margin-top: 5px;
           }
p{
               color: darkgray;
               font-size: 14px;
           }

htlm内容：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/reset.css" />
   </head>
   <body>
       <div class="main">
           <div>
               <img src="img/1.png" >
               <h4>安全大脑，极致守护</h4>
               <p>建立基于安全大脑的极致生态赋</p>
               <p>大安全时代各行业</p>
           </div>
           <div>
               <img src="img/2.png" >
               <h4>安全大脑，极致守护</h4>
               <p>建立基于安全大脑的极致生态赋</p>
               <p>大安全时代各行业</p>
           </div>
           <div>
               <img src="img/3.png" >
               <h4>安全大脑，极致守护</h4>
               <p>建立基于安全大脑的极致生态赋</p>
               <p>大安全时代各行业</p>
           </div>
       </div>

</html>