新jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第11章.pptVIP

定义网页布局结构的HTML代码 !doctype html html head title人民邮电出版社/title /head body div id=content div id=main section header id=logo h1Logo comes here/h1 /header header id=banner !--Banner-- /header /section 接上 section id=maincontent article class=blog header h1This is the Title of your Blog/h1 /header !--Content-- /article /section /div nav id=navigation !-- Navigation -- /nav /div footer id=footer !-- Footer -- /footer /body /html 2．设计页眉 本实例的页眉部分有徽标图片和横幅图片组成，定义代码如下： header id=logo img src=img\logo.jpg /header header id=banner /header 3．设计页面正文部分 section id=maincontent article class=blog header br/br/ h1出版社简介/h1 /header p人民邮电出版社（以下简称“邮电社”）是工业和信息化部主管的大型专业出版社。成立于1953年10月1日，2003年被中央确定为文化体制改革第一批试点单位，2010年全面完成转企改革工作。 /p …… /article /section /section 4．设计导航菜单 nav id=navigation ul class=sidemenu lia href=#首页/a /li lia href=#作者投稿/a /li lia href=#网上书店/a /li lia href=#图书馆专区/a /li lia href=#本社期刊/a /li /ul /nav 没有设置样式的网页 5．设计网页的样式 STYLE { margin: 0; padding: 0; } header, footer, nav, article { display: block; } body { margin: 0 auto; width: 1000px; font: 13px/25px Helvetica, Arial, sans-serif; background: #000; } #content { display:table; background: #BBB; } 接上 #main { display:table-cell; width:850px; } #navigation { display:table-cell; background-color:#FFF; width:150px; background-color:#6d7581; vertical-align:top; } ul.sidemenu { padding: 0; margin: 0; list-style: none; width: 150px; background-color: #EEEEDC; } 接上 ul.sidemenu li { text-align: left; float:right; clear:both; background-color: #EEEEDC; width:150px; height:30px; } ul.sidemenu li a { text-decoration: none; display: block; width: auto; color: #FFFFFF; font-weight: bold; padding: 2px 10px; background-color:#1e3355; } ul.sidemenu li a:hover { background-color: #1e3355; width:auto; color: #FFFFFF; } 接上 #logo { float:left; background-color:#666; width:250px; height:50px; } #banner { float:right; width:590px; background-image:url(img/banner.jpg); height:53px; } #footer { clear:both;