教程视频：http://edu.csdn.net/course/detail/535 从42开始
制作的网页：http://www.cnos.co/
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.html和img文件夹为同级的目录，则路径应该写为:img/1.jpg
效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
width:1002px;
background-color:gray;
}
#header{
height:120px;
background-color: aquamarine;
}
#main{
height: 600px;
background: darkgoldenrod;
}
#footer{
height: 120px;
background: yellowgreen;
}
#main-left{
float: left;
background: yellow;
width: 700px;
height: 100%;
}
#main-right{
float: right;
background: pink;
width: 302px;
height:100% ;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="main-left"></div>
<div id="main-right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
注意：这里对id为main的div里面的子div main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
3、当一个div包含两个左右浮动的div并且后面接个普通的div时
<div id="main">
<div id="lside">
</div>
<div id="rside">
</div>
</div>
<div id=”footer” >
</div>
因为两个浮动的div浮在水面上，但是父div(即id为main的div)没有高度所以没把父div撑开。Footer的div会在水平面上，所以加背景颜色和height后可以看到此div在这两个浮动div下面，要使footer的div呈现在下面并且不被覆盖，
第一种方法：给main的div加height：800px；让他撑开
第二种方法：在两个浮动div后面加上一个class为cl的div，样式为clear：both；
网页制作的初步完成：
Html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" href="css/首页实战-2.css" />
</head>
<body>
<div id="container"> <!--div#container-->
<div id="header"> <!--div#header+div#main+div#footer-->
<img src="img/logo.jpg" alt="" id="logo"/>
<ul id="nav">
<li><a href="#">导航1</a></li> <!--li*7>a>{导航$}-->
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
<li><a href="#">导航6</a></li>
<li><a href="#">导航7</a></li>
</ul>
</div>
<img src="img/about_banner.jpg" alt="" id="banner" />
<div id="main">
<div id="lside">
<div class="subtitle">
<img src="img/circle.gif"/>
<h1>核心业务</h1>
<a href="">MORE>></a>
</div>
<div class="four">
<h2>电子商务类网站建设</h2>
<img src="img/eshop_service.jpg" alt="" />
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><a href="#">方便的货物管理</a></li>
<li><a href="#">自定义会员类型</a></li>
<li><a href="#">在线支付功能</a></li>
<li><a href="#">丰富的订单统计</a></li>
<li><a href="#">财务报表生成</a></li>
</ul>
</div>
<div class="four">
<h2>电子商务类网站建设</h2>
<img src="img/eshop_service.jpg" alt="" />
<ul> <!--ul>li*5>{方便的货物管理$}-->
<li><a href="#">方便的货物管理</a></li>
<li><a href="#">自定义会员类型</a></li>
<li><a href="#">在线支付功能</
最低0.47元/天 解锁文章
扫一扫
4923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
