HTML+CSS 实战：温州广厦
1、首页布局
知识点：
①浮动float：让块级元素不独占一行
行内元素：heda meat title lable span br a style em b i strong
块级元素：body from select textarea h1-h6 html table button hr p ol ul dl cnter div
②清除浮动clear
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>温州广厦</title>
<link rel="stylesheet" type="text/css" href="style/basic.css"/>
</head>
<body>
<!--头部-->
<div class="header">header</div>
<!--导航栏-->
<div class="nav">nav</div>
<!--欢迎光临-->
<div class="sidebar">sidebar</div>
<!--新闻中心-->
<div class="news">news</div>
<!--关于我们-->
<div class="about">about</div>
<!--楼盘-->
<div class="estate">estate</div>
<!--尾部-->
<div class="footer">footer</div>
</body>
</html>
basic.css :
*{
margin: 0;
padding: 0;
}
div{
}
body{
width: 867px;
margin: 0 auto; /*居中*/
}
.header{
width: 867px;
height: 323px;
background: aqua;
}
.nav{
height: 51px;
background: chartreuse;
}
.sidebar{
width: 251px;
height: 490px;
background: darkseagreen;
float: left; /* sidebar 、mews、about、estate均使用左浮动，目的：让块级元素不独占一行*/
}
.news{
width: 313px;
height: 300px;
background: red;
float: left;
}
.about{
width: 303px;
height: 300px;
background: coral;
float: left;
}
.estate{
width: 616px;
height: 190px;
background: olive;
float: left;
}
.footer {
height: 110px;
background: blue;
clear: both; /*清除浮动*/
}
效果图 ：
2、思考与反思
（1）考虑到七个页面的header、nav、footer部分是一致的，所以可以把CSS样式提到一个文件里面：
basic.css
/* header / nav / footer */
*{
margin: 0;
padding: 0;
}
div{
}
ul{
list-style-type: none; /*不显示列表样式*/
}
a{
text-decoration: none;
}
body{
width: 867px;
margin: 0 auto; /*居中*/
font-size: 12px;
background: darkslategray;
}
.header{
width: 867px;
height: 323px;
}
.header embed{
width: 867px;
height: 323px;
}
.nav {
height: 51px;
background: url("../images/linkbg.jpg");
}
.nav ul{
line-height: 51px; /*设置行高*/
}
.nav ul li{
/*display: inline-block; 与其他行内元素共享一行，不会独占一行. */
float: left; /*左浮动，使元素位于一行*/
text-align: center;
width: 124px;
background: url("../images/linkr.gif") no-repeat right center; /*使竖线不平铺，右边距中显示*/
}
.nav ul li:last-child{
width: 123px;
background: none; /*去掉最后一个元素右边的分隔符*/
}
.nav ul li a{
color: white;
display: inline-block;
width: 124px;
height: 51px;
/*text-decoration: none; 文字修饰，去掉下划线*/
}
.nav ul li a:hover{
/*点击链接时字体显示为黄色，并出现下划线*/
font-size: 14px;
font-weight: bold;
color: yellow;
text-decoration: underline;
}
.nav ul li a:last-child{
width: 123px;
}
.footer {
height: 110px;
background: url("../images/bg.gif");
clear: both; /*清除浮动*/
}
.footer p{
text-align: right;
}
（2）后面6个页面的sidebar、.content h1 部分是一样的，也可以把CSS归成一个文件：
same.css
.sidebar{
width: 266px;
height: 750px;
background: white;
float: left;
border-right: 1px solid #666666;
}
.sidebar embed{
width: 220px;
margin-top: 20px;
margin-left: 30px;
}
.content{
width: 600px;
height: 750px;
background: white;
float: left;
}
.content h1 {
background: url("../images/newsc.gif") no-repeat;
width: 123px;
height: 35px;
color: #666666;
margin-top: 20px;
margin-left: 30px;
text-indent: -9999px; /*隐藏字体*/
}
（2）上面代码有一个知识点：
background: url("../images/newsc.gif") no-repeat;
text-indent: -9999px; /*隐藏字体*/
可以用图片来隐藏文字。
（3）form标签、table标签
<form>
<p><label for="username">您的姓名：<input type="text" class="text" name="username" id="username" value="" /></label></p>
<p><label for="email">电子邮件：<input type="text" class="text" name="email" id="email" value="@" /></label></p>
<p><textarea class="area"></textarea></p>
<p><input type="submit" value="发送邮件" class="submit" /></p>
</form>
（4）dl标签
<dl>
<dt>新楼盘</dt>
<dd>三盘·领海 </dd>
<dd>三盘领海坐落在温州著名风景区--洞头三盘岛西边,海中湖中间,也是温州到洞头县城的必经之路,与温州市区50公里,与洞头县城只需3分钟... </dd>
<dd><a href="#"></a></dd>
</dl>
<dl> 标签定义一个描述列表。
<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。
类似于table标签。
（5）浮动布局
项目源码添加链接描述