css+div网站设计（css设计网页）
本文目录一览：
如何快速用css加div做一个简单网页
1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上link href="main.css" type="text/css" rel="stylesheet"使它受到main.css控制
html
head
title/title
/head
body
/body
/html
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"/div
div id="top2"/div
div id="top3"/div
/div
/body
/html
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px;}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"这里都是我截图的照片/div
div id="top2"
div class="baidu"/div
div class="baidu"/div
/div
div id="top3"
div class="baidujingyan"/div
div class="baidujingyan"/div
/div
/div
/body
/html
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:#FF33FF}
#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}
#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}
#top2{background:#FF00CC; height:400px; width:800px}
#top3{background:#FF9933; height:550px; width:800px}
.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}
.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
html
head
title/title
link href="main.css" type="text/css" rel="stylesheet"
/head
body
div id="top"
div id="top1"这里都是我老婆的照片/div
div id="top2"
div class="baidu"img src="QQ图片20141212090452.jpg"/div
div class="baidu"img src="QQ图片20141212090346.jpg"/div
/div
div id="top3"
div class="baidujingyan"img src="QQ图片20141212090224.jpg"/div
div class="baidujingyan"img src="QQ图片20141212090255.jpg"/div
/div
/div
/body
/html
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
网站设计CSS与DIV布局
你的意思是要代码的吗？六个题目都写成代码的形式吗？还是给你说说原理？
网页设计采用div+css有什么好处？
采用Div+CSS设计布局网站具有以下的优点:
第一、大大缩减页面代码。
因为采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而提高页面浏览速度。而Table表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
第二、对搜索引擎更加友好同时获得更好的网站排名
DIV+CSS布局简洁清晰，具备搜索引擎SEO的先天条件。对搜索引擎更加友好，更容易被搜索引擎收录，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。
DIV+CSS布局不公方便搜索引擎收录，而且还可以并获得搜索引擎更高的评价。用只包含结构化内容的HTML代替嵌套的标签，主次分明，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
第三、兼容性卓越
DIV+CSS布局符合web标准规范，几乎所有的浏览器上都可以使用，不会因为在不同的浏览器中显示效果差距很大。
第四、缩短网站改版时间
因为网站的布局都是通过外部的css文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
第五、强大的控制和排版布局能力
CSS在控制字体的能力比糟糕的FONT标签好太多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。
第六、提高易用性
使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
第七、扩展性能优越
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint，手机浏览器等。
第八、灵活的页面布局
通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。
Table表格布局灵活性不大，你只能遵循 table tr td 的格式。而div你可以 div ul li 也可以 ol li 还可以 ul li......
第九、表现和内容相分离
干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。
关于css+div网站设计和css设计网页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
发表评论
暂时没有评论，来抢沙发吧~