第 8 章 门户类网站制作.pptVIP

规划页面布局 综合实例—简洁设计网站首页 div id=header/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div class=m/div div class=j/div div id=footer/div 规划并建立站点 创建站点根文件夹 创建CSS样式文件夹 创建图片文件夹 页面头部信息内容的制作 本节内容请参照第7章的7.3节，在此不再赘述。不同处是导入样式表文件，在此添加1个样式表文件，即index.css，保存在style文件夹中。添加代码如下： link href=style/index.css rel=stylesheet type=text/css / 对整体样式进行定义 *{ margin:0px; padding:0px; list-style:none; } body { font-size:12px; color:#333; line-height:22px; background:url(../images/body_bg.gif) repeat-x; } img { border:0; } h3,h3 a { font-size:12px; color:#2B64AD; line-height:29px; } a { color: #333333; text-decoration: none; } .a1 { color: #09F; text-decoration: none; } .a2 { color: #C00; text-decoration: none; } .a3 { color: #999; text-decoration: none; } a:hover { text-decoration: underline; color: #2b64ad; } .c { clear:both; } 首先对body、img、链接样式等进行全局定义，再定义各栏目都会用到的公用标签 头部内容结构分析 页面头部的制作 div id=header div class=topbar/div div class=logo/div div class=banner/div div class=nav/div div class=search/div /div 头部内容的制作 对头部文件整体添加样式 #header { width:965px; height:111px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; } 对于div+css构架的网页，一般采取从外到内，分块制作 先对头部文件的最外层#header添加样式： 页面头部的制作 制作顶部内容 div class=topbar div class=new_gg a href=#分享到QQ空间/a a href=#分享到腾讯朋友/a a href=#知识阅读/a /div div class=topnav a href=#RSS订阅/a a href=#桌面壁纸/a a href=#简洁QQ群/a a href=#帮助中心/a a href=#简洁旧版/a /div /div .topbar { height:25px; line-height:25px; position:relative; z-index:10; } .topbar a { margin-right:10px; .new_gg { float:left; width:640px; margin-left:6px; } .topnav { width:295px; float:right;