b前墙开发)》实验教学指导/实验五:文字排版1 《Web前端开发》实验教学指导 实验五:文字排版 实验目的(5分) 1、掌握CSS进行页面表现控制的基本方法和CSS的基本原理; 2、掌握CSS进行文字排版的基本内容和使用方法。 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统 2、安装有 Adobe dreamweaver cs6软件的计算机一台 3、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、掌握控制文字的标签有哪些 2、掌握通过不同的方法控制文字的样式; 3、能够熟练的在网页中对文字进行各种样式的排版 四、实验原理(5分) 1、HTML的基本语法 2、CSS的基本语法; 3、通过CSS进行文字排版的基本方法; 4、 jQuery的基本语法。 五、实验步骤 l、新闻列表的实现 编写简单的新闻列表,效果如图5-1所示。 通过htm1与css结合进行文字排版 通过htmn1与css结合进行文字排版 通过htm1与cs结合进行文字排版 通过htm1与cs结合进行文字排版 世界最大橡皮在否港破损漏气·通过n与c结合进行文字排版 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 。文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 。文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 图5-1新闻列表 河南中医药大学管理科学与工程学科 本讲共计9页|当前第1页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 1 页 《Web 前端开发》实验教学指导： 实验五：文字排版 一、实验目的（5 分） 1、掌握 CSS 进行页面表现控制的基本方法和 CSS 的基本原理； 2、掌握 CSS 进行文字排版的基本内容和使用方法。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统； 2、安装有 Adobe Dreamweaver CS6 软件的计算机一台； 3、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、掌握控制文字的标签有哪些； 2、掌握通过不同的方法控制文字的样式； 3、能够熟练的在网页中对文字进行各种样式的排版。 四、实验原理（5 分） 1、HTML 的基本语法； 2、CSS 的基本语法； 3、通过 CSS 进行文字排版的基本方法； 4、jQuery 的基本语法。 五、实验步骤 1、新闻列表的实现 编写简单的新闻列表，效果如图 5-1 所示。 图 5-1 新闻列表
b前墙开发)》实验教学指导/实验五:文字排版2 参考代码: <! doctype html> <htmI> Head> <meta charset="utf-8> < title>新闻列表</ title Style type="text/css> margin: 10px margin overflow hidden width: aute margin-left: 10px border-bottom: lpx solid #999 list-style-position: inside list1 i float: left idth: 210px list2 width: 410px list li i width: 200px overflow hidden width: 410px overflow: hidden: 1 float: left 河南中医药大学管理科学与工程学科 本讲共计9页|当前第2页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 2 页 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>新闻列表</title> <style type="text/css"> body{ font-size:12px; margin:10px; } ul{ margin:0px; padding:0px; overflow:hidden; padding-bottom:5px; width:auto; } li{ margin-left:10px; border-bottom: 1px solid #999; height:25px; line-height:25px; list-style: circle; list-style-position:inside; } .list1 { float:left; width:210px; } .list2 { float:left; width:410px; } .list1 li { width:200px; overflow:hidden; } .list2 li { width:410px; margin-left:0px; overflow:hidden;} .content { float:left;
b前墙开发)》实验教学指导/实验五:文字排版3 width: 420px border: lpx solid #999 2、简单的导航条 编写简单的导航条,效果如图5-2所示 文字排饭文字排饭文字排饭文字排版 文字排 导航菜单 参考代码 <! doctype htmI> Khtml> <meta charset="utf-8> < title>文字排版 title <style type="text/css"> margin: 20px auto Opx width: 1024px: width: 1024px background-color: #333 border-radius: 5px: margin: 0r list-style: none float: left position: relative 河南中医药大学管理科学与工程学科 本讲共计9页|当前第3页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 3 页 width:420px; height:auto; padding:5px; border:1px solid #999; } 2、简单的导航条 编写简单的导航条，效果如图 5-2 所示。 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>文字排版</title> <style type="text/css"> body { margin:20px auto 0px; width:1024px; font-size:12px; } .menu { width:1024px; background-color:#333; height:30px; border-radius:5px; color:#FFF; } .menu ul { margin:0px; padding:0px; } .menu ul li { list-style:none; float:left; position:relative; 图 5-2 导航菜单
b前端开发》实验教学指导/实验五:文字排版4 cursor: pointer menu ul li div i width: 100px text-align: center height: 30px border-right: #FFF lpx solid; line-height: 30px font-size: 14px menu ul li ul( margin: UpX padding: Opx position: absolute display: none: left: Opx menu ul li ul li( margin: Opx list-style: none background-color: #666 width: 95px margin-top: lpx height: 25px line-height: 25px padding-left: 5px cursor: pointer menu ul li: hover ul position: absolute width: 100p top: 30p menu ul li ul li: hover background-color: #CCC </style> <div class="menu> 1i<div>首页</div>/1i> 1i> 河南中医药大学管理科学与工程学科 本讲共计9页|当前第4页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 4 页 cursor:pointer; } .menu ul li div{ width:100px; text-align:center; height:30px; border-right:#FFF 1px solid; line-height:30px; font-size:14px; } .menu ul li ul{ margin:0px; padding:0px; position:absolute; display:none;left:0px; } .menu ul li ul li{ margin:0px; padding:0px; list-style:none; background-color: #666; width:95px; margin-top:1px; height:25px; line-height:25px; padding-left:5px; cursor:pointer; } .menu ul li:hover ul{ display:block; position:absolute; width:100px; top:30px; } .menu ul li ul li:hover { background-color: #CCC; } </style> </head> <body> <div class="menu"> <ul> <li><div>首页</div></li> <li>
《前端开发》实验教学指导/实验五:文字排版5 div>学院概况<div> <u1> 1i>O学院简介</1i 1>O现任领导</1i> 1>O历任领导√1i> </1i <div>招生就业</div> <u1> 1>O专业介绍√1i 1>○招生信息</1i 1>○就业咨询/1i /1i div>教学管理/div> <u1> 1i>O教学安排</1i 〈1>O教学监督</1i> 〈1>O考务</1i> <div>学生管理/div> <u1> 〈1>O学工工作</1i> 〈1>O分团队工作</1i 1>O学生风采</1i> /1i> </u1> </body> / htmI> 河南中医药大学管理科学与工程学科 本讲共计9页|当前第5页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 5 页 <div>学院概况</div> <ul> <li>○学院简介</li> <li>○现任领导</li> <li>○历任领导</li> </ul> </li> <li> <div>招生就业</div> <ul> <li>○专业介绍</li> <li>○招生信息</li> <li>○就业咨询</li> </ul> </li> <li> <div>教学管理</div> <ul> <li>○教学安排</li> <li>○教学监督</li> <li>○考务</li> </ul> </li> <li> <div>学生管理</div> <ul> <li>○学工工作</li> <li>○分团队工作</li> <li>○学生风采</li> </ul> </li> </ul> </div> </body> </html>