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 新闻列表 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 1 页
参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title> 新闻列表 </title> <style type="text/css"> body{ font-size:12px; margin:10px; ul{ 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 { width:210px;.list2 { width:410px;.list1 li { width:200px; overflow:hidden;.list2 li { width:410px; margin-left:0px; overflow:hidden;.content { width:420px; height:auto; padding:5px; border:1px solid #999; 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 2 页
</style> </head> <body> <div class="content"> <div style=""> <img src="new.jpg" width="200" height="130"/> <div class="list1"> <div class="list2"> <li> 文字排版文字排版文字排版版文字排版版文字排版 </li> <li> 文字排版文字排版文字排版版文字排版版文字排版 </li> <li> 文字排版文字排版文字排版版文字排版版文字排版 </li> <li> 文字排版文字排版文字排版版文字排版版文字排版 </li> </body> </html> 2 简单的导航条 编写简单的导航条, 效果如图 5-2 所示 图 5-2 导航菜单 参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title> 文字排版 </title> <style type="text/css"> body { 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 3 页
margin:20px auto 0px; width:1024px; font-size:12px;.menu { width:1024px; background-color:#333; height:30px; border-radius:5px; color:#fff;.menu ul {.menu ul li { list-style:none; 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{ position:absolute; display:none;left:0px;.menu ul li ul li{ 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; 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 4 页
width:100px; top:30px;.menu ul li ul li:hover { background-color: #CCC; </style> </head> <body> <div class="menu"> <li><div> 首页 </li> <li> <div> 学院概况 <li> 学院简介 </li> <li> 现任领导 </li> <li> 历任领导 </li> </li> <li> <div> 招生就业 <li> 专业介绍 </li> <li> 招生信息 </li> <li> 就业咨询 </li> </li> <li> <div> 教学管理 <li> 教学安排 </li> <li> 教学监督 </li> <li> 考务 </li> </li> <li> <div> 学生管理 <li> 学工工作 </li> <li> 分团队工作 </li> <li> 学生风采 </li> </li> </body> </html> 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 5 页
3 使用 jquery 控制文字排版 (1) 熟练掌握使用 CSS 控制文字排版, 并且能够使用 jquery 控制页面的一些效果 ; (2) 使用 CSS 和 jquery 编写页面, 实现文字内容的展示控制, 基本的效果如图 5-3 所示 图 5-3 jquery 控制文字的显隐 参考代码 : <!doctype html> <html> <head> <meta charset="utf-8"> <title> 文本样式 </title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> * { body { margin:30px; font-size:13.5px; color:#333; line-height:180%; /* 行间距 */ 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 6 页
text-align:center; /* 文字水平对其方式 */ h1 { font-weight:bold; /* 文本加粗 */ font-size:20px; /* 文字大小 */ color:#f00; /* 文字颜色 */ letter-spacing:10px; /* 字符间距 */ h3 { p { margin:10px auto; font-size:11px; color:#999; font-weight:normal; text-indent:2em; /* 首行缩进 */ text-align:justify; width:400px; div { width:400px; height:auto; border:1px solid #CCC; border-radius:5px; padding:5px;.hide { display:none;.check { float:right; margin-right:30px; cursor:pointer; color:#09f; </style> <script> $(function() { $('.check').click( function() { if($('.check').html()==" 更多 >>") { else { $('.hide').show(); $('.check').html(" 收起 >>"); 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 7 页
$('.hide').hide(); $('.check').html(" 更多 >>"); ); ) </script> </head> <body> <div> <h1> 匆匆 </h1> <h3> 作者 : 朱自清 / 创作时间 :1922 年 3 月 28 日 </h3> <p> 燕子去了, 有再来的时候 ; 杨柳枯了, 有再青的时候 ; 桃花谢了, 有再开的时候 但是, 聪明的, 你告诉我, 我们的日子为什么一去不复返呢? 是有人偷了他们罢 : 那是谁? 又藏在何处呢? 是他们自己逃走了罢 : 现在又到了哪里呢? <p class="hide"> 我不知道他们给了我多少日子 ; 但我的手确乎是渐渐空虚了 在默默里算着, 八千多日子已经从我手中溜去 ; 像针尖上一滴水滴在大海里, 我的日子滴在时间的流里, 没有声音, 也没有影子 我不禁头涔涔而泪潸潸了 </p> <span class="check"> 更多 >></span> </body> </html> 要求 : 请将上述三个案例的代码使用更加优化的方式实现, 并将代码填写到实验报告册中 六 自主实验步骤 1 移动终端新闻列表页 (1) 为移动终端设计新闻列表页面 (2) 设计样式参考腾讯网页面, 具体效果如图 5-4 所示 图 5-4 腾讯网河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 8 页
要求 : 请根据要求撰写一个面向移动终端的新闻列表页, 并将代码填写到实验报告册中 2 jquery 制作交互式内容显示效果 (1) 使用 CSS+jQuery 结合撰写一个页面, 要求页面打开时, 显示按钮 点击按钮时, 显示文字内容 (2) 页面打开时的效果如图 5-5 所示, 点击按钮后的效果如图 5-6 所示 图 5-5 页面打开时的效果 图 5-6 点击按钮后的效果 要求 : 请根据要求使用 jquery 撰写交互式内容显示页面, 并将代码填写到实验报告册中 七 思考及问答 1 中英文的文字排版 (1) 中文和英文的文字排版有哪些区别? (2) 对于阿拉伯文等文字, 在排版上有哪些不同? 2 移动开发的手机和平板 (1) 面向移动开发时, 如何区分手机和平板? (2) 移动开发的文字排版和 PC 开发的文字排版, 有哪些不同? (3) 移动开发中, 手机和平板在文字处理上有哪些不同? 3 jquery (1) 什么是 jquery? 为什么要使用 jquery? (2) 学习 jquery 的资料有哪些? (3) 和 jquery 相类似的开发类库有哪些? 河南中医学院互联网应用技术研究所本讲共计 9 页 当前第 9 页