h5学习之9(html第一阶段学习练习)

来源：互联网发布：数据库系统工程师入门编辑：程序博客网时间：2024/05/29 04:39

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>

<title>百宝箱布局</title>

<linkrel="stylesheet"type="text/css"href="css/reset.css"/>

<styletype="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 51pxcenter;

letter-spacing:18px;

}

#main{

width:1125px;

}

.top{

height:570px;

background:#ffffcc;

border-top:2pxsolid #666666;

}

.toph3 {

height:132px;

line-height:132px;

}

.toph3 span {

font-family:"微软雅黑";

font-size:56px;

color:#ff0000;

height:132px;

display:inline-block;

padding-left:74px;

}

.toph3 strong {

display:inline-block;

height:132px;

color:#666666;

font-size:30px;

background: url(img/top_laba.png)no-repeat 48px center;

padding-left:114px;

}

.toph3 em{

display:inline-block;

font-size:42px;

color:#FF0000;

padding-left:16px;

}

.toph3 span,

.toph3 strong,

.top h3 em {/*水平对齐方式*/

vertical-align:top;

}

.topdiv{

padding-left:70px;

}

.topdivspan{

width:475px;

height:195px;

display:inline-block;

margin-right:29px;

margin-bottom:24px;

border-radius:6px;

background: blue;

}

.topdiv.money{

background: url(img/top_money.png)no-repeat;

}

.topdiv.liuliang{

background: url(img/top_liuliang.png)no-repeat;

}

.topdiv.caipiao{

background: url(img/top_caipiao.png)no-repeat;

}

.topdiv.none{

background: url(img/top_no.png)no-repeat;

}

.middle{

height:484px;

background:#ff3333;

}

.middleh3 {

font-size:56px;

height:140px;

line-height:140px;

color:#fff;

padding-left:79px;

letter-spacing:6px;

}

.middleh3span{

color:#ff0;

font-size:82px;

vertical-align:bottom;/*对齐方式*/

}

.middlediv{

padding-left:53px;

}

.middledivspan{

width:327px;

height:256px;

display:inline-block;

background: blue;

vertical-align:top;

background: blue;

}

.middlediv.box1{

background: url(img/m_box1.png)no-repeat;

}

.middlediv.box2{

background: url(img/m_box2.png)no-repeat;

}

.middlediv.box3{

background: url(img/m_box3.png)no-repeat;

}

.middlediva{

background: url(img/m_button.png)no-repeat;

width:78px;

height:92px;

display:inline-block;

margin-top:64px;

}

.footer{

height:755px;

background:#ffc;

}

.footerh3{

height:180px;

background: url(img/f_h3.png)no-repeat;

}

.footerdiv{

height:468px;

padding-left:79px;

}

.footerdivulli{

height:144px;

background: palegreen;

margin-bottom:27px;

width:968px;

border-radius:5px;

letter-spacing:7px;

}

.footerdivullia{

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>

<divid="main">

<divclass="top">

<h3>

<span>已开宝箱获得</span>

<strong>13:34从余额宝中充值得到</strong>

</h3>

<div>

<spanclass="liuliang"></span>

</div>

<divclass="middle">

<div>

</div>

<divclass="footer">

<div>

<ul>

<a href="#">余额宝充值送宝箱</a>

</li>

<liclass="box5">

<a href="#">分享宝贝送宝箱</a>

</li>

<liclass="box6">

<a href="#">愿望清单送宝箱</a>

</li>

</ul>

</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;

}

1 0