答案【实训脚本语言开发技术web（HTML)答案】"/>
Educoder答案【实训脚本语言开发技术web（HTML)答案】
文章目录
- 1.HTML
- 1.1HTML——基本标签
- 1.2HTML——基础
- 1.3HTML——文本
- 1.4HTML——表格
- 1.5HTML——表单类的标签
- 1.6html网页综合项目实战
1.HTML
1.1HTML——基本标签
第1关：创建第一个 HTML 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><h1>Hello</h1><!-- ********* Begin ********* --><h1>welcome to Educoder</h1><!-- ********* End ********* -->
</body>
</html>
第2关：创建 <h2>-<h6> 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><h1>创建不同字体大小的标题</h1><!-- ********* Begin ********* --><h2>创建不同字体大小的标题</h2> <h3>创建不同字体大小的标题</h3><h4>创建不同字体大小的标题</h4><h5>创建不同字体大小的标题</h5><h6>创建不同字体大小的标题</h6><!-- ********* End ********* -->
</body>
</html>
第3关：创建 p 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><p>我是一个段落</p><!-- ********* End ********* -->
</body>
</html>
第4关：创建 a 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><a href="">Educoder平台</a><!-- ********* End ********* -->
</body>
</html>
第5关：创建 img 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><img src="" alt="小狗走路"/<!-- ********* End ********* --></body>
</html>
第6关：创建 div 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><h2>我是h2标签</h2><p>我是p标签</p><!-- ********* Begin ********* --><div>我是div标签</div><!-- ********* End ********* -->
</body>
</html>
第7关：添加注释（涉及那啥敏感话题就不放了）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><h2></h2><!-- ********* Begin ********* --><!--<div>贺信。</div>--><!-- 一带一路 --><p>发扬光大。</p><!-- ********* End ********* -->
</body>
</html>
1.2HTML——基础
第1关：初识HTML：简单的Hello World网页制作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello world</title></head> <!--------- Begin--------><body bgcolor="F6F3D6"><!--用HTML语言向世界打声招呼吧！--><h1 align="center">Hello World</h1><p align="center">动手改变世界</p></body><!--------- End-------->
</html>
第2关：HTML结构：自我简介网页
<!DOCTYPE html>
<html><head><title>自我简介</title><meta charset="utf-8"><meta name="description" content="xxxx的x自我简介网站"><meta name="keywords" content="自我简介,关键词一,关键词二,关键词三"></head><body><h2>简介</h2><p>在这里简单的描述一下你自己吧。</p><h2>三个与你最有关的词</h2><p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p><ul><li>第一个词</li><p>选择第一个词的原因</p><li>第二个词</li><p>选择第二个词的原因</p><li>第三个词</li><p>选择第三个词的原因</p></ul>
</body>
</html>1.3HTML——文本
第1关：HTML链接：带超链接的网页
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML链接</title><meta name="description" content="HTML链接知识讲解"><meta name="keywords" content="HTML, Link">
</head>
<body><h1>HTML 入门</h1><h2>本页目录</h2><ul><li><a href="#toc1">简介</a></li><li><a href="#toc2">第1关</a></li><li><a href="#toc3">第2关</a></li></ul><h2 id="toc1">简介</h2><p><a href=""target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在<a href=""target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和<a href=""target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p><p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p><h2 id="toc2">第1关</h2><p>初识HTML：简单的Hello World网页</p><h2 id="toc3">第2关</h2><p>HTML链接：带超链接的网页</p><hr><p>若需帮助，请发送问题到<a href="mailto:someone@email">someone>E-Mail</a>。</p><p><a href="#">回到顶部</a></p>
</body>
</html>
第2关：HTML标题与段落：网络文章网页
<!DOCTYPE html>
<head><meta charset="UTF-8" /><title>HTML – 维基百科</title>
</head>
<body><h1>HTML</h1><p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的<a href="" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。</p><h2>历史</h2><h3>开发过程</h3><p>1980年，物理学家<a href="" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，<a href="" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based<strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。</p><h3>HTML里程碑</h3><dl><dt>1995年11月24日</dt><dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="" target="_blank">RFC 1866</a>。</dd><dt>1997年1月14日</dt><dd>HTML 3.2以<a href="" class="mw-redirect" title="W3C Recommendation" target="_blank"><abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd><dt>1997年12月18日</dt><dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd><dt>2014年10月28日</dt><dd>HTML5 发布。</dd><dt>2016年11月1日</dt><dd>HTML 5.1发布。</dd></dl><h2>参考文献</h2><ol><small><li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li><li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li><li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li></small></ol>
</body>
</html>第3关：HTML表格：日常消费账单表格展示网页
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML表格</title><meta name="description" content="HTML表格知识讲解"><meta name="keywords" content="HTML,表格, Table"><style type="text/css">table {border-collapse: collapse;}caption {font-weight: bold;margin-bottom: .5em;}th,td {padding: .5em .75em;border: 1px solid #000;}tfoot {font-weight: bold;}</style>
</head>
<body><table border="1" style="margin:auto" width="400"><caption>日常消费账单</caption><thead><!-- 表格头部 --><tr><th align="left" scope="col">消费项目</th><th align="right" scope="col">一月</th><th align="right" scope="col">二月</th></tr></thead><tbody><!-- 表格主体 --><tr><th align="left" scope="row">食品烟酒</th><td align="right">￥1241.00</td><td align="right">￥1250.00</td></tr><tr><th align="left" scope="row">衣物</th><td align="right">￥330.00</td><td align="right">￥594.00</td></tr><tr><th align="left" scope="row">居住</th><td align="right">￥2100</td><td align="right">￥2100</td></tr><tr><th align="left" scope="row">生活用品及服务</th><td align="right">￥700.00</td><td align="right">￥650.00</td></tr><tr><th align="left" scope="row">医疗保健</th><td align="right">￥150.00</td><td align="right">￥50.00</td></tr><tr><th align="left" scope="row">教育、文化和娱乐</th><td align="right">￥1030.00</td><td align="right">￥1250.00</td></tr><tr><th align="left" scope="row">交通和通信</th><td align="right">￥230.00</td><td align="right">￥650.00</td></tr><tr><th align="left" scope="row">其他用品和服务</th><td align="right">￥130.40</td><td align="right">￥150.00</td></tr></tbody><tfoot><!-- 表格尾部 --><tr><th align="left" scope="row">总计</th><th align="right">￥5911</th><th align="right">￥6694</th></tr></tfoot></table>
</body>
</html>1.4HTML——表格
第1关：表格的基本构成
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><table border="5"><tr><td>姓名</td><td>语文</td><td>数学</td></tr><tr><td>李四</td><td>90</td><td>95</td></tr></table><!-- ********* End ********* -->
</body>
</html>
第2关：表格的属性——宽、高
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><table border="1" width="100%" height="200"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr>
</table><!-- ********* End ********* -->
</body>
</html>
第3关：表格的属性——cellpadding
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><table border="2" cellpadding="6"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr>
</table><!-- ********* End ********* -->
</body>
</html>
第4关：表格的属性——cellspacing
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><table border="1" cellspacing="0" cellpadding="10"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr>
</table><!-- ********* End ********* -->
</body>
</html>
第5关：表格的标题
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="1" cellpadding="10" cellspacing="0"><!-- ********* Begin ********* --><caption>科目成绩</caption><!-- ********* End ********* --><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td><td>合计</td></tr><tr><td>李四</td><td>90</td><td>95</td><td>80</td><td>265</td></tr></table>
</body>
</html>
第6关：表格—— 标签的 rowspan 属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="2" cellspacing="0" width="200"><!-- ********* Begin ********* --><tr><td>商品</td><td>数量</td><td>单价</td><td>备注</td></tr><tr><td>短袖</td><td>70</td><td>30</td><td rowspan="2">无</td></tr><tr><td>裤子</td><td>50</td><td>30</td></tr><!-- ********* End ********* --></table>
</body>
</html>
第7关：表格——标签的colspan属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><table border="2" cellspacing="0" width="200"><!-- ********* Begin ********* --><tr><td>商品</td><td>数量</td><td>单价</td></tr><tr><td>短袖</td><td>70</td><td>30</td></tr><tr><td>裤子</td><td>50</td><td>30</td></tr><tr><td>合计</td> <td colspan="2">3600</td></tr><!-- ********* End ********* --></table>
</body>
</html>
第8关：表格的综合案例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><style>body{margin:30px;}table{/*居中对齐*/text-align:center; }</style><!--设置表格--><table border="2" cellspacing="0" cellpadding="6" width="100%"><caption>本周财政计划</caption><tr><td rowspan="2" colspan="2" >项目</td><td colspan="2">本周发生</td><td rowspan="2">备注</td></tr><tr><td>收入</td><td>支出</td></tr><tr><td rowspan="3" >收入</td><td>贷款收回</td><td>8700</td><td>0</td><td></td></tr><tr><td>内部转款</td><td>6000</td><td>0</td><td></td></tr><tr><td>收入合计</td><td>14700</td><td>0</td><td></td></tr><tr><td rowspan="3" >支出</td><td>采购支出</td><td>0</td><td>5000</td><td></td></tr><tr><td>工资支出</td><td>0</td><td>7000</td><td></td></tr><tr><td>支出合计</td><td>0</td><td>12000</td><td></td></tr></table><!-- ********* End ********* -->
</body>
</html>
1.5HTML——表单类的标签
第1关：表单元素——文本框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><input type="text" name="nickName"/><!-- ********* End ********* -->
</body>
</html>
第2关：表单元素——密码框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><input type="password" name="check" value="123"/><!-- ********* End ********* -->
</body>
</html>
第3关：表单元素——单选框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>1. HTML是什么语言？(单选题)<br><!-- ********* Begin ********* --><p><input type="radio" name="question"/>A：高级文本语言</p><p><input type="radio" name="question"/>B：超文本标记语言</p><p><input type="radio" name="question"/>C：扩展标记语言</p> <p><input type="radio" name="question"/>D：图形化标记语言</p><!-- ********* End ********* -->
</body>
</html>
第4关：表单元素——多选框
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>休闲方式:<br><!-- ********* Begin ********* --><p><input type="checkbox" name="relax"/>逛街</p><p><input type="checkbox" name="relax"/>看电影</p> <p><input type="checkbox" name="relax"/>宅</p> <!-- ********* End ********* -->
</body>
</html>
第5关：表单元素——checked属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>婚姻状况:<br><!-- ********* Begin ********* --><p><input type="radio" name="marry" checked />未婚</p><p><input type="radio" name="marry" />已婚</p><!-- ********* End ********* -->
</body>
</html>
第6关：表单元素——disabled 属性
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>难度系数:<br><!-- ********* Begin ********* --><p><input type="radio" name="degree"/>简单</p><p><input type="radio" name="degree"/>中等</p><p><input type="radio" name="degree" disabled="disabled"/>困难</p><!-- ********* End ********* -->
</body>
</html>
第7关：表单元素——label 标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><!-- ********* Begin ********* --><label for="user">用户：</label> <input type="text" id="user" name="user" /> <br><label for="pwd">密码：</label><input type="password" id="pwd" name="password" /><!-- ********* End ********* -->
</body>
</html>
第8关：表单元素——下拉列表
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>选择版块：<!-- ********* Begin ********* --><select><option value="">问答</option><option value="">分享</option><option value="">招聘</option><option value="" selected="selected">客户端测试</option></select><!-- ********* End ********* -->
</body>
</html>
第9关：表单元素——文本域
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- ********* Begin ********* --><style>textarea {width: 200px;height: 120px;}</style>
</head>
<body>用一句话描述自己的特点：<textarea maxlength="15"></textarea><!-- ********* End ********* -->
</body>
</html>
第10关：表单元素——提交按钮
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><label for="user">用户：</label><input type="text" id="user" name="user"/><br><label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br><!-- ********* Begin ********* --><input type="submit" value="submit"/><!-- ********* End ********* -->
</body>
</html>
第11关：表单元素的综合案例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>.container{width: 40%;margin: 20px auto;}mon{width:230px;height: 30px;}span{display:inline-block;width: 150px;text-align: right;}div{margin-bottom: 10px;}</style>
</head>
<body><form class="container"><!-- ********* Begin ********* --><div><span>用户名：</span><input type="text" class="common"/></div><div><span>昵称：</span><input type="text" class="common"/></div><div><span>性别：</span><label for="male" name="sex"><input type="radio" id="male" />男</label><label for="female"><input type="radio" id="female" name="sex"/>女</label><label for="other"><input type="radio" id="other" name="sex" disabled="disabled" />保密</label></div><div><span>教育程度：</span><select class="common"/><option class="common" value="">高中</option><option class="common" value="">中专</option><option class="common" value="">大专</option> <option class="common" value="" selected="selected">本科</option><option class="common" value="">硕士</option><option class="common" value="">博士</option><option class="common" value="">其他</option></select></div><div><span>婚姻状况：</span><label for="single"><input type="radio" id="single" name="state" checked="checked"/>未婚</label><label for="married"><input type="radio" id="married" name="state"/>已婚</label><label for="secret"><input type="radio" id="secret" name="state" />保密</label></div><div><span>兴趣爱好：</span><label for="football"><input type="checkbox" id="football" name="hobby" />踢足球</label><label for="basketball"><input type="checkbox" id="basketball" name="hobby"/>打篮球</label><label for="film"><input type="checkbox" id="film" name="hobby" checked="checked" />看电影</label></div><div> <span>描述自己的特点：</span><textarea class="common" maxlength="20"></textarea></div><div><span></span><input type="submit" class="common" value="提交"/></div><!-- ********* End ********* -->
</form>
</body>
</html>
1.6html网页综合项目实战
第1关：header——头部
<!DOCTYPE html>
<html><head><meta charset="utf-8" \><title>少儿教育</title><style type="text/css">* {margin: 0;padding: 0;}ul,li{list-style: none;}a{color: #888888;text-decoration: none;font-size: 16px;}body {background: #fff;position: relative;}#top{width: 80%;margin: 0 auto;}.bg-header {border-bottom: 1px solid #eee;}/********* Begin **********/#top .logo {width: 120px;height: 50px;margin-top: 11px;/*向左浮动*/float: left;}#top .head-list {/*向右浮动*/float: right;}#top .head-list li {padding: 0 20px;/*垂直居中，高度为74px*/line-height: 74px;/*向左浮动*/float: left;}/********* End *********/#top .head-list li a:hover {color: #333;text-decoration: underline;}</style></head><body><header class="bg-top"><div id="top" class="clearfix"><img src="" alt="logo" class="logo" /><ul class="head-list"><li><a href="javascript:void;">首页</a></li><li><a href="javascript:void;">班级设置</a></li><li><a href="javascript:void;">师资团队</a></li><li><a href="javascript:void;">童画日记</a></li><li><a href="javascript:void;">关于我们</a></li><li><a href="javascript:void;">联系我们</a></li></ul></div></header></body></html>
第2关：用Swiper实现轮播图
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><link rel="stylesheet" href="step2/swiper.min.css" /><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888;text-decoration: none;font-size: 16px;}body {background: #fff;position: relative;}.swiper-container {width: 100%;height: 280px;margin-left: auto;margin-right: auto;overflow: hidden;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {width: 100%;height: 100%;}</style></head><body><!-------- Begin ---------><!-- swiper最大的容器类--><div class="swiper-container"><!-- 图片容器类--><div class="swiper-wrapper"><!--------- End ----------><div class="swiper-slide"><img src="" alt="轮播图1" /></div><div class="swiper-slide"><img src="" alt="轮播图2" /></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev swiper-button-white"></div><div class="swiper-button-next swiper-button-white"></div></div><script src="step2/swiper.min.js"></script><script type="text/javascript">var swiper = new Swiper('.swiper-container', {direction: 'horizontal',//------------- Begin ------------//开启loop模式，设置图片为循环播放loop: true;//自动切换的时间为1.5秒autoplay: 1500;//-------------- End ------------speed: 1000,pagination: '.swiper-pagination',nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',autoplayDisableOnInteraction: false,});</script></body></html>
第3关：用CSS3实现移动效果
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888888;text-decoration: none;font-size: 16px;}body {background: #f7f7f7;position: relative;}#nav {width: 100%;margin: 0 auto;padding: 40px 0;}#nav .nav-item {width: 21%;height: auto;text-align: center;color: #ff7415;padding-top: 10px;float: left;transition: all .3s ease-in;-moz-transition: all .3s ease-in;-webkit-transition: all .3s ease-in;}#nav .nav-item:not(:last-child) {margin-right: 28px;}#nav .nav-item:hover {border: 1px solid #FF7415;}/*---------- Begin -----------*/#nav .nav-item:hover .nav-info {/*向上移动10px*/transform:translate(0,-10px); }#nav .nav-item .nav-info {/*给所有属性添加0.3s的 平滑过滤效果(linear),不考虑兼容性*/transition: all 0.3s linear;}/*------------ End --------------*/#nav .nav-item img {width: 64px;height: 64px;margin: 20px auto;}#nav .nav-item .nav-title {font-size: 22px;margin-bottom: 12px;}</style></head><body><div id="nav"><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">儿童装饰画</p><p>装饰</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">趣味素描</p><p>sketch</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">漫画阅读</p><p>comic</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">手工制作</p><p>manual</p></div></div></div></body></html>
第4关：用CSS3实现放大效果
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888888;text-decoration: none;font-size: 16px;}body {background: #f7f7f7;position: relative;}.diary-block {width: 90%;height: 360px;margin:40px auto;padding: 0px 40px;}.diary-item {width: 26%;float: left;border: 1px solid #ccc;}.diary-item:not(:last-child) {margin-right: 7%;}.diary-item .diary-img {overflow: hidden;}/*----------- Begin ---------*/.diary-item .diary-img img {width: 100%;height: 200px;transition: all 0.3s linear;/*给img所有属性添加0.3s的平滑过渡效果(linear)*/}.diary-item .diary-img img:hover {/*缩放中心为center*/transform:scale(1.1,1.1);transform-origin: center center; /*放大倍数为1.1倍;*/}/*--------- End ----------*/.diary-item .diary-details {height: 150px;padding: 10px 30px;color: #888;}.diary-item .diary-details p {line-height: 26px;}.diary-item .diary-details .diary-describe {height: 72px;overflow: hidden;}</style></head><body><div class="diary-block"><div class="diary-item clearfix"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div><div class="diary-item"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div><div class="diary-item"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div></div></body></html>
第5关：完成一个版块
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888888;text-decoration: none;font-size: 16px;}body {background: #f7f7f7;position: relative;}.diary-block {width: 90%;height: 450px;padding: 0 40px;margin: 40px auto;}.diary-item {width: 26%;float: left;overflow: hidden;/*---------- Begin ----------*//*设置圆角为20px*/border-radius: 20px;/*设置左边,右边,下边的外部阴影,水平阴影和垂直阴影的值为10px,模糊距离为20px,颜色为#ccc */box-shadow: 10px 10px 20px #ccc,-10px 10px 20px #ccc;}/*---------- End ----------*/.diary-item:not(:last-child) {margin-right: 7%;}.diary-item .diary-img {overflow: hidden;}.diary-item .diary-img img {width: 100%;height: 232px;transition: all .3s ease-in;}.diary-item .diary-img img:hover {transform-origin: center;transform: scale(1.1);}.diary-item .diary-details {height: 180px;padding: 10px 30px;color: #888;}.diary-item .diary-details p {line-height: 26px;}.diary-item .diary-details .diary-describe {height: 72px;/*-------- Begin --------*//*自动隐藏文字*/overflow: hidden;/*文字隐藏后添加省略号*/text-overflow: ellipsis;/*-------- End ----------*/display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-top: 10px;line-height: 24px;}</style></head><body><div class="diary-block"><div class="diary-item clearfix"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div><div class="diary-item"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div><div class="diary-item"><div class="diary-img"><img src="" alt="" /></div><div class="diary-details"><p>如何选择培训机构 ？</p><p>2017 06-15</p><p class="diary-describe">起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p></div></div></div></body></html>
第6关：清除浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>少儿教育</title><style type="text/css">* {margin: 0;padding: 0;}ul,li {list-style: none;}a {color: #888888;text-decoration: none;font-size: 16px;}body {background: #fff;position: relative;}/*------------ Begin ------------*/.clearfix:after{/*设置伪类内容为空；高度为0 */content: "";height: 0;/*设置它为一个不可见的块级元素；*/display: block;visibility: hidden;/*清除两边的浮动*/clear: both;}.clearfix{zoom: 1;}/*------------- End -------------*/#nav {width: 100%;margin: 0 auto;padding: 40px 0;background: #333;}#nav .nav-item {width: 21%;height: auto;text-align: center;color: #ff7415;padding-top: 10px;float: left;transition: all .3s ease-in;-moz-transition: all .3s ease-in;-webkit-transition: all .3s ease-in;}#nav .nav-item:not(:last-child) {margin-right: 28px;}#nav .nav-item img {width: 64px;height: 64px;margin: 20px auto;}#nav .nav-item .nav-title {font-size: 22px;margin-bottom: 12px;}</style></head><body><!-------------- Begin --------------><!--添加清除浮动的类--><div class="clearfix"></div><div id="nav" ><!-------------- End --------------><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">儿童装饰画</p><p>装饰</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">趣味素描</p><p>sketch</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">漫画阅读</p><p>comic</p></div></div><div class="nav-item"><div class="nav-info"><img src="" alt="cecorate" /><p class="nav-title">手工制作</p><p>manual</p></div></div></div></body></html>
更多推荐
Educoder答案【实训脚本语言开发技术web（HTML)答案】
发布评论