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

  • 1
  • 0
  • 约2.38万字
  • 约 114页
  • 2018-06-30 发布于四川
  • 举报

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

web编程基础-css、javascript、jquery第1部分网页基础

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 电子信息工程学院网页布局 《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

文档评论(0)

1亿VIP精品文档

相关文档