CSS和div

关注

原创最新推荐文章于 2025-12-28 10:03:20 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

精通DIV+CSS的网页设计与实现在前端开发中，DIV元素是最基本的布局单位，它通过不同的属性和样式的组合，实现页面上的各种布局需求。DIV元素的使用非常灵活，它可以嵌套其它HTML元素，通过CSS样式进行美化和布局调整。本章我们将从DIV的基础使用开始，逐步深入到如何通过CSS对DIV进行样式定义和布局。首先，了解DIV的标签结构十分简单，它是一个块级元素，代表了文档中的一个区域。例如，创建一个简单的DIV元素：-- 其它内容 --></div>接下来是样式定义，我们将使用CSS为DIV元素添加样式。阅读详情

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; }