《Web前端开发》实验教学指导/实验五:文字排版 《Web前端开发》实验教学指导 实验五:文字排版 、实验目的 1、掌握CSS进行页面表现控制的基本方法和CSS的基本原理 2、掌握CSS进行文字排版的基本内容和使用方法 、实验环境 1、 Windows Xp/ Windows7操作系统 2、安装有 Adobe Dreamweaver CS6软件的计算机一台 3、局域网网络环境,并且使用固定IP地址。 三、实验要求 1、掌握控制文字的标签有哪些; 2、掌握通过不同的方法控制文字的样式 3、能够熟练的在网页中对文字进行各种样式的排版 四、实验原理 1、HTML的基本语法 2、CSS的基本语法 3、通过CSS进行文字排版的基本方法; 4、 jQuery的基本语法。 五、实验步骤 1、新闻列表的实现 编写简单的新闻列表,效果如图5-1所示。 通过htn1与css结合进行文字排版 通过htm1与ess结合进行文字排版 通过htmn1与css结合进行文字排版 通过htn与css结合进行文字排版 世界最大橡皮鸭在香港破损漏 。通过htmn1与cs结合进行文字排版 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 文字排版文字排版文字排版版文字排版文字排版文字排版文字排版版文字排 图5-1新闻列表 河南中医学院互联网应用技术研究所 本讲共计9页|当前第1页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 1 页 《Web 前端开发》实验教学指导 实验五：文字排版 一、实验目的 1、掌握 CSS 进行页面表现控制的基本方法和 CSS 的基本原理； 2、掌握 CSS 进行文字排版的基本内容和使用方法。 二、实验环境 1、Windows XP/Windows 7 操作系统； 2、安装有 Adobe Dreamweaver CS6 软件的计算机一台； 3、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、掌握控制文字的标签有哪些； 2、掌握通过不同的方法控制文字的样式； 3、能够熟练的在网页中对文字进行各种样式的排版。 四、实验原理 1、HTML 的基本语法； 2、CSS 的基本语法； 3、通过 CSS 进行文字排版的基本方法； 4、jQuery 的基本语法。 五、实验步骤 1、新闻列表的实现 编写简单的新闻列表，效果如图 5-1 所示。 图 5-1 新闻列表
《Web前端开发》实验教学指导/实验五:文字排版 参考代码 <doctype html> <html> <meta charset="utf-8> tte新闻列表<rite> <style type="text/css"> body font-size: 12px argin: Opx padding: Opx border-bottom: 1 px solid #999 height: 25px ist-style: cir float: left width: 210px list2 float: left: width: 410px width: 200px overflow hidden: width: 410px margin-left: Opx, overflow: hidden; 1 content float: left: border: 1 px solid #999 河南中医学院互联网应用技术研究所 本讲共计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; width:420px; height:auto; padding:5px; border:1px solid #999; }
《Web前端开发》实验教学指导/实验五:文字排版 </head> <div class="content"> div style="float: left; " ng src="new. jpg"width="200"height=130"/> <div class="list1"> <u|> <i>通过htm与css结合进行文字排版</> <|>通过htm与css结合进行文字排版</> <i>通过htm与css结合进行文字排版</i> <i>通过htm与css结合进行文字排版</i <>通过htm与css结合进行文字排版< <divs div class="list2"> <>文字排版文字排版文字排版版文字排版版文字排版<> <i>文字排版文字排版文字排版版文字排版版文字排版</> <>文字排版文字排版文字排版版文字排版版文字排版</> <>文字排版文字排版文字排版版文字排版版文字排版< 2、简单的导航条 编写简单的导航条,效果如图5-2所示 文字排版 图5-2导航菜单 参考代码 <doctype html> tite>文字排版<htte <style type="text/css"> dy 河南中医学院互联网应用技术研究所 本讲共计9页|当前第3页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 3 页 </style> </head> <body> <div class="content"> <div style="float:left;"> <img src="new.jpg" width="200" height="130"/> </div> <div class="list1"> <ul> <li>通过 html 与 css 结合进行文字排版</li> <li>通过 html 与 css 结合进行文字排版</li> <li>通过 html 与 css 结合进行文字排版</li> <li>通过 html 与 css 结合进行文字排版</li> <li>通过 html 与 css 结合进行文字排版</li> </ul> </div> <div class="list2"> <ul> <li>文字排版文字排版文字排版版文字排版版文字排版</li> <li>文字排版文字排版文字排版版文字排版版文字排版</li> <li>文字排版文字排版文字排版版文字排版版文字排版</li> <li>文字排版文字排版文字排版版文字排版版文字排版</li> </ul> </div> </div> </body> </html> 2、简单的导航条 编写简单的导航条，效果如图 5-2 所示。 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>文字排版</title> <style type="text/css"> body { 图 5-2 导航菜单
wb前端开发》实验教学指导/实验五:文字排版4 margin: 20px auto Opx width: 1024px width: 1024px background-color: #333 border-radius: 5px; menu ul t menu ul i position relative menu ul li div ext-align center; height: 30px border-right: #FFF 1px solid line-height: 30px; ul li margin: Opx padding: 0px position: absolute isplay: none menu ul li ul li background-color: #666 width: 95px padding-left: 5px; menu ul li: hover ul 河南中医学院互联网应用技术研究所 本讲共计9页|当前第4页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 4 页 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; 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;
《b前端开发》实验教学指导/实验五:文字排版5 menu ul li ul li: hover background-color: #CCC; i><dv>首页<div></i> <dv>学院概况<div> <i>O学院简介</li> <|>O现任领导</li> <|>O历任领导</i <dⅳ>招生就业</div> <i>O专业介绍</> <>O招生信息< <i>○就业咨询</i> <d>教学管理</div> <|>O教学安排< <i>O教学监督< <i>O考务</i> <dⅳ>学生管理</div> <ul> O学工工作 <i>O分团队工作<i> <|>O学生风采</i> </ub> 河南中医学院互联网应用技术研究所 本讲共计9页|当前第5页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 5 页 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> <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>