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:someone@email.com">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>

你可能感兴趣的