您好,欢迎访问三七文档
当前位置:首页 > 办公文档 > 其它办公文档 > DIV+CSS网站布局-练习
DIV+CSS网站布局•第一步:规划网站•第二步:创建html模板及文件目录等•第三步:网页布局与div浮动•第四步:网页主要框架之外的附加结构的布局与表现•第五步:页面内的基本文本的样式(css)设置•第六步:网站头部图标与logo部分的设计•第七步:页脚信息的表现设置•第八步:导航条的制作•解决IE浏览器的显示BUGDIV+CSS网站布局DIV+CSS网站布局•本例中页面模块划分的规划–theheader(页面顶部)–theleft(左侧边栏)–thecontent(主体内容)–thefooter(页脚)DIV+CSS网站布局•规划网站–Header网站头部图标,包含网站的logo和站名•Width:692pxHeight:90px–MainNavigation导航条,具有按钮特效。•Width:178pxHeight:Changesdependingoncontent–Content网站的主要内容•Width:514pxHeight:Changesdependingoncontent–Footer网站底栏,包含版权信息等•Width:692pxHeight:66pxDIV+CSS网站布局•创建html模板及文件目录等–blog.html,并创建css文件夹和images文件夹DIV+CSS网站布局•创建html模板!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“”htmlheadmetahttp-equiv=“Content-type”content=“text/html;charset=UTF-8”/titleMyBlog/titlelinkrel=stylesheethref=css/master.csstype=text/css/headbody/body/htmlDIV+CSS网站布局•创建网站的大框–建立一个宽692px的盒子,它将包含网站的所有元素htmlheadlinkrel=stylesheethref=css/master.csstype=text/css/headbodydivid=containerHelloWorld/div/body/htmlDIV+CSS网站布局•控制html的id为container的盒子的宽为692px,背景为红色•让盒子居中,写入margin:0auto#container{margin:0auto;text-align:left;width:692px;background:red;}DIV+CSS网站布局•看到盒子和浏览器的顶端有空隙–这是由于浏览器的默认的填充和边界造成的–消除这个空隙body{margin:0;padding:0;}DIV+CSS网站布局•将网站分为四个divdivid=containerdivid=headerHeader/divdivid=leftLeft/divdivid=contentContent/divdivid=footerFooter/div/divDIV+CSS网站布局•为了将四个部分区分开来,将这四个部分用不同的背景颜色标示出来,在css文件写入#header{height:90px;width:692px;background:red;}#left{width:178px;background:darkgreen;}#content{width:514px;background:orange;}#footer{width:692px;background:green;}DIV+CSS网站布局•让边框浮动到主要内容的右边,用css控制浮动#left{width:178px;background:blue;float:left;}#content{width:514px;background:orange;float:left;}DIV+CSS网站布局•在主要内容的盒子中写入一些文字#footer{clear:both;width:692px;background:green;}DIV+CSS网站布局•构建顶部页面的内容htmlheadlinkrel=stylesheethref=blog.csstype=text/css/headbodydivid=containerdivid=headerimgsrc=images/header.jpgalt=ximiccwidth=692height=90//div/div/body/htmlDIV+CSS网站布局•顶部版块的CSS定义#header{text-align:center;}DIV+CSS网站布局•页脚的实现divid=footerh2copyright©2010Neusoft–ahref==_blankDuoh!®n.v./aFromahref==_blank网站布局•设置页脚的样式#footer{margin:0pxauto;position:relative;background-color:#717F51;border-top:9pxsolid#F7F7F6;width:692px;padding:5px0;clear:both;}用css网站布局•页脚中的文字和链接定义样式#footerh2{margin:0;text-align:center;font:normal10pxVerdana,Arial,Helvetica,sans-serif;color:#D3D8C4;}#footerh2a:visited,#footerh2a:link{color:#D3D8C4;text-decoration:none;border-bottom:1pxdotted#D3D8C4;}#footerh2a:hover{color:#F7F7F6;text-decoration:none;border-bottom:none;background-color:#A5003B;}DIV+CSS网站布局•侧边栏导航菜单divid=leftdivid=navcontainerulliahref=#id=currentHome/a/liliahref=#Aboutme/a/liliahref=#Contactme/a/liliahref=#Articles/a/liliahref=#Photoroll/a/li/ul/div/divDIV+CSS网站布局•首先定义导航外围容器的样式#navcontainer{width:178px;}DIV+CSS网站布局•改变列表的外观#navcontainerul{margin:0;padding:0;list-style-type:none;font:bold12px/22pxVerdana,Arial,Helvetica,sans-serif;text-indent:20px;letter-spacing:1px;border-bottom:1pxsolid#fff;}DIV+CSS网站布局•链接外观的定义#navcontainera{display:block;width:178px;height:22px;}DIV+CSS网站布局•定义鼠标经过链接时的翻转效果#navcontainera:link,#navcontainera:visited{background:url(../images/bg_navbutton.gif);color:#5C604D;text-decoration:none;}#navcontainera:hover{background:url(../images/bg_navbutton_over.gif);color:#A5003B;text-decoration:none;}DIV+CSS网站布局•定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目#navcontainerlia#current{background:url(../images/bg_navbutton_over.gif);color:#A5003B;text-decoration:none;}DIV+CSS网站布局•正文与图片的混排divid=contenth2Thisisthetitle/h2pclass=textimgsrc=images/image.jpgalt=imageofthedessertwidth=150height=139class=imageright/Loremipsumdolorsitamet,consectetueradipiscingelit.Curabiturwisimi,rutrumsitamet,viverravel,sodalesvitae,magna./ppclass=textAeneanveldui.Utsitametauguesederatconvallisullamcorper./ppclass=textNullamvitaeloremetleoeuismodconvallis.Nuncauctorelementumlacus.Utsagittisfelis.Donecnonwisi.Inerat.Proinornareenimsednulla./p/divDIV+CSS网站布局•正文的内容跟导航菜单贴得很紧,增加一点间隙–往需要填充的层中加入padding层,它的功能仅限于显示间隙divid=contentdivclass=padding…………………………./div/div#padding{padding:15px;}DIV+CSS网站布局•针对文章标题的标签定义CSS样式#contenth2{font:normal18pxGeorgia,TimesNewRoman,Times,serif;color:#80866A;background:transparenturl(../images/bullet_title.gif)no-repeat;width:454px;padding:00030px;margin:0;}DIV+CSS网站布局•定义正文文字的样式.text{font:11px/18pxVerdana,Arial,Helvetica,sans-serif;color:#5B604C;margin-bottom:10px;}DIV+CSS网站布局•定义图像上的样式.imageright{float:right;padding:7px;background-color:#ffffff;border:1pxsolid#bac1a3;}DIV+CSS网站布局•利用CSS定义页面的背景•背景图片只有5px高度将其设置为纵向平铺,利用参数50%使其水平居中•参数fixed的用处是让背景不随内容的滚动而滚动,它是“凝固”的body{background:#F7F7F6url(../images/background.gif)repeat-y50%0;background-attachment:fixed;}DIV+CSS网站布局•设计合理的CSS结构–采用2层CSS结构–既能够统一全站风格又能根据不同的页面设计独立的样式–假设有一个index.
本文标题:DIV+CSS网站布局-练习
链接地址:https://www.777doc.com/doc-5120133 .html