web编程基础－css、javascript、jquery第1部分网页基础.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （3）设置侧边栏（导航）样式 然后设置相应CSS样式： #homeNav{ float:left; width:149px; overflow: hidden; z-index: 1000; border-right: 1px solid #999999; background-color:#FFFFFF; box-shadow: #666 0px 0px 10px; } 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （3）设置侧边栏（导航）样式 #homeNav div{ width: 149px; height: 60px; position: relative; } #homeNav .even{ background-color:#eff4f7; } 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （3）设置侧边栏（导航）样式 #homeNav div a{ text-decoration: none; font-weight: bold; color: #666666; } #homeNav div a:hover{ color: #0c7cbe; } 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （3）设置侧边栏（导航）样式 #homeNav h1{ color: #666666; float: left; position: absolute; top:16px; margin:0 15px; padding:4px 0px; font-size:18px; line-height:18px; height: 18px; border-left: 8px solid #0c7cbe;} 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （3）设置侧边栏（导航）样式 图5 导航样式设置效果图 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （4）主体内容设置 1）添加层结构和内容 div id=MainBody!--主体内容-- div id=home div class=imgs /div 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （4）主体内容设置 1）添加层结构和内容 div class=news a href=#div class=title/div/a ul li a href=# title=我校师生为社区居民免费修家电 div class=text我校师生为社区居民免费修家电/div div class=time2013-06-05/div/a /li …… /ul /div 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （4）主体内容设置 1）添加层结构和内容 div class= notice a href=#div class=title/div/a ul li a href=# title=关于举办“端午诗会”的通知 div class=text关于举办“端午诗会”的通知/div div class=time2013-04-20/div/a /li …… /ul /div /div/div　 电子信息工程学院网页布局 《WEB编程基础》 三、网页布局制作 2、 添加内容、设置样式 （4）主体内容设置 2）样式设置 #MainBody{ float:right; width:850px;} #home{ padding-left: 1px;} #ho