网络专题制作总结 CSS代码.doc

专题制作总结手册 一、专题制作的步骤：1、制作模板1）设计出模板的框架结构、颜色搭配等；（设计分析）2）根据设计图，拆分图纸；（拆分图纸）3）分析出模板的层次；（布局分析）2、数据填入1）网站结构管理；（建立专题的发布规则）2）栏目管理；（建立专题的主次栏目）3）模板管理；（为制作好的模板找好位置）4）上传模板；（将dreamweaver与翔宇结合）二、专题制作中遇到的问题、细节处理及代码总结：目录表细节一：html、css和images的命名和位置和调用细节二：写好CSS 的“通用代码” 细节三：在主盒子内平铺“渐变色背景图”细节四：盒子的浮动 细节五：导航条和搜索栏的代码细节六：幻灯图片的代码 细节七：新闻报道的代码（横栏+新闻标题）细节八：图片报道的代码（横栏+图片） 细节九：视频报道的代码（横栏+视频图片）细节十：图片+标题+摘要+新闻的代码 细节十一：视频播报的代码（直接播放视频）细节十二：伪类别的代码设置 细节十三：footer的代码细节一：html、css和images的命名和位置和调用命名：先给予首页以下命名（“1.htm”、“1.files”、“css.css”、“focus.js”、“images”）；最后根据模板上传后翔宇“管理模块”/“模板管理”里自动生成的“模板文件路径”对应修改首页、二级页面及内容页面的命名。位置：命名为“1.htm”的文档和“1.files”的文件夹通常需放在同一文件夹，并在“1.files”的文件夹里放置“css.css”（层叠样式表）、“focus.js”(幻灯片代码)和“images”(图片素材)文件夹。调用：（以首页的html为例） 细节二：写好CSS 的“通用代码”body font-family:Arial, Helvetica, sans-serif;font-size:12px;body,ul,li,p,h2,h3,h4,span,form,table,td,img,div,inputmargin:0;padding:0;img border:0;div,pdisplay:block;ul,lilist-style:none;button cursor:pointer; atext-decoration:none;color:#;.clearclear:both;#bodywidth: ; margin:auto; background:url（） repeat-x center top; padding: ;细节三： 在主盒子内平铺“渐变色背景图”先前的错误做法：Html的写法： Css的写法：#bgwidth:955px;margin:0 auto;background:url(images/bg.jpg) top left;#snwidth:917px;padding:0 42px;margin:auto;最优做法：Html的写法：Css的写法：#snwidth:917px;margin:auto;background:url(images/bg.jpg) repeat-x center top;padding:0 42px;#headerwidth:917px;height:288px;float:left;#contentwidth:917px;float:left;#footerwidth:917px;height:70px;background-color:#f1f1f1;margin:2px 0px;padding:20px 0px 20px 0px;text-align:center;float:left;注：该效果无需为渐变背景图单独设置盒子，只需在“sn”里设置背景即可。切记，盒子的大小=width+margin+padding+border(其中，width仅是内容宽度)细节四： 盒子的浮动父盒子和子盒子都要设置浮动，且可通过左浮动实现效果；如：#headerwidth:950px;float:left; #centerwidth:950px;float:left;#footerwidth:950px;float:left;子盒子里面的“更多”可用” span”来设置，且通常为右浮动；如：.col h2 spanfloat:right;font-size:12px;font-weight:normal;padding-right:8px;.kuai h2 span,.pic h2 span,.kuai h2.els6 span,.kuai h2.els5 spancolor:#fff; float:right;细节五：导航条和搜索栏的代码Html的写法：国防部网站 专题策划团队专题TOP图片 今日要闻|导航条内容 国防搜索 网页搜索 注：伪类别的设置时，为作出“在新窗口弹出”效果，要加上这一属性设置。Css的写法：#headerwidth:950px;float:left;.subnavheight:19px;width:940px;float:left;background:url() no-repeat left top; padding:; color:;.subnav acolor:#fff;伪类别的设置（链接点击前和点击后颜色设置一致）.subnav a:hovercolor:#f00; 伪类别的设置（链接点击后需设另一颜色）.subnav imgmargin:0 4px 0 10px; 盒子里图片位置的设置方式.subnav bmargin-left:30px;.subnav spanmargin-left:40px; 盒子里文字位置的设置方式.topwidth:950px;float:left;height:146px;background:url() no-repeat left top;.navwidth:950px;float:left;height:60px;background:url() no-repeat left top;.menuwidth:655px;float:left;color:#99be9a;padding:5px 0 0 10px;.menu acolor:#fff;font-weight:bold;padding:0 6px;line-height:24px;.searchwidth:260px;float:left;padding:8px 0 0 25px;.search_topwidth:200px;float:left;color:#fff;font-weight:bold;padding-bottom:2px;.search_botwidth:244px;height:27px;float:left;background:url() no-repeat left top;.search_bot pwidth:70px;float:left;padding:8px 0 0 10px;.search_bot spanwidth:;float:left;display:block;padding-top:2px; 将文字元素变为块级元素.search_bot span inputwidth:;height:;border:none;background:#;color:;padding:;font-size:;细节六：圆角幻灯图片的代码 （含五张焦点图片+两个标题）Html的写法： 圆角幻灯片所在父盒子 圆角幻灯片上半个盒子 圆角幻灯片中间盒子包含和两个盒子 12345 枝头春意冰旅馆围剿新春招聘会巨蟒新春招聘会巨蟒艺考巨 圆角幻灯片下半个盒子部分示意图： Photo photo1Left_LFocusspan Css的写法：.photowidth:274px;float:left;position:relative;padding-bottom:20px;.photo imgwidth:274px;height:217px;.photo1width:226px; 覆盖photo的width,，并继承其它属性；.photo pheight:27px;background:#176e88;line-height:26px;.photo spandisplay:block;background:#d9d9d9;color:#999;padding:5px 0;line-height:22px;.left_1width:247px;float:left;padding:19px 0;.top_1,.bot_1,.bg_1width:247px;height:15px;float:left;background:url(./images/left_top.gif) no-repeat center top;.bg_1width:237px;height:100%;float:left;background:url(./images/left_bg.gif) repeat-y left top;padding-left:10px; 这里将前面设置的属性覆盖掉.left_L float:left; width:226px; .left_L .focus float: left; width:226px; height:184px; overflow:hidden;.mWrap width:336px; height:252px;overflow:hidden; float:left;.mWrap ul.Num position:absolute; z-index:55555; margin:10px 0 0 110px; display:inline;.mWrap ul.Num .a2border:solid 1px #FFCC00; background:#000; .mWrap ul.Num lifont:bold 14px/15px arial; padding:0 1px;color:#fff; width:15px; height:15px; float:left; text-align:center; cursor:pointer;border:solid 1px #000; background:#333; margin:0 1px; display:inline; .mWrap pfloat: left; width:226px; background:#; font-weight:bold; text-align:center; height:27px; line-height:27px; color:#fff;.mWrap p a color:#fff;.mWrap img width:226px; height:157px;.a02 acolor:#333;padding:0 8px细节七：新闻报道的代码（横栏+新闻标题）Html的写法： 更多国防视点 新闻标题 新闻标题 Css的写法：.colwidth:226px;float:left;padding-bottom:13px;.col h2height:29px;background:url(./images/bt_bg4a.gif) no-repeat center top;font-size:14px;color:#fff;line-height:30px;padding:2px 0 0 28px;.col h2 spanfloat:right;font-size:12px;font-weight:normal;padding-right:8px;.listfloat:left;padding-top:4px;.list liwidth:274px;float:left;border-bottom:solid 1px #f0f1f4;padding:4px 0;.list li.els3width:226px;padding:4px 0 4px 0;border:none;.a01 acolor:#fff;a:hovercolor:#f00;注：“更多” 盒子的设置：位置在“图片说明”前，需右浮动，；细节八：图片报道的代码（横栏+八张图片）Html的写法： 更多图片报道 图片说明 图片说明 图片说明 图片说明 图片说明 图片说明 图片说明 图片说明 Css的写法：.picwidth:690px;float:left;padding:0 0 10px 0;.pic h2width:637px;background:url(./images/pic_bg.gif) no-repeat left top; height:31px; font-size:14px;color:#fff;line-height:30px;padding-left:28px;.a01 acolor:#fff;.pic h2 spanfloat:right;font-size:12px;font-weight:normal;padding-right:8px;.piclistfloat:left;.piclist lifloat:left;width:149px;padding:7px 21px 4px 0;.piclist li imgwidth:143px;height:92px;border:solid 1px #a0a0a0;padding:3px;.piclist li spanwidth:143px;float:left;line-height:18px;注： 图片与上部横栏的位置大体，需关注h2的宽度设置；ul和li不要设高，li的宽度刚刚装得下img（图片说明会自动换行)，图片位置通过padding来设置（切忌不要用margin）；图片说明无需另设盒子，只需在li内加入，且宽度与img一致；细节九：视频报道（横栏+视频图片）Html的写法：更多国防视频 视频说明 视频说明 视频说明 视频说明 视频说明 视频说明 Css的写法：.kuaiwidth:274px;float:left;padding-bottom:20px;.kuai4width:260px;padding-bottom:13px;.kuai h2.els6width:232px;background:url(./images/bt_bg1b.gif) no-repeat;.a01 acolor:#fff; .a03 acolor:#5a5a5a;.plistwidth:100%;float:left;padding-top:4px;.plist li.els1width:126px;float:left;padding:3px 2px 0 2px;.plist li.els1 imgwidth:120px;height:90px;float:left;padding:2px;border:solid 1px #9ea0a7;.plist li imgwidth:122px;float:left;height:88px;border:solid 1px #9ea0a7;padding:2px;.plist li spanwidth:122px;display:block;line-height:26px;float:left;.plist li span.elswidth:112px;display:block;line-height:26px;float:left;.ge,.ge2width:274px;float:left;background:url() no-repeat bottom;height:8px;font-size:0px;.ge2width:260px;.listfloat:left;padding-top:4px;.list li.els7width:260px;padding:5px 0 4px 0;border:none;细节十：图片+标题+摘要+新闻的代码Html的写法： 更多国防科技 核工业|航天|航空|船舶|兵器|电子 奥巴马不会关马不会关暴跌灾希拉里将如何主导对中关闭中关何主导对中关闭中关测奥巴马会关闭灾预得暴. Css的写法：.kuaiwidth:274px;float:left;padding-bottom:20px;.kuai5width:260px;padding-bottom:18px;.kuai h2.els7,.kuai h2.els7awidth:232px;height:21px;background:url() no-repeat;padding:6px 0 0 28px;line-height:18px;.kuai h2.els7abackground:url(./images/bt_bgels1.gif) no-repeat;.bqelswidth:260px;height:24px;float:left;background:url(./images/bq_bg3.gif) no-repeat left top; color:#a0a0a0;line-height:24px;.a07 apadding:0px 6px;.tu2width:100%;float:left;padding-top:10px;.tu2 imgwidth:80px;height:61px;float:left;border:solid 1px #9ea0a7;padding:2px;background:#fff;.tu2 h3font-size:12px;float:left;padding-left:10px;font-weight:600;line-height:18px;.tu2 spanwidth:128px;display:block;float:left;padding:6px 0 0 10px;.tu2 span.els1width:158px;display:block;float:left;padding:6px 0 0 10px;.listfloat:left;padding-top:4px;.list liwidth:274px;float:left;border-bottom:solid 1px #f0f1f4;padding:4px 0;.list li.els6width:260px;padding:5px 0 4px 0;border-bottom:solid 1px #f0f1f4;细节十一：视频播报的代码Html的写法： 视频报道 AC_FL_RunContent( xmlns,xmlns:xhtml,/1999/xhtml,codebase,/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0,align,center,style,WIDTH: 286px; HEIGHT: 242px,type,url,description,id,3027541,filetype,FLVURL,movie,/flvplayer09,salign,lt,quality,high,scale,noscale,allowfullscreen,true,allowscriptaccess,always,isautoplay,1,flashvars,vcastr_file=/asset/category3/2009/11/13/asset_18266.flv&IsAutoPlay=1 ); /end AC code Css的写法：#videowidth:298px;margin:2px;.focuswidth:286px;.tb_videowidth:298px;height:26px;line-height:34px;background:url(tb_video.jpg) no-repeat;font-family:Arial;font-size:14px;color:#999999;text-indent:9em;注：要加上“Scripts”文件夹，位置放在“首页.files”、“首页.htm”同一级文件夹内。细节十二：伪类别的代码atext-decoration:none;color:#0d4077; 通用代码放置在CSS最下部的伪类别代码：.a01 acolor:#fff;.a02 acolor:#333;padding:0 8px.a03 acolor:#5a5a5a;