1.制作图5.38所示的北大青鸟课程介绍页面。页面要求如下，
>使用<div>.<p>.<span>等标签编辑页面，页面整体背景颜色使用线性渐变
（#ECECEC，#FFFFED）.
课程特色字体颜色为绿色（#5C9815），设计理念字体颜色为橙色（#F26522）.
>课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供作业素材的页面
效果图中获取、使用结构伪类选择器元素。
>使用外部样式表创建页面样式。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>北大青鸟课程介绍页面</title>/*内部样式*/<style>/*渐变线*/#Bj{ width:600px;background: linear-gradient(to bottom,#ECECEC,#FFFFED);}/*字体颜色*/.yss{color: #5C9815;}   .yss1{color: #F26522}/*结构仿类选择器*/p span:nth-of-type(1){background: chartreuse;}p span:nth-of-type(2){background: #2ecd7b;}p span:nth-of-type(3){background:cadetblue;}p span:nth-of-type(4){background:darkcyan;}p span:nth-of-type(5){background: blue;}p a:nth-of-type(1){background:brown;}p a:nth-of-type(2){background:royalblue;}p a:nth-of-type(3){background:red;}p a:nth-of-type(4){background:fuchsia;}p a:nth-of-type(5){background:darkorchid;}/*图片大小*/.dx{height: 50px}</style>
</head>
<body><div id="Bj"><img src="title.gif"/><h3><img src="img_01.png" class="dx"/></h3><p class="yss"><span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致<span>模拟学员学习路线：</span>模强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/><span>互联网作为教学环境：</span>学员的日常教学和训练均在互联网线上进行<br/><span>学习挡板监控网上学习效果：</span>每个学习阶段设置线上线下测试，严密监控学习效果<br/><span>真实开发项目经验积累：</span>采用专业互联网企业提供的真实项目作为模拟开发</p><h3><img src="img_02.png" class="dx"/> </h3><p class="yss1">【实用性】—— 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br/><a>【权威性】——</a>与来自百度等知名企业的专家联合开发<br/><a>【专业性】——</a>引进业内资深人才和典型行业开发项目<br/><a>【真实性】——</a>在互联网真实环境下进行教学和训练<br/><a>【易学性】——</a>在线培训模式，24小时专家在线解答疑难问题<br/><a>【完整性】——</a>利用SNS虚拟社区：学习、人脉双丰收</p></p></div>
</body>
</html>
2.制作席慕蓉的《初相遇》
页面总宽度为400px，整体背录颜色线性渐变（#CAEFFE#FFFED)
使用<h1>标签排版文本标题，字体大小为18px，黑色文字阴影。
使用<p>标签排版文本正文，首行缩进为2em.行高为22px，
首段第一个“美”字，字体大小为180x，加相显示。黑色和白色文字阴影具体方向参考
素材效果图。第二段中的“胸怀中满溢…在我眼前”字体风格为倾斜。颜色为蓝色，字
体大小为16px，正文其余文字大小为12px.
最后一段文字带下划线。
使用外部样式表创建页面样式。
>页面中的字体颜色从提供作业素材的页面效果图中获取。 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初相遇——席慕蓉</title><style>/*总宽度*/.kd{width: 400px;background:linear-gradient(to bottom,#CAEFFE,#FFFFED);}/*标题大小 居中 阴影*/h1 {font-size:18px;text-align: center;text-shadow: black 2px 2px 2px}/*行内高度 缩进文本间距*/p{line-height: 22px;text-indent: 2em}/* 下划线 绿色*/.xt{text-decoration: underline;color: green}/*字体大小 字体粗 阴影*/span{font-size: 18px;font-weight: bold;text-shadow: black ,aliceblue }/*蓝色 字体大小 倾斜体*/.ZT {color: blue;font-size: 16px;font-style: oblique;}/*其他字体大小*/p{font-size:12px}.xzt{font-size: 12px}</style>
</head>
<body><div class="kd"><h1>初相遇   <span class="xzt">文/席慕容</span></h1><p><span>美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p><p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="ZT">胸怀中满溢着幸福，只因你就在我眼前，</span>对我微笑，一如当年。</p><p class="xt">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p></div>
</body>
</html>

3.制作图5.40所示的淘宝女装分类页面、页面要求如下。
>使用无序列表等HTML标签有语义化的编辑页面。
>女装各分类名称前的图片使用背景图片的方式实现，标题字体大小为18px，加相显示。
分类内容字体大小为12px，超链接文本字体颜色为黑色，无下划线。当鼠标移至超链接文
本上时字体颜色为橙色（#F60），并且显示下划线。
>使用外部样式表创建页面样式。
>页面中其他的效果样式见提供的作业素材中的页面效果图。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淘宝女装分类页面</title><style>/*垂直水平居中*/p img{vertical-align: middle}/*标题文字大小 粗体*/.active{font-size: 18px;font-weight: bold;}/*其它文字大小*/p{font-size: 12px;}/*黑色字体 无下划线*/ul a{color: black;text-decoration: none;}/*超链接 橙色 下划线*/a:hover{color: #f60;text-decoration: underline}</style>
</head>
<body><ul><p><img src="dress01.png"/><strong class="active">夏季流行</strong></p><hr/><p> <a href="#" target="_blank">夏季新品</a>  <a href="#"target="_blank">雪纺裙</a>  <a href="#" target="_blank">铅笔裤</a>  <a href="#" target="_blank">短裤</a>  <a href="#" target="_blank">短袖衬衫</a>  <a href="#"target="_blank">小脚牛仔裤</a>  <a href="#" target="_blank">开衫</a>  <a href="#" target="_blank">蕾丝/雪纺衫</a>  <a href="#"target="_blank">韩版外套</a>  <a href="#" target="_blank">小西装</a><a href="#" target="_blank">中长款裙</a></p><p><img src="dress02.png" /><strong class="active">上装</strong></p><hr/><p><a href="#" target="_blank">T桖</a>  <a href="#" target="_blank">衬衫</a>  <a href="#" target="_blank">针织衫</a><a href="#" target="_blank">长袖</a>T  <a href="#" target="_blank">韩版</a>  <a href="#" target="_blank">雪纺衬衫</a>  <a href="#" target="_blank">韩版衬衫</a>  <a href="#" target="_blank">防晒衣</a><a href="#" target="_blank">休闲套装</a>  <a href="#" target="_blank">卫衣</a>  <a href="#" target="_blank">背心/吊带</a></p><p><img src="dress03.png"/><strong class="active">裙子</strong></p><hr/><p><a href="#" target="_blank">连衣裙</a>  <a href="#" target="_blank">半身裙</a>  <a href="#"target="_blank">长裙</a><a href="#"target="_blank">短袖裙</a>  <a href="#" target="_blank">蕾丝连衣裙</a>  <a href="#" target="_blank">长袖裙</a>  <a href="#"target="_blank">无袖/背心裙</a>  <a href="#">A字裙</a>  <a href="#" target="_blank">牛仔裙</a>  <a href="#" target="_blank">半身中长裙</a>  <a href="#"target="_blank">半身短裙</a>  <a href="#" target="_blank">包臀裙</a></p><p><img src="dress04.png"/><strong class="active">裤子</strong></p><hr/><p><a href="#"target="_blank">裤子</a>  <a href="#"target="_blank">休闲裤</a>  <a href="#"target="_blank">牛仔裤</a><a href="#" target="_blank">打底裤</a>  <a href="#" target="_blank">长裤</a>  <a href="#" target="_blank">哈伦裤</a>  <a href="#" target="_blank">阔腿裤</a>  <a href="#" target="_blank">短裤/热裤</a><a href="#" target="_blank">连体裤</a>  <a href="#" target="_blank">七/九分裤</a>  <a href="#" target="_blank">牛仔短裤</a>  <a href="#" target="_blank">西装裤</a></p><p><img src="dress05.png"/><strong class="active">其他女装</strong></p><hr/><p><a href="#" target="_blank">胖M装</a>  <a href="#" target="_blank">中老年</a>  <a href="#" target="_blank">婚纱</a><a href="#" target="_blank">礼服</a>  <a href="#" target="_blank">旗袍</a>  <a href="#"target="_blank">夜店</a>  <a href="#" target="_blank">舞台装</a>  <a href="#"target="_blank">唐装</a>  <a href="#" target="_blank">职业装</a>  <a href="#" target="_blank">全球购</a>  <a href="#" target="_blank">羊绒衫</a>  <a href="#" target="_blank">毛衣</a>  <a href="#" target="_blank">呢大衣</a>  <a href="#" target="_blank">羽绒服</a>  <a href="#"target="_blank">真皮皮衣</a></p></ul>
</body>
</html>

HTML第5章：CSS3美化网页元素：课后作业相关推荐

  1. 第五章 CSS3美化网页元素

    1,制作北大青鸟课程介绍页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

  2. css3美化网页元素 第五章

    第一题:制作北大青鸟课程介绍页面. .A{width:620px;background-color:#f3f4df;background: linear-gradient(to bottom,#ece ...

  3. 第五章 CSS美化网页元素

    练习1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. HTML5 第五章CSS3美化网页课后作业

    制作北大青鸟课程介绍页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

  5. CSS 美化网页元素

    文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...

  6. 免费html5 css3大学生网页设计期末作业 网页制作作业成品

    html5 css3大学生网页设计期末作业 网页制作作业成品 布局技术:html5 css3 页面个数:6个 网页元素:图文 超链接 表单 效果图: 目录如下: <!DOCTYPE html&g ...

  7. CSAPP 第2章 信息表示和处理课后作业

    CSAPP 第二章信息表示和处理 课后作业 2.60 假设我们将一个 w 位的字中的字节从 0 (最低位) 到 w/8-1 (最高位) 编号.写出下面 C 函数的代码,它会返回一个无符号值, 其中参数 ...

  8. CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）

    为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...

  9. CSS美化网页元素大全

    < span>标签 作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性 属性 描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...

最新文章

  1. python空值填充_pandas | DataFrame基础运算以及空值填充
  2. 012 分析技能冷却二叉树
  3. C#获取二叉树深度及分层遍历二叉树
  4. [ZJOI2016]旅行者（网格图分治最短路）
  5. P5437-[XR-2]约定【拉格朗日差值,数学期望】
  6. spring—配置数据源
  7. 数据库过滤操作中 != 或者 指定操作数并不能改匹配到NULL值
  8. UI标签库专题六：JEECG智能开发平台 Autocomplete(自动补全标签 )
  9. 【python项目实战入门】Python绘制爱心
  10. Atitit 衡量项目的规模
  11. 钉钉自定义机器人提示报警信息
  12. 再谈 共轭方向法/Conjugate Direction Method In Optimization
  13. 情感分析学习笔记（5）——PolarityRank算法原理讲解
  14. 怎么调大计算机浏览器内字体,电脑浏览器怎么设置字体大小
  15. Keras实例教程(4)之迁移学习
  16. springboot集成Lean Cloud 及时通讯
  17. 计算机换系统之后无法打印,打印机win7系统正常打印，换成win10后打印机驱动消失无法打印？...
  18. 06 | 指令跳转：原来if...else就是goto
  19. 安卓 NFC 功能使用小结
  20. js效果 div跟随鼠标移动

热门文章

  1. 中国淀粉市场需求规模与十四五产量规划建议报告2022版
  2. 刘强东铁腕治军：高管24小时不回邮件，立刻开除！
  3. java网上书店视频教学_Java自学视频教程
  4. 鬼火(irrlicht)的复燃
  5. 软件测试复习与几道常见题型
  6. leetcode：2085. 统计出现过一次的公共字符串
  7. C语言三位数反序且if,2012年10月14日江苏省高校计算机等级考试二级C语言上机题(C02)及其解答_张柏雄...
  8. 中国残障人家庭伦理电影剧本《温暖新家》招募投资人
  9. 多功能超级计算机,联合Fermi与Bulldozer，Cray推出新世代超级计算机XK6
  10. 外部接口和内部接口的区别（*）