第六章作业

最新推荐文章于 2021-12-02 20:19:59 发布

憶yǐ

最新推荐文章于 2021-12-02 20:19:59 发布

阅读量796

点赞数 1

CC 4.0 BY-SA版权

分类专栏：作业文章标签：作业

本文链接：https://blog.youkuaiyun.com/weixin_43024782/article/details/83892226

作业专栏收录该内容

23 篇文章

订阅专栏

本文深入探讨了网页设计中的盒子模型概念，包括其组成部分如内容、内边距、边框和外边距，以及两种解析方式：content-box和border-box。通过实例展示了如何运用这些知识来创建美观且功能性的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型边框（border）
属性：border-width（设置边框宽度）|border-style（设置边框样式）|border-color(设置边框颜色）
边框有四条边，单独设置某条边（top|right|bottom|left）
如： border-top-width|border-top-style|border-top-color
盒子模型的内边距（padding）
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
盒子模型的外边距（margin）
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
2.盒子模型有哪几种解析方式？它们有什么区别？
盒子有两种解析方式：
当我们在样式表输入box-sizing时，会显示border-box和content-box，第一种是边框盒子尺寸，第二种是内容尺寸
当我们给一个元素设置尺寸时，默认设置的是元素内容的尺寸，也就是content-box，这种在后期布局时会有很多不便
而当我们用border-box时，我们设置的尺寸实际等于：内容尺寸+两边的内边距+两边的边框宽度
3. 制作北大青鸟网站的中心开班信息模块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心开班信息</title>
<style>
  div{
     border: 1px solid;
    width: 300px;
    height: 420px;
    border-radius: 20px;
    margin: 0px auto;
    background: linear-gradient(to bottom, #5bc1f9 ,#FFF,#FFFFED);
    border-color: #ECECEC;
  }
  h3{
    background: url("../image/bg.gif") no-repeat;
    font-size: 12px;
    color: white;
    background-position-x:2px;
    text-indent: 0.5em;
    line-height: 30px;
    border: 1px solid;
    width: 255px;
    height: 30px;
    font-size: 28px;
    padding-left: 25px;
    margin: 10px;
    border-style: none;
    border-bottom-style:solid ;
  }
  p{
    border: 1px solid;
    width: 255px;
    height: 32px;
    line-height: 32px;
    background: url("../image/dotBg.gif") no-repeat;
    padding-bottom: 2px;
    padding-left: 20px;
    border-style: none;
  }
  a{
    text-decoration: none;
    color: black;
  }
  .a:hover{
    text-decoration: none;
    color: red;
  }
 </style>
</head>
<body>
<div>
  <h3>中心开班信息</h3>
  <p><a href="#" class="a">8月12日：学历班加技能班</a></p>
  <p><a href="#" class="a">8月16日：高考特招班</a></p>
  <p><a href="#" class="a">8月23日：Java精英班</a></p>
  <p><a href="#" class="a">8月31日：学士后强化班</a></p>
  <p><a href="#" class="a">9月5日：大学生就业班</a></p>
  <p><a href="#" class="a">9月9日：企业定向委培班</a></p>
  <p><a href="#" class="a">9月15日：网络营销强化班</a></p>
</div>
</body>
</html>

在这里插入图片描述
4.制作权威课程免费体验登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登陆页面</title>
  <style>
    div{
      border: 1px solid;
      width: 312px;
      height: 353px;
      border-style: none;
      background:url("../图片素材/bg.jpg");
      width: 312px;
      height: 353px;
      margin: 0px auto;
    }
  .type{
    list-style: none;
  }
    .x{
      color: red;
    }
    .y{
      color: white;
    }
    ul{
      margin-left: 40px;
      line-height: 35px;
      padding: 100px 0;
    }
    input{
      border: 0px solid;
      border-radius: 4px;
    }
    select{
      border: 0px solid;
      border-radius: 4px;
    }
    #div{
      margin: 0px auto;
      margin-left: 40px;
    }
  </style>
</head>
<body>
<div>
<form method="post" >
  <ul>
  <li class="type"> <span class="x">*<span/><span class="y">姓名：
  </span><input  name="name" type="text" /></li>
    <li class="type"> <span class="x">*<span/><span class="y">邮箱：
    </span><input  name="email" type="email" /></li>
    <li class="type"> <span class="x">*<span/><span class="y">电话：
    </span><input  name="tel" type="text" required pattern="^1[358]\d{9}"/></li>
    <li class="type"><span class="y">性别：</span>
      <select name="sex">
        <option value="">请选择</option>
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
    </li>
    <li class="type"><span class="y">年龄：</span>
      <select name="age">
        <option value="">请选择</option>
        <option value="1">18以下</option>
        <option value="2">18~25</option>
        <option value="3">26~35</option>
      </select>
    </li>
    <input id="div" type="image" src="../图片素材/btn.jpg"/>
  </ul>
</form>
</div>
</body>
</html>

在这里插入图片描述