h5学习之9(html第一阶段学习练习)
2016-12-16 19:43
423 查看
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"
/>
<title>百宝箱布局</title>
<link
rel="stylesheet"
type="text/css"
href="css/reset.css"
/>
<style
type="text/css">
#header
{
width:
1125px;
height:
124px;
color:
#666666;
font-size:
60px;
font-family:
"微软雅黑";
line-height:
124px;
text-align:
center;
background: url(img/header_bg.png)
no-repeat 51px
center;
letter-spacing:
18px;
}
#main
{
width:
1125px;
}
.top
{
height:
570px;
background:
#ffffcc;
border-top:
2px
solid
#666666;
}
.top
h3 {
height:
132px;
line-height:
132px;
}
.top
h3 span
{
font-family:
"微软雅黑";
font-size:
56px;
color:
#ff0000;
height:
132px;
display:
inline-block;
padding-left:
74px;
}
.top
h3 strong
{
display:
inline-block;
height:
132px;
color:
#666666;
font-size:
30px;
background: url(img/top_laba.png)
no-repeat 48px center;
padding-left:
114px;
}
.top
h3 em
{
display:
inline-block;
font-size:
42px;
color:
#FF0000;
padding-left:
16px;
}
.top
h3 span,
.top
h3 strong,
.top
h3 em {/*水平对齐方式*/
vertical-align:
top;
}
.top
div
{
padding-left:
70px;
}
.top
div
span
{
width:
475px;
height:
195px;
display:
inline-block;
margin-right:
29px;
margin-bottom:
24px;
border-radius:
6px;
background: blue;
}
.top
div
.money
{
background: url(img/top_money.png)
no-repeat;
}
.top
div
.liuliang
{
background: url(img/top_liuliang.png)
no-repeat;
}
.top
div
.caipiao
{
background: url(img/top_caipiao.png)
no-repeat;
}
.top
div
.none
{
background: url(img/top_no.png)
no-repeat;
}
.middle
{
height:
484px;
background:
#ff3333;
}
.middle
h3 {
font-size:
56px;
height:
140px;
line-height:
140px;
color:
#fff;
padding-left:
79px;
letter-spacing:
6px;
}
.middle
h3
span
{
color:
#ff0;
font-size:
82px;
vertical-align:
bottom;/*对齐方式*/
}
.middle
div
{
padding-left:
53px;
}
.middle
div
span
{
width:
327px;
height:
256px;
display:
inline-block;
background: blue;
vertical-align:
top;
background: blue;
}
.middle
div
.box1
{
background: url(img/m_box1.png)
no-repeat;
}
.middle
div
.box2
{
background: url(img/m_box2.png)
no-repeat;
}
.middle
div
.box3
{
background: url(img/m_box3.png)
no-repeat;
}
.middle
div
a
{
background: url(img/m_button.png)
no-repeat;
width:
78px;
height:
92px;
display:
inline-block;
margin-top:
64px;
}
.footer
{
height:
755px;
background:
#ffc;
}
.footer
h3
{
height:
180px;
background: url(img/f_h3.png)
no-repeat;
}
.footer
div
{
height:
468px;
padding-left:
79px;
}
.footer
div
ul
li
{
height:
144px;
background: palegreen;
margin-bottom:
27px;
width:
968px;
border-radius:
5px;
letter-spacing:
7px;
}
.footer
div
ul
li
a
{
font-size:
48px;
color:
#fff;
line-height:
144px;
padding-left:
200px;
}
.footer
.box4
{
background: url(img/f_box1.png)
no-repeat;
}
.footer
.box5
{
background: url(img/f_box2.png)
no-repeat;
}
.footer
.box6
{
background: url(img/f_box3.png)
no-repeat;
}
</style>
</head>
<body>
<div id="header">我的宝箱</div>
<div
id="main">
<div
class="top">
<h3>
<span>已开宝箱获得</span>
<strong>13:34从余额宝中充值得到</strong>
<em>$30</em>
</h3>
<div>
<span
class="money"></span>
<span
class="liuliang"></span>
<span
class="caipiao"></span>
<span
class="none"></span>
</div>
</div>
<div
class="middle">
<h3>未开宝箱<span>12</span>个</h3>
<div>
<span class="box1"></span>
<span
class="box2"></span>
<span
class="box3"></span>
<a
href="#"></a>
</div>
</div>
<div
class="footer">
<h3></h3>
<div>
<ul>
<li class="box4">
<a href="#">余额宝充值送宝箱</a>
</li>
<li
class="box5">
<a href="#">分享宝贝送宝箱</a>
</li>
<li
class="box6">
<a href="#">愿望清单送宝箱</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
下面的为外部引入文件“css/reset.css”中的样式
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:0;
}
/*padding的样式初始化*/
ul,ol
{
padding:0;
}
/*列表的样式初始化*/
ul,ol,li
{
list-style:none;
}
/*font-style的样式初始化*/
em {
font-style:
normal;
}
/*下划线的样式初始化*/
a {
text-decoration:
none;
}
<html>
<head>
<meta
charset="utf-8"
/>
<title>百宝箱布局</title>
<link
rel="stylesheet"
type="text/css"
href="css/reset.css"
/>
<style
type="text/css">
#header
{
width:
1125px;
height:
124px;
color:
#666666;
font-size:
60px;
font-family:
"微软雅黑";
line-height:
124px;
text-align:
center;
background: url(img/header_bg.png)
no-repeat 51px
center;
letter-spacing:
18px;
}
#main
{
width:
1125px;
}
.top
{
height:
570px;
background:
#ffffcc;
border-top:
2px
solid
#666666;
}
.top
h3 {
height:
132px;
line-height:
132px;
}
.top
h3 span
{
font-family:
"微软雅黑";
font-size:
56px;
color:
#ff0000;
height:
132px;
display:
inline-block;
padding-left:
74px;
}
.top
h3 strong
{
display:
inline-block;
height:
132px;
color:
#666666;
font-size:
30px;
background: url(img/top_laba.png)
no-repeat 48px center;
padding-left:
114px;
}
.top
h3 em
{
display:
inline-block;
font-size:
42px;
color:
#FF0000;
padding-left:
16px;
}
.top
h3 span,
.top
h3 strong,
.top
h3 em {/*水平对齐方式*/
vertical-align:
top;
}
.top
div
{
padding-left:
70px;
}
.top
div
span
{
width:
475px;
height:
195px;
display:
inline-block;
margin-right:
29px;
margin-bottom:
24px;
border-radius:
6px;
background: blue;
}
.top
div
.money
{
background: url(img/top_money.png)
no-repeat;
}
.top
div
.liuliang
{
background: url(img/top_liuliang.png)
no-repeat;
}
.top
div
.caipiao
{
background: url(img/top_caipiao.png)
no-repeat;
}
.top
div
.none
{
background: url(img/top_no.png)
no-repeat;
}
.middle
{
height:
484px;
background:
#ff3333;
}
.middle
h3 {
font-size:
56px;
height:
140px;
line-height:
140px;
color:
#fff;
padding-left:
79px;
letter-spacing:
6px;
}
.middle
h3
span
{
color:
#ff0;
font-size:
82px;
vertical-align:
bottom;/*对齐方式*/
}
.middle
div
{
padding-left:
53px;
}
.middle
div
span
{
width:
327px;
height:
256px;
display:
inline-block;
background: blue;
vertical-align:
top;
background: blue;
}
.middle
div
.box1
{
background: url(img/m_box1.png)
no-repeat;
}
.middle
div
.box2
{
background: url(img/m_box2.png)
no-repeat;
}
.middle
div
.box3
{
background: url(img/m_box3.png)
no-repeat;
}
.middle
div
a
{
background: url(img/m_button.png)
no-repeat;
width:
78px;
height:
92px;
display:
inline-block;
margin-top:
64px;
}
.footer
{
height:
755px;
background:
#ffc;
}
.footer
h3
{
height:
180px;
background: url(img/f_h3.png)
no-repeat;
}
.footer
div
{
height:
468px;
padding-left:
79px;
}
.footer
div
ul
li
{
height:
144px;
background: palegreen;
margin-bottom:
27px;
width:
968px;
border-radius:
5px;
letter-spacing:
7px;
}
.footer
div
ul
li
a
{
font-size:
48px;
color:
#fff;
line-height:
144px;
padding-left:
200px;
}
.footer
.box4
{
background: url(img/f_box1.png)
no-repeat;
}
.footer
.box5
{
background: url(img/f_box2.png)
no-repeat;
}
.footer
.box6
{
background: url(img/f_box3.png)
no-repeat;
}
</style>
</head>
<body>
<div id="header">我的宝箱</div>
<div
id="main">
<div
class="top">
<h3>
<span>已开宝箱获得</span>
<strong>13:34从余额宝中充值得到</strong>
<em>$30</em>
</h3>
<div>
<span
class="money"></span>
<span
class="liuliang"></span>
<span
class="caipiao"></span>
<span
class="none"></span>
</div>
</div>
<div
class="middle">
<h3>未开宝箱<span>12</span>个</h3>
<div>
<span class="box1"></span>
<span
class="box2"></span>
<span
class="box3"></span>
<a
href="#"></a>
</div>
</div>
<div
class="footer">
<h3></h3>
<div>
<ul>
<li class="box4">
<a href="#">余额宝充值送宝箱</a>
</li>
<li
class="box5">
<a href="#">分享宝贝送宝箱</a>
</li>
<li
class="box6">
<a href="#">愿望清单送宝箱</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
下面的为外部引入文件“css/reset.css”中的样式
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:0;
}
/*padding的样式初始化*/
ul,ol
{
padding:0;
}
/*列表的样式初始化*/
ul,ol,li
{
list-style:none;
}
/*font-style的样式初始化*/
em {
font-style:
normal;
}
/*下划线的样式初始化*/
a {
text-decoration:
none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 个人学习第一阶段——关于html和css的技巧及问题总结（一）
- 学习CCNA的第一阶段总结
- 第一阶段总结：学习与改变
- PADS菜菜鸟--第一阶段学习的笔记
- 学习竞争情报的第一阶段——读书
- NS3学习第一阶段---运行NS3实例
- 第一阶段学习结束，开始深层次的摸索
- 第一阶段练习
- 我的FPGA之路 － 入门篇（暨我的第一阶段学习总结 ）
- 我的js学习笔记之第一阶段总结即小作业贪吃蛇V0.1
- uboot分析第一阶段学习笔记
- 嵌入式linux学习计划第一阶段总结
- SOCKET学习第一阶段(下)
- SOCKET学习第一阶段(上)
- PADS菜菜鸟--第一阶段学习的笔记
- IKE学习笔记2（IKE交换第一阶段）
- 第一阶段JavaScript的学习总结
- 学习的第一阶段:坚持
- linux内核学习初笔记（5）uboot第一阶段我的分析
- java学习后，复习，写计算器代码（第一阶段）