第六章

最新推荐文章于 2021-06-03 04:02:37 发布

weixin_43024784

最新推荐文章于 2021-06-03 04:02:37 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/weixin_43024784/article/details/84026747

版权

作业专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？
内容、内边距、边框、外边距， CSS盒子模式都具备这些属性
盒子模型边框（border）(设置盒子上下左右4条边的边框)
属性：border-width|border-style|border-color

盒子模型的内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

盒子模型的外边距
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>
  <link href="CUU.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>
<h3 class="bg">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中心开班信息
</h3>
</div>
<div id="nav">
  <ul>
    <li ><a>8月12日：学历+技能班</a></a></li>
    <li ><a>8月16日：高考特招班</a></li>
    <li ><a>8月23日：Java精英班</a></li>
    <li ><a>8月31日：学士后强化班</a></li>
    <li ><a>9月5日：大学生就业班</a></li>
    <li ><a>9月9日：企业定向委培班</a></li>
    <li ><a>9月16日：网络营销强化班</a></li>
  </ul>
</div>
</body>
</html>

样式

#nav{
  width: 250px;
  background: linear-gradient(to top,white,greenyellow);

  border: #bdbdbd 1px solid;
  border-radius:0px 0px 20px 20px;
}
div{
  width: 250px;
  background: linear-gradient(to top,white,greenyellow);
  border: #bdbdbd 1px solid;
  border-radius:20px 20px 0px 0px;
  margin-bottom:2px;
}
li{
  list-style: none;
}
h3{
  color: white;
}
.bg{
  background: url("bg.gif" ) 0px 0px no-repeat;
}
ul li{
  list-style: none;
  background: url(dotBg.gif)no-repeat;
  background-position: -10px 0px;
  padding-left:15px ;
}

a{
  text-decoration: none;
}
a:hover{
  color: red;
}

4.制作商品分类列表页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表分类</title>
  
</head>
<body>
<div id="nav">
  <p><a href="">酒水、饮料</a></p><span></span>
  <p><a href="">进口食品</a></p><span></span>
  <p><a href="">休闲零食</a></p><span></span>
  <p><a href="">地方特产</a></p><span></span>
  <p><a href="">保健、冲调</a></p><span></span>
  <p><a href="">粮油、生鲜</a></p><span></span>
  <p><a href="">美容洗护</a></p><span></span>
  <p><a href="">清洁洗涤</a></p><span></span>
  <p><a href="">母婴、纸品</a></p><span></span>
  <p><a href="">家居百货</a></p>
</div>
</body>
</html>

样式

#nav{
      border-radius: 8px;
      border: 2px;
      border-color:orange;
      border-style:solid;
      width: 300px;
    }

    span{
      border-style: none none dashed none;
      border-radius: 1px;
      display: block;
      margin: auto;
      border-color:gray;
    }
    a{
      line-height: 35px;
      font-size: 15px;
      height: 5px;
      font-weight: bold;
      padding-left: 50px;
      box-sizing: border-box;
      text-decoration: none;
    }
    a:hover{
      color: blue;
    }
    p:nth-of-type(1){
      background-image: url("icon_01.jpg ");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(2){
      background-image: url("icon_02.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(3){
      background-image: url("icon_03.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(4){
      background-image: url("icon_04.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(5){
      background-image: url("icon_05.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(6){
      background-image: url("icon_06.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(7){
      background-image: url("icon_07.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(8){
      background-image: url("icon_08.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(9){
      background-image: url("icon_09.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }
    p:nth-of-type(10){
      background-image: url("icon_10.jpg");
      background-repeat:no-repeat ;;
      background-position: 5px -4px;
    }

5.制作权威课程免费体验登录页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登录页面</title>
  <link href="CUU.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
  <br/>
  <br/>
  <br/>
  <br/>
<form  method="post" action="" id="cco">
  <ul >
    <li><p><span>*</span>姓名：<input name="" type="text" value=""></p></li>
    <li><p><span>*</span>邮箱：<input name="" type="email" value=""></p></li>
    <li><p><span>*</span>电话：<input name="" type="text" value=""></p></li>
    <li><p>性别：  <select name="cs"> <option value="">请选择</option> </select></p></li>
    <li><p>年龄：  <select name="cs"> <option value="">请选择</option> </select></p></li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="" value="" id="kk">
  </ul>

</form>
</div>
</body>
</html>

样式

#kk{
  width: 150px;
  height: 50px;
  background-image: url("btn.jpg");
  background-repeat: no-repeat;
}
#nav{
  background-image:url("bg.jpg") ;
  background-repeat: no-repeat;
  width: 500px;
  height: 800px;
  color: white;
}
span{
  color: red;
}
.ss{

}
#cco input{
  border-radius: 5px;
  border: 1px black solid;
}
ul li{
  list-style: none;
}