复习了块标签 行标签 浮动
做了两个案例
例 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>
内容: