商苑电商：盒子模型的实现
来自CloudWiki
创建盒子
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link type="text/css"rel="stylesheet"href="../css/index.css"/>
<title>只音音乐</title>
</head>
<body>
<div class="header">
</div>
<div class="zhuti">
</div>
<div class="end">
</div>
</body>
</html>
为盒子设定样式
index.css:
@charset "utf-8";
/* CSS Document */
body{
background-color:pink;
}
h2{
color:black;
text-align:center;
}
p{
text-indent:50px;
color:black;
}
.header{
width:100%;
height:auto;
background:#C00;
}
.zhuti{
width:80%;
height:auto;
background:#0C0;
margin:0 auto;
}
.end {
width:100%;
height:70px;
text-align:center;
background:#F6F;
}
上文中如果出现空隙，可以添加如下代码消除空隙：
* {
margin:0;
padding:0;
}
为盒子添加内容
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link type="text/css"rel="stylesheet"href="../css/index.css"/>
<title>只音音乐</title>
</head>
<body>
<div class="header">
<h2>只音音乐</h2>
<hr size="5"/>
<p>音乐，让你在悲伤时感到一丝快乐，让你在感动时潸然落泪。音乐让你知道，人世间的各种欢乐，各种辛酸，各种痛楚；音乐让你知道，只要有音乐，你就不会孤独，不会寂寞。音乐，为你的生命注入了无穷的动力。</p>
<p>音乐带着难得的自信和微笑在旋律中绽放，伴着电子琴曲风，每一个音符都像生命在跳跃。音乐赋予了我们太多的心灵悸动。曾经的硝烟弥漫，过眼的春光烂漫，欢腾的青春畅想，都被它用干净的声线在清晨唤醒，快乐地行走在灿烂的阳光里</P>
<hr size="1" >
<h3 align="lift" >每日更新 音乐人 MV 音乐故事 附近听者</h3>
</div>
<div class="zhuti">
<hr size="1" align="center" width="100%" color="#FFA042">
<h2>心情</h2>
<img src="../img/ting.jpg"/>
<hr size="5" />
<h2 >娱乐</h2>
<img src="../img/ting1.jpg" />
<hr size="5"/>
<h2 >风景</h2>
<img src="../img/ting2.jpg"/>
</div>
<div class="end">
<h3>创作团队：胡亚君，王成成，周方圆</h3>
<p>山东商业职业技术学院 邮编：250000</p>
</div>
</body>
</html>
