CSS3+DIV页面设计实例
(1)启动 Dreamweaver,新建HTML 文档,保存为 index.html
(2)切换到代码视图,在标签内输入以下代码,构建本页面主体结构,设计本例页面一级框架.
<div id="top">div>
<div id="top1">div>
<div id="main">div>
<div id="footer">div>
<div id="copyright">div>
在标准布局中,每个div框架元素定义 d属性,这些属性如同人的身份证一样,方便css 能够准确控制每个div 布局块.所以,为了阅读和维护的需要,我们应该为它们起一个有意义的名字.
(3)进一步细化页面结构,设计页面内部层次框架.由于本例页面比较简单,嵌套框架不会很深,顶部和底部布局块可能就不要嵌套框架.
输入完整的 HTML 结构代码:
<div id="top">div>
<div id="top1">
<img src="images/ba top.jpg" width="776" height="121"/>
div>
<div id="main">
<div id="content">
<div id="title">
Hello World--第-个CSS3+DIV 页面
div>
<div class="sub">
实例
div>
<div class="box">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="content br">
(4)丰富结构内容,使用
标签显示代码内容,使用设计超链接文本,整个页面内容显示如下,代码内容是在网页中居中显示红色字符“Hello World!”.
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
h1 {
color: #FF0000;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>
pre>
div>
div>
div>
div>
div>
<div id="gotop">
<a title="跳到页首" href="#top">
返回顶部
a>
div>
div>
div>
<div id="footer">div>
<div id="copyright">
©2017
<a href="#" target="_black" >
mysite.cn
a>
all rights reserved
div>
上面所用 的HTML框架代码嵌套层次只有3层，其中为了实现圆角区域的显示效果而单独嵌套的多层div元素除外
(5)按Ctrl+S快捷键保存文档，按F12键在浏览器中预览
(6)编写 CSS代码可以在一个单独的文件中进行.新建CSS文档,保存为 style.css,文件扩展名为.CSS.
(7)不急于编写 CSS代码,打开 index.html文档,然后在标签内部插入一个标签,输入以下代码导入上一步新建的外部样式表文件.
(8)打开style.css 文档,在其中输入CSS代码如下:
html{ min-width:776px;}
body {
margin:0px;
padding:0px;
border:Opx;color:#000;
font-size:14px;
line-height:160%;
text-align:center;
background:#6D89DD;
font-family:'宋体','新宋体',arial,verdana,sans-serif;
}
a {
margin:0px;
padding:0px;
border:0px;
text-decoration:none;
}
a:link{ color:#E66133;}
a:visited{ color:#E66133;}
a:hover{ color:#637DBC; text-decoration:underline;}
pre { text-indent:0;background:#DDDDDD;padding:0;margin:0;color:blue;}
#top{
width:776px;
margin-right:auto;
margin-left:auto;
padding:Opx;
height:12px;
background:url(images/bg_top1.gif) #fff repeat-x left top;
overflow:hidden;
}
#top1{
width:776px;
margin-right:auto;
margin-left:auto;
padding:Opx;
height:121px;
}
#main{
width:776px;
margin-right:auto;
margin-left:auto;
padding:1.2em 0px;
background:ur1(images/bg dot1.gif) #fff repeat left top;
text-align:left;
}
#content{
width:710px;
margin-right:auto;
margin-left:auto;
padding:lem;
background:#fff;
}
#title{
font-weight:bold;
margin:0px 0px 0.5em 0px;
padding:0.5em 0px 0.5em 1em;
font-size:24px;
color:#00A06B;
text-align:left;
border-bottom:solid #9EA3C1 2px;
}
.sub {
color:#00A06B;
font-weight:bold;
font-size:13px;
text-align:left;
padding:1em 2em 0;
background:url(images/0.gif) #fff no-repeat 1em 74%;
}
.content{
text-indent:2em;
font-size:13px;
margin-left:2em;
padding:1em 6px;
}
#gotop{
width:100%;
margin:0px;
padding:0px;
background:#ffff
height:2em;
font-size:12px;
text-align:right;
}
#footer{
clear:both;
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
background:url(images/bg_ bottom.gif) #fff repeat left top;
text-align:center;
height:39px;
color:#ddd;
}
#copyright{
width:776px;
margin-right:auto;
margin-left:auto;
padding:5px 0px 0px 0px;
background:#fff;
text-align:center;
height:60px;
line-height:13px;
font-size:12px;
color:#9EAOBB;
}
#copyright a{ color:#667EBE;}
.box{ background:url(images/nt.gif)repeat;}
.tl{ background:url(images/tl.gif)no-repeat top left;}
.tr { background:url(images/tr.gif)no-repeat top right;}
.b1{ background:url(images/bl.gif) no-repeat bottom left;}
.br { background:url(images/br.gif) no-repeat bottom right;}
width 属性用来定义宽度,background:url(images/bg_bottom.gif)#fff repeat left top;规则用来定义背景图像重复铺展显示,其中指定背景图像的地址,repeat 属性定义铺展显示,left top表示背景图像的起始位置为左上角.