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 参考代码: Head> 新闻列表 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 页 参考代码： 新闻列表 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所示 文字排饭文字排饭文字排饭文字排版 文字排 导航菜单 参考代码 Khtml> 文字排版 title 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 所示。 参考代码： 文字排版 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 1i首页/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; } 首页
《前端开发》实验教学指导/实验五:文字排版5 div>学院概况 1i>O学院简介O现任领导 1>O历任领导√1i> 招生就业 1>O专业介绍√1i 1>○招生信息○就业咨询/1i /1i div>教学管理/div> 1i>O教学安排O教学监督 〈1>O考务 学生管理/div> 〈1>O学工工作 〈1>O分团队工作O学生风采 /1i> / htmI> 河南中医药大学管理科学与工程学科 本讲共计9页|当前第5页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 5 页 学院概况 ○学院简介 ○现任领导 ○历任领导 招生就业 ○专业介绍 ○招生信息 ○就业咨询 教学管理 ○教学安排 ○教学监督 ○考务 学生管理 ○学工工作 ○分团队工作 ○学生风采
b前墙开发)》实验教学指导/实验五:文字排版6 3、使用 jQuery控制文字排版 (1)熟练掌握使用CSS控制文字排版,并且能够使用 jquery控制页面的一些效果 (2)使用CSS和 jquery编写页面,实现文字内容的展示控制,基本的效果如图5-3所示。 匆匆 作者:朱自清/创作时间:1922年3月28日 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花 谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为 什么一去不复返呢?一一是有人偷了他们罢:那是谁?又藏在何 处呢?是他们自己逃走了罢:现在又到了哪里呢? 更多 匆匆 作者:朱自清/创作时间:1922年3月28日 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花 谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为 什么一去不复返呢?一一是有人偷了他们罢:那是谁?又藏在何 处呢?是他们自己逃走了罢:现在又到了哪里呢? 我不知道他们给了我多少日子;但我的手确乎是渐渐空虚 了。在黑嘿里算着,八千多日子已经从我手中溜去;像针尖上 滴水滴在大海里,我的日子滴在时间的流里,没有声音,也没有 影子。我不禁头涔涔而泪潸潸了… 收起》 图5-3 jQuery控制文字的显隐 参考代码 t=utf-8> /script> margin: Opx 河南中医药大学管理科学与工程学科 本讲共计9页|当前第6页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 6 页 3、使用 jQuery 控制文字排版 （1）熟练掌握使用 CSS 控制文字排版，并且能够使用 jquery 控制页面的一些效果； （2）使用 CSS 和 jquery 编写页面，实现文字内容的展示控制，基本的效果如图 5-3 所示。 参考代码： 文本样式 * { margin:0px; 图 5-3 jQuery 控制文字的显隐
b前墙开发)》实验教学指导/实验五:文字排版7 padding: Opx margin: uPx font-size: 13. 5px color: #333 line- height:180%;/*行间距* text- align: center;/*文字水平对其方式*/ h1{ font- weight:bold;/*文本加粗*/ font-size:20px;/*文字大小* color:#F00;/*文字颜色* letter- spacing:10px;/*字符间距*/ margin: 10px auto font-size: 1lpx color: #999 font-weight: normal text- indent:2em;/*首行缩进* text-align: justify width: 400px width: 400px height: auto border: lpx solid #CCC uS: 5px padding: 5px float: left hide I display: none float: right inter color: #09F 河南中医药大学管理科学与工程学科 本讲共计9页|当前第7页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 7 页 padding:0px; } body { margin:30px; padding:0px; font-size:13.5px; color:#333; line-height:180%; /*行间距*/ text-align:center; /*文字水平对其方式*/ } h1 { font-weight:bold; /*文本加粗*/ font-size:20px; /*文字大小*/ color:#F00; /*文字颜色*/ letter-spacing:10px; /*字符间距*/ } h3 { margin:10px auto; font-size:11px; color:#999; font-weight:normal; } p { text-indent:2em; /*首行缩进*/ text-align:justify; width:400px; } div { width:400px; height:auto; border:1px solid #CCC; border-radius:5px; padding:5px; float:left; } .hide { display:none; } .check { float:right; margin-right:30px; cursor:pointer; color:#09F; }
b前墙开发)》实验教学指导/实验五:文字排版8 s(function O $(”. check’). click( function O f($(. check’).htm10=”更多>是gt;") $(.hide’). show( $(. check’).htm1("收起>>") else $(.hide’). hide( (. check).html("更多>>"); h1>匆匆 作者:朱自清/ 创作时间:1922年3月28 日燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开的时 候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?一一是有人偷了他们 罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢? 我不知道他们给了我多少日子;但我的手确乎是渐渐空虚了。在默 默里算着,八千多日子已经从我手中溜去;像针尖上一滴水滴在大海里,我的日子滴在 时间的流里,没有声音,也没有影子。我不禁头涔涔而汨潸潸了……更多>> 请完成以下任务 任务一:新闻列表的实现 任务二:下拉菜单的实现 任务三:使用 jQuery控制文字排版 要求 请将上述三个案例的代码使用更加优化的方式实现,并将代码填写到实验报告 册中。 河南中医药大学管理科学与工程学科 本讲共计9页|当前第8页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 8 页 $(function() { $('.check').click( function() { if($('.check').html()=="更多>>") { $('.hide').show(); $('.check').html("收起>>"); } else { $('.hide').hide(); $('.check').html("更多>>"); } }); }) 匆匆 作者：朱自清/ 创作时间：1922 年 3 月 28 日 燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们 罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？ 我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默 默里算着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴在 时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了…… 更多>> 请完成以下任务： 任务一：新闻列表的实现； 任务二：下拉菜单的实现； 任务三：使用 jQuery 控制文字排版。 要求： 请将上述三个案例的代码使用更加优化的方式实现，并将代码填写到实验报告 册中
b前墙开发)》实验教学指导/实验五:文字排版9 六、自主实验步骤 1、 j Query制作交互式内容显示效果 (1)使用CSs+ jQuery结合撰写一个页面,要求页面打开时,显示按钮。点击按钮时,显 示文字内容 (2)页面打开时的效果如图5-4所示,点击按钮后的效果如图5-5所示 图5-4页面打开时的效果 点击 Jquery制作弹出层提示信息。 图5-5点击按钮后的效果 请完成以下任务 任务一:编写代码,完成如图5-4所示的页面效果。(10分) 任务二:当单击“点击”按钮时,显示如图5-5所示效果。(10分) 要求 请根据要求使用 jQuery撰写交互式内容显示页面并将代码填写到实验报告 册中。 七、思考及问答 1、中文和英文的文字排版有哪些区别?(5分) 2、图文混排的版式有哪些?(5分) 2、面向移动开发时,如何区分手机和平板?(5分) 3、什么是 jQuery?为什么要使用 j Query?(5分) 河南中医药大学管理科学与工程学科 本讲共计9页|当前第9页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医药大学管理科学与工程学科 本讲共计 9 页 | 当前第 9 页 六、自主实验步骤 1、jQuery 制作交互式内容显示效果 （1）使用 CSS+jQuery 结合撰写一个页面，要求页面打开时，显示按钮。点击按钮时，显 示文字内容。 （2）页面打开时的效果如图 5-4 所示，点击按钮后的效果如图 5-5 所示。 请完成以下任务： 任务一：编写代码，完成如图 5-4 所示的页面效果。（10 分） 任务二：当单击“点击”按钮时，显示如图 5-5 所示效果。（10 分） 要求： 请根据要求使用 jQuery 撰写交互式内容显示页面 ，并将代码填写到实验报告 册中。 七、思考及问答 1、中文和英文的文字排版有哪些区别？ （5 分） 2、图文混排的版式有哪些？（5 分） 2、面向移动开发时，如何区分手机和平板？（5 分） 3、什么是 jQuery？为什么要使用 jQuery ？（5 分） 图 5-4 页面打开时的效果 图 5-5 点击按钮后的效果