《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前端开发》实验教学指导/实验五:文字排版 参考代码 tte新闻列表 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 页 参考代码： 新闻列表 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前端开发》实验教学指导/实验五:文字排版 div style="float: left; " ng src="new. jpg"width="200"height=130"/> 通过htm与css结合进行文字排版 通过htm与css结合进行文字排版 通过htm与css结合进行文字排版 通过htm与css结合进行文字排版通过htm与css结合进行文字排版 <>文字排版文字排版文字排版版文字排版版文字排版<> 文字排版文字排版文字排版版文字排版版文字排版 <>文字排版文字排版文字排版版文字排版版文字排版 <>文字排版文字排版文字排版版文字排版版文字排版 tite>文字排版 dy 河南中医学院互联网应用技术研究所 本讲共计9页|当前第3页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 3 页 通过 html 与 css 结合进行文字排版 通过 html 与 css 结合进行文字排版 通过 html 与 css 结合进行文字排版 通过 html 与 css 结合进行文字排版 通过 html 与 css 结合进行文字排版 文字排版文字排版文字排版版文字排版版文字排版 文字排版文字排版文字排版版文字排版版文字排版 文字排版文字排版文字排版版文字排版版文字排版 文字排版文字排版文字排版版文字排版版文字排版 2、简单的导航条 编写简单的导航条，效果如图 5-2 所示。 参考代码： 文字排版 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>首页 学院概况 O学院简介 O现任领导 O历任领导招生就业 O专业介绍 <>O招生信息○就业咨询 教学管理 O教学安排O教学监督O考务 学生管理 O学工工作 O分团队工作 O学生风采 河南中医学院互联网应用技术研究所 本讲共计9页|当前第5页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 5 页 width:100px; top:30px; } .menu ul li ul li:hover { background-color: #CCC; } 首页 学院概况 ○ 学院简介 ○ 现任领导 ○ 历任领导 招生就业 ○ 专业介绍 ○ 招生信息 ○ 就业咨询 教学管理 ○ 教学安排 ○ 教学监督 ○ 考务 学生管理 ○ 学工工作 ○ 分团队工作 ○ 学生风采
wb前端开发》实验教学指导/实验五:文字排版6 3、使用 jQuery控制文字排版 (1)熟练掌握使用CSS控制文字排版,并且能够使用 jquery控制页面的一些效果 (2)使用CSS和 Jquery编写页面,实现文字内容的展示控制,基本的效果如图5-3所示。 匆匆 作者:朱自青/创作时间:1922年3月28日 燕子去了,有再来的时候;杨抑桔了,有再青的时寸候;桃花 谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为 什么一去不复返呢?一—是有人偷了他们罢:那是谁?又藏在何 处呢?是他们自己选走了罢:现在又到了哪里呢? 匆匆 作者:未自清/创作时间:1922年3月26日 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花 谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为 什么一去不复返呢?—一是有人偷了他们罢:那是谁?又藏在何 处呢?是他们自己逃走了罢:现在又到了哪里呢? 我不知道他们给了我多少日子;但我的手确乎是渐渐空虚 了。在默黑理算着,八千多日子已经从我手中溜去;像针尖上 滴水滴在大海里,我的日子滴在时间的流里,没有声音,也没有 景子。我不禁头涔涔而泪濤潸了· 收起》 图5-3 jQuery控制文字的显隐 参考代码: tte文本样式 dding: 0 135p color: #333 line-height:180%;/行间距 河南中医学院互联网应用技术研究所 本讲共计9页|当前第6页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 6 页 3、使用 jQuery 控制文字排版 （1）熟练掌握使用 CSS 控制文字排版，并且能够使用 jquery 控制页面的一些效果； （2）使用 CSS 和 jquery 编写页面，实现文字内容的展示控制，基本的效果如图 5-3 所示。 参考代码： 文本样式 * { margin:0px; padding:0px; } body { margin:30px; padding:0px; font-size:13.5px; color:#333; line-height:180%; /*行间距*/ 图 5-3 jQuery 控制文字的显隐
《Web前端开发》实验教学指导/实验五:文字排版 text-align: center;/文字水平对其方式 font-weight: bold;/文本加粗 20px;/文字大小 color:#F00;/文字颜色 letter-spacing:10px;/字符间距 font-size: 11p color: #999. font-weight normal text- indent:2em;/首行缩进 text-align: justify; div i width: 400px border-radius: 5px hide display: none check float: right; cursor pointer color: #09F SC check.).click( function if(S( check)hmO=="更多>>") S. hide").show( m("收起>&gr); 河南中医学院互联网应用技术研究所 本讲共计9页|当前第7页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 7 页 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; } $(function() { $('.check').click( function() { if($('.check').html()=="更多>>") { $('.hide').show(); $('.check').html("收起>>"); } else {
《b前端开发》实验教学指导/实验正:文字排版8 SC hide,). hide 0: s( check)htm("更多>&gr") 匆匆 作者:朱自清/创作时间:1922年3月28日 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开的时 候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们 罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢? o class="hide">我不知道他们给了我多少日子;但我的手确乎是渐渐空虛了。在默 默里算着,八千多日子已经从我手中溜去;像针尖上一滴水滴在大海里,我的日子滴在 时间的流里,没有声音,也没有影子。我不禁头涔涔而泪潸潸了…… 更多>:&g /body> 要求 请将上述三个案例的代码使用更加优化的方式实现,并将代码填写到实验报告册中。 六、自主实验步骤 1、移动终端新闻列表页 (1)为移动终端设计新闻列表页面。 (2)设计样式参考腾讯网页面,具体效果如图5-4所示。 9:51 。89% 腾讯网 P微博☆空间聊书城四游戏B软件 美国龙卷风惨烈现场:社区成废墟 财经【财经眼】鱼米之乡“毒米调查 娱乐李宇春:露胸,秀腿就是性感吗 体育1亚冠9人国安1-3首尔无缘8强 军事1国产“高新6号”反潜巡逻机露面 活题朝鲜军人为何屡劫中国渔船 图5-4腾讯网 联网应用技术研究所 页|当前第8页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 8 页 $('.hide').hide(); $('.check').html("更多>>"); } }); }) 匆匆 作者：朱自清 / 创作时间：1922 年 3 月 28 日 燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们 罢：那是谁？又藏在何处呢？是他们自己逃走了罢：现在又到了哪里呢？ 我不知道他们给了我多少日子；但我的手确乎是渐渐空虚了。在默 默里算着，八千多日子已经从我手中溜去；像针尖上一滴水滴在大海里，我的日子滴在 时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了…… 更多>> 要求： 请将上述三个案例的代码使用更加优化的方式实现，并将代码填写到实验报告册中。 六、自主实验步骤 1、移动终端新闻列表页 （1）为移动终端设计新闻列表页面。 （2）设计样式参考腾讯网页面，具体效果如图 5-4 所示。 图 5-4 腾讯网
《wb前端开发》实验教学指导/实验五:文字排版9 要求 请根据要求撰写—个面向移动终端的新闻列表页,并将代码填写到实验报告册中。 2、 jQuery制作交互式内容显示效果 (1)使用cSS+ jQuery结合撰写一个页面,要求页面打开时,显示按钮。点击按钮时,显 示文字内容。 (2)页面打开时的效果如图5-5所示,点击按钮后的效果如图5-6所示 点击 图5-5页面打开时的效果 点击 Jquery制作弹出层提示信息 图5-6点击按钮后的效果 要求 请根据要求使用 jQuery撰写交互式内容显示页面,并将代码填写到实验报告册中 七、思考及问答 1、中英文的文字排版 (1)中文和英文的文字排版有哪些区别? (2)对于阿拉伯文等文字,在排版上有哪些不同? 2、移动开发的手机和平板 (1)面向移动开发时,如何区分手机和平板? (2)移动开发的文字排版和PC开发的文字排版,有哪些不同? (3)移动开发中,手机和平板在文字处理上有哪些不同? 3、 jQuery (1)什么是 jQuery?为什么要使用 jQuery? (2)学习 jQuery的资料有哪些? (3)和 jQuery相类似的开发类库有哪些? 河南中医学院互联网应用技术研究所 本讲共计9页|当前第9页
《Web 前端开发》实验教学指导 / 实验五：文字排版 河南中医学院互联网应用技术研究所 本讲共计 9 页 | 当前第 9 页 要求： 请根据要求撰写一个面向移动终端的新闻列表页，并将代码填写到实验报告册中。 2、jQuery 制作交互式内容显示效果 （1）使用 CSS+jQuery 结合撰写一个页面，要求页面打开时，显示按钮。点击按钮时，显 示文字内容。 （2）页面打开时的效果如图 5-5 所示，点击按钮后的效果如图 5-6 所示。 要求： 请根据要求使用 jQuery 撰写交互式内容显示页面，并将代码填写到实验报告册中。 七、思考及问答 1、中英文的文字排版 （1）中文和英文的文字排版有哪些区别？ （2）对于阿拉伯文等文字，在排版上有哪些不同？ 2、移动开发的手机和平板 （1）面向移动开发时，如何区分手机和平板？ （2）移动开发的文字排版和 PC 开发的文字排版，有哪些不同？ （3）移动开发中，手机和平板在文字处理上有哪些不同？ 3、jQuery （1）什么是 jQuery？为什么要使用 jQuery？ （2）学习 jQuery 的资料有哪些？ （3）和 jQuery 相类似的开发类库有哪些？ 图 5-5 页面打开时的效果 图 5-6 点击按钮后的效果