自学前端第十二天 :页面小练习

本文主要是介绍自学前端第十二天 :页面小练习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

小页面综合练习:(老师版)

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>homework 0612</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}a:hover {text-decoration: underline;}.fz12 {font-size: 12px;}.fz14 {font-size: 14px;}.c666 {color: #666;}.lh24 {line-height: 24px;}.lh36 {line-height: 36px;}.tl {text-align: left;}.tr {text-align: right;}.indent2x {text-indent: 2em;}.mr20 {margin-right: 20px;}.mr12 {margin-right: 12px;}.cb60 {color: #b60c0c;}.c045 {color: #0454a7;}/* .hit {font-size: 12px;color: #666;line-height: 36px;} */.container {width: 640px;margin: 100px auto;padding: 10px 20px 30px;border: 1px solid #bbb;border-top: 3px solid #0454a7;font-size: 14px;line-height: 24px;text-align: center;}.header {border-bottom: 1px solid #ccc;}.header>h2 {font-size: 22px;line-height: 35px;color: #333;font-weight: 400;}.inset-pic {width: 558px;}.content {text-align: left;padding: 0 20px;}.content>p {margin-bottom: 22px;}.inter-news {width: 560px;padding: 10px;margin: 0 auto 20px;border: 1px dashed #666;}.keywords>a {color: #0454a7;}.bottom {display: inline-block;width: 518px;height: 28px;border: 1px solid #0454a7;background-color: #dee2f3;}#wrap {width: 400px;height: 100px;border: 1px solid red;text-align: center;}#wrap>span {background-color: blue;}</style>
</head><body><div class='container'><div class="header"><h2>最美逆行 除夕夜青岛这名医生奔赴疫情一线</h2><p class='fz12 c666 lh36'><span class="mr20">2020年01月25日 01:00</span><a href="#" class="mr12 cb60">新浪新闻综合</a><spanclass="mr12">微博</span><a href="#" class="mr20 c666">我有话说(<span class="cb60">7,370</span>人参与)</a>收藏本文</p></div><img class="inset-pic" src="img/img.jpg" width="677" height="504" alt="最美逆行"><p class='fz12 c666 lh36'>最美逆行！除夕夜，青岛这名医生奔赴疫情一线，向她致敬！</p><div class="content"><P class="indent2x fz14 lh24">“你这傻孩子，医院那么多医生咋就非你去不可？好好在家过个年不行么！”面对父亲的“质问”，秦文只是笑笑没说话。作为一名青大附院院感科医生，她知道这场源发于武汉的疫情意味着什么，如果连医生都选择逃避，那只会让更多人的健康失去保护；但作为女儿，她也明白父亲的话并非真埋怨她傻，毕竟哪个做父母的愿意看见自己的孩子冒险？</P><div class="inter-news"><p><span class="c045">疫情新闻资讯：</span>#疫情#大年三十接到通知：武汉需要你。“其实疫情爆发的时候我就有心理准备，但是没想到会这么突然。</p><p class="tr fz12 c666">2020-01-30 12:54 来自UC浏览器 转发(349) | 收藏 | 评论(50)</p></div><P class="indent2x fz14 lh24">作为青大附院院感科的医生，秦文一直密切关注着这场疫情，而作为一名医疗工作者，她也明白自己的使命，“一旦情况需要，我可以马上去武汉！”。不同于其他科室，院感科的主要职责是保证医院及医护人员免受病毒感染，尤其是面对新型病毒，由于对病毒习性、耐药性等指标的不确定，预防工作就会显得极其重要。</p><P class="indent2x fz14 lh24">秦文说，这个问题家人们问过她很多遍，作为感染防护的专业人员，秦文曾经在国家卫生健康委医政医管局借调，主要就是负责感染防护类的工作。此次武汉爆发疫情，除了医疗类的各种物资，最缺的就是从事感染防护医护人员，看似是一道选择题，但是对于秦文来说，这道必答题的答案只有一个。</p><p class="keywords">文章关键词： <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a></p></div><p class="bottom"><a href="#">点击下载【新浪新闻客户端】，最新新闻资讯尽在掌握</a></p></div>
</body></html><!-- 1. 大多数内容文本的字体大小 行高 字体类型 fz22 fz14 fz12  lh242. 提取设计图上的 色系 主要 文本 装饰  #333 #666 #b60c0c #0454a7 #dee2f312 red 2412 blue 2414 red 3216 blue 24-->

在这里插入图片描述

小页面综合练习:(自写版)

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>homework 0612</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}a:hover {text-decoration: underline;}.fz12 {font-size: 12px;}.fz14 {font-size: 14px;}.c666 {color: #666;}.lh24 {line-height: 24px;}.lh36 {line-height: 36px;}.tl {text-align: left;}.tr {text-align: right;}.indent2x {text-indent: 2em;}.mr20 {margin-right: 20px;}.mr12 {margin-right: 12px;}.cb60 {color: #b60c0c;}.c045 {color: #0454a7;}/* .hit {font-size: 12px;color: #666;line-height: 36px;} */.container {width: 640px;margin: 100px auto;padding: 10px 20px 30px;border: 1px solid #bbb;border-top: 3px solid #0454a7;font-size: 14px;line-height: 24px; /* 内部每个盒子的距离也可能用行高,不用margin的 */text-align: center;}.header {border-bottom: 1px solid #ccc;}.header>h2 {font-size: 22px;line-height: 35px;color: #333;font-weight: 400;}.inset-pic {width: 558px;}.content {text-align: left;padding: 0 20px;}.content>p {margin-bottom: 22px;}.inter-news {width: 560px;padding: 10px;margin: 0 auto 20px;border: 1px dashed #666;}.keywords>a {color: #0454a7;}.bottom {display: inline-block;width: 518px;height: 28px;border: 1px solid #0454a7;background-color: #dee2f3;}</style>
</head><body><div class='container'><div class="header"><h2>最美逆行 除夕夜青岛这名医生奔赴疫情一线</h2><p class='fz12 c666 lh36'><span class="mr20">2020年01月25日 01:00</span><a href="#" class="mr12 cb60">新浪新闻综合</a><spanclass="mr12">微博</span><a href="#" class="mr20 c666">我有话说(<span class="cb60">7,370</span>人参与)</a>收藏本文</p></div><img class="inset-pic" src="img/img.jpg" width="677" height="504" alt="最美逆行"><p class='fz12 c666 lh36'>最美逆行！除夕夜，青岛这名医生奔赴疫情一线，向她致敬！</p><div class="content"><P class="indent2x fz14 lh24">“你这傻孩子，医院那么多医生咋就非你去不可？好好在家过个年不行么！”面对父亲的“质问”，秦文只是笑笑没说话。作为一名青大附院院感科医生，她知道这场源发于武汉的疫情意味着什么，如果连医生都选择逃避，那只会让更多人的健康失去保护；但作为女儿，她也明白父亲的话并非真埋怨她傻，毕竟哪个做父母的愿意看见自己的孩子冒险？</P><div class="inter-news"><p><span class="c045">疫情新闻资讯：</span>#疫情#大年三十接到通知：武汉需要你。“其实疫情爆发的时候我就有心理准备，但是没想到会这么突然。</p><p class="tr fz12 c666">2020-01-30 12:54 来自UC浏览器 转发(349) | 收藏 | 评论(50)</p></div><P class="indent2x fz14 lh24">作为青大附院院感科的医生，秦文一直密切关注着这场疫情，而作为一名医疗工作者，她也明白自己的使命，“一旦情况需要，我可以马上去武汉！”。不同于其他科室，院感科的主要职责是保证医院及医护人员免受病毒感染，尤其是面对新型病毒，由于对病毒习性、耐药性等指标的不确定，预防工作就会显得极其重要。</p><P class="indent2x fz14 lh24">秦文说，这个问题家人们问过她很多遍，作为感染防护的专业人员，秦文曾经在国家卫生健康委医政医管局借调，主要就是负责感染防护类的工作。此次武汉爆发疫情，除了医疗类的各种物资，最缺的就是从事感染防护医护人员，看似是一道选择题，但是对于秦文来说，这道必答题的答案只有一个。</p><p class="keywords">文章关键词： <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a></p></div><p class="bottom"><a href="#">点击下载【新浪新闻客户端】，最新新闻资讯尽在掌握</a></p></div>
</body></html><!-- 1. 大多数内容文本的字体大小 行高 字体类型 fz22 fz14 fz12  lh242. 提取设计图上的 色系 主要 文本 装饰  #333 #666 #b60c0c #0454a7 #dee2f312 red 2412 blue 2414 red 3216 blue 24-->