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>Helloh1>
<h1>welcome to Educoderh1>
body>
html>
第2关：创建 -
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<h1>创建不同字体大小的标题h1>
<h2>创建不同字体大小的标题h2>
<h3>创建不同字体大小的标题h3>
<h4>创建不同字体大小的标题h4>
<h5>创建不同字体大小的标题h5>
<h6>创建不同字体大小的标题h6>
body>
html>
第3关：创建 p 标签
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<p>我是一个段落p>
body>
html>
第4关：创建 a 标签
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<a href="https://www.educoder.net">Educoder平台a>
body>
html>
第5关：创建 img 标签
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
body>
html>
第6关：创建 div 标签
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<h2>我是h2标签h2>
<p>我是p标签p>
<div>我是div标签div>
body>
html>
第7关：添加注释（涉及那啥敏感话题就不放了）
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<h2>h2>
<p>
发扬光大。
p>
body>
html>
1.2HTML——基础
第1关：初识HTML：简单的Hello World网页制作
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello worldtitle>
head>
<body bgcolor="F6F3D6">
<h1 align="center">Hello Worldh1>
<p align="center">动手改变世界p>
body>
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="https://en.wikipedia.org/wiki/HTML"target="_blank">HTMLa>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS"target="_blank">CSSa>(Cascading Style Sheets，级联样式表单)和
<a href="https://en.wikipedia.org/wiki/JavaScript"target="_blank">JavaScripta>的帮助下，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:[email protected]">someone>E-Maila>。p>
<p><a href="#">回到顶部a>p>
body>
html>
第2关：HTML标题与段落：网络文章网页
DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 维基百科title>
head>
<body>
<h1>HTMLh1>
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
<a href="https://en.wikipedia.org/wiki/Markup_language" 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="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Leea>，
<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERNa>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIREa>系统。该系统的目的是为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="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866a>。dd>
<dt>1997年1月14日dt>
<dd>HTML 3.2以
<a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
<abbr title="World Wide Web Consortium">W3Cabbr>推荐标准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 guidei> (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.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">衣物th>
<td align="right">￥330.00td>
<td align="right">￥594.00td>
tr>
<tr>
<th align="left" scope="row">居住th>
<td align="right">￥2100td>
<td align="right">￥2100td>
tr>
<tr>
<th align="left" scope="row">生活用品及服务th>
<td align="right">￥700.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">医疗保健th>
<td align="right">￥150.00td>
<td align="right">￥50.00td>
tr>
<tr>
<th align="left" scope="row">教育、文化和娱乐th>
<td align="right">￥1030.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">交通和通信th>
<td align="right">￥230.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">其他用品和服务th>
<td align="right">￥130.40td>
<td align="right">￥150.00td>
tr>
tbody>
<tfoot>
<tr>
<th align="left" scope="row">总计th>
<th align="right">￥5911th>
<th align="right">￥6694th>
tr>
tfoot>
table>
body>
html>
1.4HTML——表格
第1关：表格的基本构成
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="5">
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
tr>
table>
body>
html>
第2关：表格的属性——宽、高
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="1" width="100%" height="200">
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
body>
html>
第3关：表格的属性——cellpadding
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="2" cellpadding="6">
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
body>
html>
第4关：表格的属性——cellspacing
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
body>
html>
第5关：表格的标题
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<caption>科目成绩caption>
<tr>
<td>姓名td>
<td>语文td>
<td>数学td>
<td>英语td>
<td>合计td>
tr>
<tr>
<td>李四td>
<td>90td>
<td>95td>
<td>80td>
<td>265td>
tr>
table>
body>
html>
第6关：表格—— 标签的 rowspan 属性
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="2" cellspacing="0" width="200">
<tr>
<td>商品td>
<td>数量td>
<td>单价td>
<td>备注td>
tr>
<tr>
<td>短袖td>
<td>70td>
<td>30td>
<td rowspan="2">无td>
tr>
<tr>
<td>裤子td>
<td>50td>
<td>30td>
tr>
table>
body>
html>
第7关：表格——标签的colspan属性
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<table border="2" cellspacing="0" width="200">
<tr>
<td>商品td>
<td>数量td>
<td>单价td>
tr>
<tr>
<td>短袖td>
<td>70td>
<td>30td>
tr>
<tr>
<td>裤子td>
<td>50td>
<td>30td>
tr>
<tr>
<td>合计td>
<td colspan="2">3600td>
tr>
table>
body>
html>
第8关：表格的综合案例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<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>8700td>
<td>0td>
<td>td>
tr>
<tr>
<td>内部转款td>
<td>6000td>
<td>0td>
<td>td>
tr>
<tr>
<td>收入合计td>
<td>14700td>
<td>0td>
<td>td>
tr>
<tr>
<td rowspan="3" >支出td>
<td>采购支出td>
<td>0td>
<td>5000td>
<td>td>
tr>
<tr>
<td>工资支出td>
<td>0td>
<td>7000td>
<td>td>
tr>
<tr>
<td>支出合计td>
<td>0td>
<td>12000td>
<td>td>
tr>
table>
body>
html>
1.5HTML——表单类的标签
第1关：表单元素——文本框
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<input type="text" name="nickName"/>
body>
html>
第2关：表单元素——密码框
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<input type="password" name="check" value="123"/>
body>
html>
第3关：表单元素——单选框
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
1. HTML是什么语言？(单选题)<br>
<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>
body>
html>
第4关：表单元素——多选框
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
休闲方式:<br>
<p><input type="checkbox" name="relax"/>逛街p>
<p><input type="checkbox" name="relax"/>看电影p>
<p><input type="checkbox" name="relax"/>宅p>
body>
html>
第5关：表单元素——checked属性
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
婚姻状况:<br>
<p><input type="radio" name="marry" checked />未婚p>
<p><input type="radio" name="marry" />已婚p>
body>
html>
第6关：表单元素——disabled 属性
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
难度系数:<br>
<p><input type="radio" name="degree"/>简单p>
<p><input type="radio" name="degree"/>中等p>
<p><input type="radio" name="degree" disabled="disabled"/>困难p>
body>
html>
第7关：表单元素——label 标签
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" />
body>
html>
第8关：表单元素——下拉列表
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
选择版块：
<select>
<option value="">问答option>
<option value="">分享option>
<option value="">招聘option>
<option value="" selected="selected">客户端测试option>
select>
body>
html>
第9关：表单元素——文本域
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
textarea {
width: 200px;
height: 120px;
}
style>
head>
<body>
用一句话描述自己的特点：<textarea maxlength="15">textarea>
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>
<input type="submit" value="submit"/>
body>
html>
第11关：表单元素的综合案例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
width: 40%;
margin: 20px auto;
}
.common{
width:230px;
height: 30px;
}
span{
display:inline-block;
width: 150px;
text-align: right;
}
div{
margin-bottom: 10px;
}
style>
head>
<body>
<form class="container">
<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>
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="https://www.educoder.net/api/attachments/196816" 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>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://www.educoder.net/api/attachments/198516" alt="轮播图1" />
div>
<div class="swiper-slide">
<img src="https://www.educoder.net/api/attachments/198517" 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="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
<p class="nav-title">儿童装饰画p>
<p>装饰p>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
<p class="nav-title">趣味素描p>
<p>sketchp>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
<p class="nav-title">漫画阅读p>
<p>comicp>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
<p class="nav-title">手工制作p>
<p>manualp>
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="https://www.educoder.net/attachments/download/198656" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
p>
div>
div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198657" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
p>
div>
div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198658" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<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="https://www.educoder.net/attachments/download/198656" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
p>
div>
div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198657" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
p>
div>
div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198658" alt="" />
div>
<div class="diary-details">
<p>如何选择培训机构 ？p>
<p>2017 06-15p>
<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>
<div class="clearfix">div>
<div id="nav" >
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198536" alt="cecorate" />
<p class="nav-title">儿童装饰画p>
<p>装饰p>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198538" alt="cecorate" />
<p class="nav-title">趣味素描p>
<p>sketchp>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198539" alt="cecorate" />
<p class="nav-title">漫画阅读p>
<p>comicp>
div>
div>
<div class="nav-item">
<div class="nav-info">
<img src="https://www.educoder.net/attachments/download/198537" alt="cecorate" />
<p class="nav-title">手工制作p>
<p>manualp>
div>
div>
div>
body>
html>