CSS网页布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/nirvanafeng/article/details/4508590

Tag：CSS，Div，网页布局

设计网页，先要设计网页的板块划分，也对显示内容进行规划。通常的做法就是：先使用<div>将页面划分为几个板块，然后确定每个版块的显示位置，最后使用CSS中的相关属性，对每一个板块进行位置定义和显示设置。比如一般网页都会包括：header，content，footer这些板块。

关于具体的CSS属性，可以通过W3C的网络课堂来学习：http://www.w3school.com.cn/css/index.asp

下面是实例，4个div元素分出了四个板块，每个版块元素有一个id唯一标识，这个id与CSS中的样式设置是对应的。

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tag Cloud Sample</title> <link href="css.css" mce_href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <hr width=50% align=left color=#FFB6C1 size=3> <hr width=50% align=right color=Yellow size=3> </div> <div id="search"> <fieldset><legend align="center"><font size=4><b>基本检索</b></font></legend> <form name="query form" method="get" action="result.php"> 请输入关键词: <input type="text" name="key"> <input type="submit" value="查询"> </form> </fieldset> </div> <div id="cloud"> <br> <br> </div> <div id="footer"> <br> <hr width=100% align=left color=#FFB6C1 size=2> <font size=3 face=宋体> ©版权所有:NirvanaFeng </font> </div> </body> </html>

下面是对应的CSS文件，以确定每个版块的位置以及其他格式。

body { margin:0; background: #d3d7d4; color:#130c0e } #header { position: absolute; top:10px; left:15px; width:1000px; height:80px; } #search { position: absolute; top:97px; left:15px; width:740px; height:750px; } #cloud { position: absolute; top:97px; left:760px; width:240px; height:750px; } #Footer { position: absolute; top:842px; left:15px; width:1000px; height:80px; }

CSS和div