头歌网页设计与制作实训答案

我这里已经看不见原题目了，只粘贴了有Begin和End部分的代码，如果题目符合但答案不符合的的，欢迎在评论区找我。如果有帮助，请赞一个。注意看目录里有没有你需要的。

一、HTML——基础

1.初识HTML: 简单的Hello World网页制作

2.HTML结构: 自我简介网页

二、HTML——文本

1.HTML链接: 带超链接的网页

2.HTML标题与段落: 网络文章网页

3.HTML表格: 日常消费账单表格展示

三、HTML——多媒体

1.HTML图片: 带图片的菜谱网页

2.HTML音频: 音乐播放网页

3.HTML视频: 视频播放网页

四、CSS从入门到精通——基础知识

1.初识CSS: 丰富多彩的网页样式

2.CSS样式引入方式

五、CSS从入门到精通——基础选择器

1.CSS元素选择器

2.CSS类选择器

3.CSSid选择器

六、CSS从入门到精通——背景样式

1.背景颜色

2.背景图片

3.背景定位与背景关联

七、CSS入门到精通——表格样式

1.表格边框

2.表格颜色、文字与大小

八、CSS从入门到精通——盒模型

1.透视盒模型: 居中的的盒子页面

2.确定盒模型元素大小

一、HTML——基础

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>
    <!--------- Begin-------->
 
  <head>
    <meta charset="utf-8">
    <title>自我简介</title> 
    <meta name="description" content="XXX的自我简介网站">
    <meta name="keywords" content="自我简介,1,2,3">
  </head>
  <body>
    <h1 align="center">自我简介</h1>
 
    <h2>简介</h2>
    <p>我是一个大数据专业的学生</p>
 
    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
        <li>1</li>
        <p>2</p>
        <li>1</li>
        <p>2</p>
        <li>1/li>
        <p>2</p>
    </ul>
</body>
  <!--------- End-------->
 
</html>复制

二、HTML——文本

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>
  <!--------- Begin-------->
 
<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">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" 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.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
  <!--------- End-------->
 
</html>复制

2.HTML标题与段落: 网络文章网页

 <!DOCTYPE html>
 
<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->
 
<body>
    <h1>HTML</h1>
    <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-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" 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="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</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">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.&#160;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>
  <!--------- End-------->
 
</html>复制

3.HTML表格: 日常消费账单表格展示

 <!DOCTYPE html>
<html>
  <!--------- Begin-------->
 
<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 scope="col">
            <!-- 表格头部 -->
            <tr>
                <th align="left">消费项目</th>
                <th align="right">一月</th>
                <th align="right">二月</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>
                <td align="right">￥5911</td>
                <td align="right">￥6694</td>
            </tr>
            </tfoot>
                
    </table>
</body>
  <!--------- End-------->
 
</html>复制

三、HTML——多媒体

1.HTML图片: 带图片的菜谱网页

 <!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML - 图片</title>
</head>
<body>
    <h1>带图片的菜谱——酸辣藕带</h1>
    <h2>食材：</h2>
    <p>蒜头3瓣、姜一小块、葱2根、藕带250g、红辣椒3个、花椒1大勺、米醋1大勺、盐适量、糖一小撮、香油一小勺。</p>
    <img src="https://www.educoder.net/attachments/download/171680/1.jpg" alt="食材准备" width="400">
    <h2>步骤：</h2>
    <ol>
        <li>蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171681/3.gif" alt="步骤1" width="200"></li>
        <li>藕带斜切成段
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171682/4.jpg" alt="步骤2" width="200"></li>
        <li>起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171683/5.jpg" alt="步骤3" width="200"></li>
        <li>放糖提鲜，撒香油和葱花，翻匀出锅
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171684/8.gif" alt="步骤4" width="200"></li>
        <li>完成。
            <br><br>
    </ol>
    <hr>
    <small><p>转自<a href="https://www.xiachufang.com/recipe/102430733/">下厨房-酸辣藕带</a></p></small>
    </p>
</body>
</html>复制

2.HTML音频: 音乐播放网页

 <!DOCTYPE html>
 
<head>
    <meta charset="UTF-8" />
    <title>HTML - 音频</title>
</head>
 
<body>
    <audio controls="controls" autoplay= "autoplay" loop="loop">
    <h1 align="center">青石巷</h1>
    <br>
    <div align="center">
    <audio controls="controls" height="100" width="100">
        <source src="https://www.educoder.net/attachments/download/171686/青石巷.wav" type="audio/wav"/>
        <source src="https://www.educoder.net/attachments/download/171685/青石巷.ogg" type="audio/ogg"/>
        <source src="https://www.educoder.net/attachments/download/171679/青石巷.mp3" type="audio/mp3"/>
        <embed height="100" width="100" src="song.mp3" />
        你的浏览器不支持该音频格式。 Your browser does not support this audio format.
    </audio>
    </div>
    <br>
    <p align="center" style="color:grey;">HTML5 audio 播放示例</p>
    <p align="center" style="color:grey;"><small>注意：音频控件显示效果在不同浏览器中有些许差别。</small></p>
</body>复制

3.HTML视频: 视频播放网页

 <!DOCTYPE html>
 
<head>
    <meta charset="UTF-8" />
    <title>HTML - 视频</title>
</head>
 
<body>    
    <h1 align="center">扬帆起航</h1>
    <video width="550" control="control">
        <source src="./video/Sail-Away.mp4" type="video/mp4" />
        <source src="./video/Sail-Away.ogv" type="video/ogv" />
        <source src="./video/Sail-Away.webm" type="video/webm" />
        <object data="./video/Sail-Away.mp4" width="320" height="240">
        <embed src="./video/Sail-Away.swf" width="320" height="240" />
            你的浏览器不支持该视频格式。Your browser does not support this video format.
        </object>
    </video>
    <br>
    <p align="center" style="color:grey;">HTML5 video 播放示例</p>
    <p align="center" style="color:grey;"><small>注意：视频控件显示效果在不同浏览器中有些许差别。</small></p>
</div>
</body>复制

四、CSS从入门到精通——基础知识

1.初识CSS: 丰富多彩的网页样式

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
      body {
        text-align: center;
      }
 
      h1 {
        /* ********** BEGIN ********** */
        text-align: center;
        font-size:40px;
 
        
        /************ END ********** */
        color: #62A8CB;
      }
 
      img {
        height: 250px;
      }
 
      p {
        /* ********** BEGIN ********** */
        color:grey;
        font-size:18px;
 
 
        /* ********** END ********** */
      }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
    <img src="https://www.educoder.net/attachments/download/189467">
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
  </body>
</html>复制

2.CSS样式引入方式

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>O Captain! My Captain!</title>
     <!-- ********** BEGIN ********** -->
        
    <link rel="stylesheet" href="step2/CSS/style.css">
 
     <!-- ********** END ********** -->
 
    <style type="text/css">
      h1 {
        color:cornflowerblue;
      }
 
      img {
        float: left;
        margin-right: 1em;
      }
 
      p {
        font-weight:bold;
      }
    </style>
</head>
 
<body>
    <div>
        <!-- ********** BEGIN ********** -->
        
        <h1 >O Captain! My Captain!</h1>
 
        <!-- ********** END ********** -->
            
        <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
        <p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
    
        <!-- ********** BEGIN ********** -->
    
        <p><small font-size="10px" color="lightslategray">&copy; Walt Whitman</small></p>
            
        <!-- ********** END ********** -->
    </div>
</body>
 
</html>复制

五、CSS从入门到精通——基础选择器

1.CSS元素选择器

 <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素选择器</title>
  <style type="text/css">
    /* ********** BEGIN ********** */
    /* 元素选择器 */
    html {
      background-color:#F0F0F0;
    }
 
    header {
      padding:40px;
      background-color:white;
    }
 
 
    footer {
      margin-top: 20px;
      font-size:0.6em;
      color:grey;
    }
 
    /* ********** END ********** */
  </style>
</head>
<body>
 
<div>
 
  <header>
    <li><a href="#chosen">精选</a></li>
    <li><a href="#news">时事</a></li>
    <li><a href="#finance">财政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>
 
  <div>
    <section>
      <h2>精选</h2>
      <li>精选新闻1</li>
      <li>精选新闻2</li>
      <li>精选新闻3</li>
    </section>
    <section>
      <h2>时事</h2>
      <li>时事新闻1</li>
      <li>时事新闻2</li>
      <li>时事新闻3</li>
    </section>
    <section>
      <h2>财政</h2>
      <li>财政新闻1</li>
      <li>财政新闻2</li>
      <li>财政新闻3</li>
    </section>
    <section>
      <h2>思想</h2>
      <li>思想新闻1</li>
      <li>思想新闻2</li>
      <li>思想新闻3</li>
    </section>
    <section>
      <h2>生活</h2>
      <li>生活新闻1</li>
      <li>生活新闻2</li>
      <li>生活新闻3</li>
    </section>
  </div>
 
  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
 
</div>
 
</body>
</html>复制

2.CSS类选择器

 <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>类选择器</title>
  <style type="text/css">
    /* 元素选择器 */
    html {
      background-color: #F0F0F0;
    }
    header {
      padding: 40px;
      background-color: white;
    }
    footer {
      margin-top: 20px;
      font-size: 0.6em;
      color: grey;
    }
    /* 类选择器 */
    .main {
      margin: 10px;
    }
	/* ********** BEGIN ********** */
  .newsSection {
    margin-top: 20px;
    padding: 20px;
    background-color: white;
  }
 
 
    /* ********** END ********** */
  </style>
</head>
<body>
<div class="main">
  <header>
    <li><a href="#chosen">精选</a></li>
    <li><a href="#news">时事</a></li>
    <li><a href="#finance">财政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>
  <!-- ********** BEGIN ********** -->
  <div class="newsSection">
  <!-- ********** END ********** -->      
    <section>
      <h2>精选</h2>
      <li>精选新闻1</li>
      <li>精选新闻2</li>
      <li>精选新闻3</li>
    </section>
    <section>
      <h2>时事</h2>
      <li>时事新闻1</li>
      <li>时事新闻2</li>
      <li>时事新闻3</li>
    </section>
    <section>
      <h2>财政</h2>
      <li>财政新闻1</li>
      <li>财政新闻2</li>
      <li>财政新闻3</li>
    </section>
    <section>
      <h2>思想</h2>
      <li>思想新闻1</li>
      <li>思想新闻2</li>
      <li>思想新闻3</li>
    </section>
    <section>
      <h2>生活</h2>
      <li>生活新闻1</li>
      <li>生活新闻2</li>
      <li>生活新闻3</li>
    </section>
  </div>
  
  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
 
</body>
</html>复制

3.CSSid选择器

 <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ID选择器</title>
  <style type="text/css">
    /* 元素选择器 */
    html {
      background-color: #F0F0F0;
    }
    header {
      padding: 40px;
      background-color: white;
    }
    footer {
      margin-top: 20px;
      font-size: 0.6em;
      color: grey;
    }
 
    /* 类选择器 */
    .main {
      margin: 10px;
    }
    .newsSection {
      margin-top: 20px;
      padding: 20px;
      background-color: white;
    }
    /* ********** BEIGN ********** */
    #chosen {
      color:red;
    }
    #news {
      color:blue;
    }
    #finance {
      color:olive;
    }
    #think {
      color:green;
    }
    #life {
      color:orange;
    }
 
    /*选择menu元素下的li子元素*/
    #menu li {
      float: left;
      width: 70px;
      font-size: 1.2em;
      font-weight: lighter;
    }
    /*选择menu元素下的li子元素和li下得a子元素*/
    #menu li, li a {
      list-style: none;
      text-decoration: none;
    }
    /* ********** END ********** */
  </style>
</head>
<body>
<div class="main">
  <!-- ********** BEGIN ********** -->
  <header id="menu">
  <!-- ********** END ********** -->
    <li><a href="#chosen">精选</a></li>
    <li><a href="#news">时事</a></li>
    <li><a href="#finance">财政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>
 
  <div class="newsSection">
    <section>
      <h2 id="chosen">精选</h2>
      <li>精选新闻1</li>
      <li>精选新闻2</li>
      <li>精选新闻3</li>
    </section>
    <section>
      <h2 id="news">时事</h2>
      <li>时事新闻1</li>
      <li>时事新闻2</li>
      <li>时事新闻3</li>
    </section>
    <section>
      <h2 id="finance">财政</h2>
      <li>财政新闻1</li>
      <li>财政新闻2</li>
      <li>财政新闻3</li>
    </section>
    <section>
      <h2 id="think">思想</h2>
      <li>思想新闻1</li>
      <li>思想新闻2</li>
      <li>思想新闻3</li>
    </section>
    <section>
      <h2 id="life">生活</h2>
      <li>生活新闻1</li>
      <li>生活新闻2</li>
      <li>生活新闻3</li>
    </section>
  </div>
  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
 
</body>
</html>复制

六、CSS从入门到精通——背景样式

1.背景颜色

 /* ********** BEGIN ********** */
              body {
            background-color:ivory;
        }   
 
 
/* ********** END ********** */
 
h1 {
    font-size: 40px;
    text-align: center;
}
 
p {
    font-size: 18px;
    color: grey;
    /* ********** BEGIN ********** */
    background-color:lightblue;
    /* ********** END ********** */
}复制

2.背景图片

 body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/
    background-image: url(https://www.educoder.net/attachments/download/211106);
 
    /* ********** END ********** */
}
 
div {
    width: 90%;
    height: 100%;
    margin: auto;
}复制

3.背景定位与背景关联

 body {
     margin-right: 200px;
     /* ********** BEGIN ********** */
     /*设置背景图片*/
     background: url(https://www.educoder.net/attachments/download/211104) no-repeat fixed right top;;
     /* ********** END ********** */
 }
 
div {
     width: 90%;
     height: 100%;
     margin: auto;
 }复制

七、CSS入门到精通——表格样式

1.表格边框

 table {
    /* ********** BEGIN ********** */
    border-collapse: collapse;
    border: 2px solid black;
    
    /* ********** END ********** */
}
 
th,
td {
    padding: .5em .75em;
}
 
th {
    /* ********** BEGIN ********** */
    border: 1px solid grey;
    /* ********** END ********** */
}
 
td {
    /* ********** BEGIN ********** */
    border: 1px dotted grey;
    /* ********** END ********** */
}复制

2.表格颜色、文字与大小

 table {
    border-collapse: collapse;
    border: 2px solid black;
}
 
caption {
    /* ********** BEGIN ********** */
 
font-size: 20px;
height: 40px;
 font-weight: bold;
 
 
    /* ********** END ********** */
}
 
th,
td {
    /* ********** BEGIN ********** */
    
    height: 50px;
    width: 100px;
    text-align: center;
    
    /* ********** END ********** */
}
 
th {
    /* ********** BEGIN ********** */
    border: 1px solid white;
    background-color: lightseagreen;
    color: white;
 
    /* ********** END ********** */
}
 
td {
    border: 1px solid grey;
}复制

八、CSS从入门到精通——盒模型

1.透视盒模型: 居中的的盒子页面

 * {
    margin: 0;
    padding: 0;
}
 
body {
    /* ********** BEGIN ***********/
    padding: 20px;
    /* ********** END *************/
    border: 10px solid lightsalmon;
}
 
h1 {
    text-align: center;
}
 
#box2 {
    /* ********** BEGIN ***********/
    width: 350px;
    padding: 25px;
    border: 20px solid yellowgreen;
    margin-bottom: 10px;
    /* ********** END *************/
}复制

2.确定盒模型元素大小

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒模型——确定元素大小</title>
    <style type="text/css">
        .content-box { 
            width: 160px;
            height: 80px;
            padding: 20px;
            border: 8px solid red;
            background: yellow;
            box-sizing: content-box; 
             /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
             Total height: 80px + (2 * 20px) + (2 * 8px) = 216px*/
             content-box width: 160px
             content-box height: 80px
        }
        .border-box { 
            /***************** BEGIN *****************/
            width: 216px;
            height: 136px;
            padding: 20px;
            border: 8px solid red;
            background: yellow;
            box-sizing: content-box; 
            /***************** END *****************/
            padding: 20px;
            border: 8px solid red;
            background: yellow;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="content-box">Content box</div>
    <br>
    <div class="border-box">Border box</div>
</body>
</html>复制

	<!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>

	<!DOCTYPE html>

	<head>
	<meta charset="UTF-8" />
	<title>HTML – 维基百科</title>
	</head>
	<!--------- Begin-------->

	<body>
	<h1>HTML</h1>
	<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-Lee</a>，
	<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" 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="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</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">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>
	<!--------- End-------->

	</html>

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>元素选择器</title>
	<style type="text/css">
	/* ******** BEGIN ******** */
	/* 元素选择器 */
	html {
	background-color:#F0F0F0;
	}

	header {
	padding:40px;
	background-color:white;
	}


	footer {
	margin-top: 20px;
	font-size:0.6em;
	color:grey;
	}

	/* ******** END ******** */
	</style>
	</head>
	<body>

	<div>

	<header>
	<li><a href="#chosen">精选</a></li>
	<li><a href="#news">时事</a></li>
	<li><a href="#finance">财政</a></li>
	<li><a href="#think">思想</a></li>
	<li><a href="#life">生活</a></li>
	</header>

	<div>
	<section>
	<h2>精选</h2>
	<li>精选新闻1</li>
	<li>精选新闻2</li>
	<li>精选新闻3</li>
	</section>
	<section>
	<h2>时事</h2>
	<li>时事新闻1</li>
	<li>时事新闻2</li>
	<li>时事新闻3</li>
	</section>
	<section>
	<h2>财政</h2>
	<li>财政新闻1</li>
	<li>财政新闻2</li>
	<li>财政新闻3</li>
	</section>
	<section>
	<h2>思想</h2>
	<li>思想新闻1</li>
	<li>思想新闻2</li>
	<li>思想新闻3</li>
	</section>
	<section>
	<h2>生活</h2>
	<li>生活新闻1</li>
	<li>生活新闻2</li>
	<li>生活新闻3</li>
	</section>
	</div>

	<footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>

	</div>

	</body>
	</html>

	/* ******** BEGIN ******** */
	body {
	background-color:ivory;
	}


	/* ******** END ******** */

	h1 {
	font-size: 40px;
	text-align: center;
	}

	p {
	font-size: 18px;
	color: grey;
	/* ******** BEGIN ******** */
	background-color:lightblue;
	/* ******** END ******** */
	}

	body {
	/* ******** BEGIN ******** */
	/设置背景图片/
	background-image: url(https://www.educoder.net/attachments/download/211106);

	/* ******** END ******** */
	}

	div {
	width: 90%;
	height: 100%;
	margin: auto;
	}

	body {
	margin-right: 200px;
	/* ******** BEGIN ******** */
	/设置背景图片/
	background: url(https://www.educoder.net/attachments/download/211104) no-repeat fixed right top;;
	/* ******** END ******** */
	}

	div {
	width: 90%;
	height: 100%;
	margin: auto;
	}

	table {
	/* ******** BEGIN ******** */
	border-collapse: collapse;
	border: 2px solid black;

	/* ******** END ******** */
	}

	th,
	td {
	padding: .5em .75em;
	}

	th {
	/* ******** BEGIN ******** */
	border: 1px solid grey;
	/* ******** END ******** */
	}

	td {
	/* ******** BEGIN ******** */
	border: 1px dotted grey;
	/* ******** END ******** */
	}

	* {
	margin: 0;
	padding: 0;
	}

	body {
	/* ******** BEGIN *********/
	padding: 20px;
	/* ******** END ***********/
	border: 10px solid lightsalmon;
	}

	h1 {
	text-align: center;
	}

	#box2 {
	/* ******** BEGIN *********/
	width: 350px;
	padding: 25px;
	border: 20px solid yellowgreen;
	margin-bottom: 10px;
	/* ******** END ***********/
	}

头歌网页设计与制作实训答案

一、HTML——基础

1.初识HTML: 简单的Hello World网页制作

2.HTML结构: 自我简介网页

二、HTML——文本

1.HTML链接: 带超链接的网页

2.HTML标题与段落: 网络文章网页

3.HTML表格: 日常消费账单表格展示

三、HTML——多媒体

1.HTML图片: 带图片的菜谱网页

2.HTML音频: 音乐播放网页

3.HTML视频: 视频播放网页

四、CSS从入门到精通——基础知识

1.初识CSS: 丰富多彩的网页样式

2.CSS样式引入方式

五、CSS从入门到精通——基础选择器

1.CSS元素选择器

2.CSS类选择器

3.CSSid选择器

六、CSS从入门到精通——背景样式

1.背景颜色

2.背景图片

3.背景定位与背景关联

七、CSS入门到精通——表格样式

1.表格边框

2.表格颜色、文字与大小

八、CSS从入门到精通——盒模型

1.透视盒模型: 居中的的盒子页面

2.确定盒模型元素大小

微信扫一扫：分享