实例
实例
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>新品上市</title>
<link rel="shortcut icon" type="images/x-icon" href="images/logo.png">
<style type="text/css">
h1{font-weight:bold;
}
h1,h2,h3,h4{text-align: center;
}
span{font-family: algerian;/*定义字体*/
font-size: 40;/*定义字体大小*/
}
/*b{ display: block;/*块级元素*/
width: 600px; /*宽度*/
height: 60px; /*高度*/
background: pink;
overflow: hidden;/*溢出隐藏*/
/*margin-bottom:565px;*/
}*/
*{margin: 0;padding: 0;} /*外边框0 ；填充0*/
.mian{width: 900px;
height: 60px;
margin: 0 auto;
}
.box{width: 720px;
height: 100px;
overflow: hidden; /*溢出隐藏*/
}
.mian:hover .box{height: 1100px;/*定义溢出总高度*/
}
b:hover{overflow:visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外*/
</style>
</head>
<body>
<p>8月14日上午10点开售<img src="images/logo.png" style="width:16px; height: 16px;">
</p>
<h1>历经<span style="color: #043433">
324</span>天，再造手机中的艺术品。</h1>
<h2>小米MIX2S <span2 style="color:#043433; ">翡翠色</span2>，携手敦煌研究院</h2>
<h3>致敬千年流传的艺术精神</h3>
<h4>开启淘瓷手机的色彩时代！</h4>
<h4>3999元<del>4999</del></h4>
<div class="mian">
<div class="box"><img src="images/小米-(1)_01.jpg" />
<b><img src="images/小米-(1)_02.jpg" /></b></div>
<div class="box2"><img src="images/小米 (2).jpg" style="width: 720px;"/></div>
<img src="images/小米 (3).jpg" style="width: 720px;"/>
<br>
<img src="images/小米 (4).jpg" style="width: 720px;"/>
<br>
<img src="images/小米 (5).jpg" style="width: 720px;"/>
<br>
<img src="images/小米 (6).jpg" style="width: 720px;"/>
<br>
</div>
<img src="images/小米 (7).jpg" style="width: 720px;"/>
<!-- 图片居中对齐align="middle" -->
</div>
<div>
<p align="right">
<img src="images/logo.png" style="width: 16px;height: 16px;" />致敬千年流传的敦煌色彩艺术 </p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄
使用<span>font-family:定义了文本标题个别问题的字体，以及使用font-size:定义了字体大小。
使用<style>color：#00000定了部分文字颜色
使用class给图片设置了overflow溢出效果。
使用*{margin: 0;padding: 0;}给所有元素加上了外边框和内部填充都为0
使用font-weight:bold;给文字进行加粗处理
使用text-align: center;给所有的h1~6标签居中对齐