第六 - 代码天地

1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
盒子模型边框（border）
属性：border-width（设置边框宽度）|border-style（设置边框样式）|border-color(设置边框颜色）
边框有四条边，单独设置某条边（top|right|bottom|left）

2.盒子模型有哪几种解析方式？它们有什么区别？
盒子有两种解析方式：
当我们在样式表输入box-sizing时，会显示border-box和content-box，第一种是边框盒子尺寸，第二种是内容尺寸
当我们给一个元素设置尺寸时，默认设置的是元素内容的尺寸，也就是content-box，这种在后期布局时会有很多不便
而当我们用border-box时，我们设置的尺寸实际等于：内容尺寸+两边的内边距+两边的边框宽度

制作北大青鸟网站的中心开班信息模块。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>中心开班信息</title>
  <style>
   div{
    width: 250px;
    
    border:1px solid #d8d8d8;
    box-sizing: border-box;
    line-height: 30px;
    background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF);
    margin: 0 auto;
    border-radius: 8px;
   }
   ul li{
    list-style-type:none;
    background: url(img/dotBg.gif) no-repeat;
    background-position:-10px 0;
    padding-left: 10px;
    
   }
   a{
    text-decoration: none;
   }
   a:hover{
    color: red;
   }
   .text1{
    border:1px white solid;
    background-color: white;
    display: block;
    width: 250px;
    height: 1px;
   }
 
   
   h3{
    color: white;
    padding-left:50px ;
    background: url(img/bg.gif) no-repeat;
    background-position:10px 0  ;
   }
  </style>
 </head>
 <body>
  <div>
   <h3>中心开班信息</h3>
   <p class="text1"></p>
   <ul>
    
    <li><a href="">8月12日：学历+技能班</a></li>
    <li><a href="">8月16日：高考特招班</a></li>
    <li><a href="">8月23日：Java精英班</a></li>
    <li><a href="">8月31日：学士后强化班</a></li>
    <li><a href="">9月5日：大学生就业班</a></li>
    <li><a href="">9月9日：企业定向委培班</a></li>
    <li><a href="">9月16日：网络营销强化班</a></li>
   </ul>
  </div>
 </body>
</html>

在这里插入图片描述

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>商品分类列表页</title>
  <style>
   .text1{
    border: 2px solid orange;
    width: 200px;
    height: 700px;
    border-radius:8px;
   }
   a:hover{
    color: red;
   }
   a{
    line-height: 40px;
    font-size: 15px;
    height: 5px;
    font-weight: bold;
    padding-left:60px ;
    box-sizing: border-box;
   }
   a{
    text-decoration: none;
   }
   span{
    border: 1px gray dashed;
    display: block;
    width: 180px;
    border-style: none none dashed none;
    margin: 0 auto;
   }
   div p:nth-of-type(1){
    background: url(img/icon_01.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(2){
    background: url(img/icon_02.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(3){
    background: url(img/icon_03.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(4){
    background: url(img/icon_04.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(5){
    background: url(img/icon_05.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(6){
    background: url(img/icon_06.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(7){
    background: url(img/icon_07.jpg) no-repeat;
    background-position: 5px -2px;
   }
   div p:nth-of-type(8){
    background: url(img/icon_08.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(9){
    background: url(img/icon_09.jpg) no-repeat;
    background-position: 5px -4px;
   }
   div p:nth-of-type(10){
    background: url(img/icon_10.jpg) no-repeat;
    background-position: 5px -4px;
   }
  </style>
 </head>
 <body>
  <div class="text1">
   <p><a href="" class="text2">酒水、饮料</a></p>
   <span></span>
   <p><a href="">进口食品</a></p>
   <span></span>
   <p><a href="">休闲零食</a></p>
   <span></span>
   <p><a href="">地方特产</a>
   <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>

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>免费体验登陆页面</title>
  <style>
   ul{
    margin: 0px;
    padding:0px;
    list-style-type: none;
     line-height: 35px;
     padding: 100px;
    padding-left: 50px;
   }
   .text2{
    border: 1px solid black;
    width:312px;
    height:353px;
   }
   .text1{
    background: url(img/bg.jpg) no-repeat;
    width:312px;
    height:353px;
   }
   #div{
    margin: 0px auto;
    margin-left: 35px;
   }
   input{
    border: 0px solid;
    border-radius: 4px;
   }
   select{
    border: 1px solid;
    border-radius: 4px;
   }
  </style>
 </head>
 <body class="text2">
  <form method="post"action="">
   <div>
  <ul class="text1">
   <li>*姓名：<input name="name"type="text"/></li>
   <li>*邮箱：<input name="email"type="email"/></li>
   <li>*电话：<input name="number"type="number"</li>
   <li>性别：<select name="sex" >
    <option value="">请选择</option>
    <option value="">男</option>
    <option value="">女</option>
   </select></li>
   <li>年龄:<select>
    <option>请选择</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
   </select></li>
    <input id="div" type="image"src="img/btn.jpg" />
  </ul>
   </div>
  </form>
 </body>
</html>

在这里插入图片描述

第六

猜你喜欢