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 结构代码:

<!--[完整HTML 框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"><img src="data: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>
&lt;!doctype html&gt;
&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;title&gt;Hello World&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;h1 {color: #FF0000;text-align: center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Hello World! &lt;/h1&gt;&lt;/body&gt;
&lt;/html&gt;
</pre></div></div></div></div></div><div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div></div>
</div>
<!--底部 -->
<div id="footer"></div>
<div id="copyright"> &copy;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文档,然后在标签内部插入一个标签,输入以下代码导入上一步新建的外部样式表文件.

<!--[在网页中链接外部样式表文件]-->
<LINK href="images/style.css"type=text/css rel=stylesheet>

(8)打开style.css 文档,在其中输入CSS代码如下:

<!--公共属性-->
html{ min-width:776px;}
<!--页面属性:边距0,字体颜色为黑色,字体大小14像素,行高为字体大小的1.6倍,居中对齐,背景色为天蓝色,字体为宋体等-->
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;}
<!--预定义格式属性:浅灰色背景,无首行缩进,内边距大小,外边距为0,右缩进为一个字体大小,字体颜色为蓝色-->
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表示背景图像的起始位置为左上角.

CSS3+DIV页面设计实例相关推荐

跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
http://www.aa25.cn/234.shtml 转载于:https://www.cnblogs.com/asia/archive/2009/05/20/1467772.html
收藏网站制作常用经典css.div.布局.设计实例打包下载
点击下载:8好玩的导航菜单.动态感比较强lavalamp_0[1].1.0.rar 点击下载:box盒子-.rar 点击下载:cctv-鼠标滑过图片渐变效果.rar 点击下载:css-menu导航.r ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...
web课程设计网页规划与设计—— 中西餐美食餐饮网站(10页面) html+css+javascript网页设计实例...
web课程设计网页规划与设计-- 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HT ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...

CSS3+DIV页面设计实例

CSS3+DIV页面设计实例相关推荐

最新文章

热门文章