用CSS样式制作一个简单的静态网页

html-css010

用CSS样式制作一个简单的静态网页,第1张

<html>

<head>

<title>CSS简单网页</title>

<style>

#box{width:500pxheight:500pxposition:relativelytop:50%left:50%margin-top:-250pxleft:-250pxbackground:#f00color:#fff}

</style>

</head>

<body>

<div id="box">这是一个简单的水平，垂直居中的盒子</div>

</body>

</html>

Dreamweaver（cs3版本）里面一大堆，你点新建，就可以看到一大堆经典DIV+CSS模版。里面都有中文说明（简体中文版），我怕你没耐心看，有耐心也看不会，还是系统的去学，这样学的快，很快。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

</head>

<style type="text/css">

.top{ height:100pxbackground:#3399CCwidth:100%}

.content{ height:500pxwidth:100%}

.c_top{ height:100pxbackground:#FFCC99}

.c_u_l{ float:left width:10%background:#CCFFCCheight:400px}

.c_u_m{ float:left width:80%background:#FFFFCCheight:400px}

.c_u_r{ float:rightwidth:10%background:#CCFFCCheight:400px}

.footer{ height:100pxbackground:#CC99CCwidth:100%}

</style>

<body>

<div class="top"></div>

<div class="content">

<div class="c_top"></div>

<div >

<div class="c_u_l"></div>

<div class="c_u_m"></div>

<div class="c_u_r"></div>

</div>

</div>

<div class="footer"></div>

</body>

</html>

运行一下看看...