首页 前端知识 头歌网页设计与制作实训答案

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

2024-04-01 10:04:38 前端知识 前端哥 106 178 我要收藏

我这里已经看不见原题目了,只粘贴了有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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4352.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!