学生作业

最新推荐文章于 2021-08-03 15:29:25 发布

雪无地

最新推荐文章于 2021-08-03 15:29:25 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/haodemingzdbgzl/article/details/84836384

版权

第六章
1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物–盒子作一个比喻来理解，所以叫它盒子模式。
margin-bottom, margin-top, margin-left, margin-right 设置外边距上下左右
padding-top,padding-bottom, padding-left, padding-right 设置内边距上下左右

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

3.制作图所示的网站的中心开班信息模块。要求如下：
页面总宽度为250px，整体居中显示，背景使用线性渐变及1px灰色圆角边框
标题左侧的小图标以背景图像的方式实现，标题颜色为白色
使用无序列表实现开班信息列表，列表前的小三角形箭头和下方虚线均使用背景图片的方式实现
列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上时，字体颜色发生变化，无下划线
页面中涉及盒子模型解析方式都使用border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<div class="a">
    <h2 class="b">中心开班信息</h2>
    <div class="c">
    <ul>
        <li><d hred="#">8月12日：学历+技能班</d></li>
        <li><d hred="#">8月16日：高考特招班</d></li>
        <li><d hred="#">8月23日：Java精英班</d></li>
        <li><d hred="#">8月31日：学士后强化班</d></li>
        <li><d hred="#">9月5日：大学生就业班</d></li>
        <li><d hred="#">9月9日：企业定向委培班</d></li>
        <li><d hred="#">9月16日：网络营销强化班</d></li>
    </ul>
    </div>
</div>
</body>
</html>

《css》

*{margin:0px; padding:0px;}
li{list-style-type:none;}

.a{
    white:250px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF);
    margin: 0 auto;
    box-sizing: border-box;
}
.b{
    background: url("../keshi6/test/bg.gif") 10px 5px no-repeat ;
    height:40px;
    padding-left:45px;
    color:#FFF;
    font-size:14px;
    font-weight:bold;
    line-height:40px;
    border-bottom: 1px solid #FFFFFF;
}
.c{
    width: 190px;
    padding-left: 10px;
    box-sizing: border-box;
    margin: 10px 0;
}
.c li{
    background:url(../keshi6/test/dotbg.gif) -9px center  no-repeat;
    padding-left:10px;
    width:220px;
    height:30px;
    line-height: 30px;
    box-sizing: border-box;
}

.c d{color:#626262; text-decoration:none;}
.c d:hover{color:#F30;text-decoration:none;}

4.制作图所示的商品分类列表页面，要求如下：
商品列表在一个div中，div的四个边框均为2px的橙色实线圆角边框
用结构伪类选择器选择每个列表并为其加上背景图，每个列表下方为1px的灰色虚线边框，最后一个列表没有
文本超链接为黑色粗体，当鼠标悬停在超链接文本上时文本变色，并且无下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <link rel="stylesheet" href="test2.css">
</head>
<body>
<div id="a">
    <ul>
        <li><b href="#">酒水、饮料</b></li>
        <li><b href="#">进口食品</b></li>
        <li><b href="#">休闲零食</b></li>
        <li><b href="#">地方特产</b></li>
        <li><b href="#">保健、冲调</b></li>
        <li><b href="#">粮油、生鲜</b></li>
        <li><b href="#">美容洗护</b></li>
        <li><b href="#">清洁洗涤</b></li>
        <li><b href="#">母婴、纸品</b></li>
        <li><b href="#">家居百货</b></li>
    </ul>
</div>
</body>
</html>

《css》

ul, li {
    padding:0px;
    margin:0px;
}
li {
    list-style:none;
}
#a {
    width:200px;
    border:2px #fc9829 solid;
    border-radius: 8px;
    box-sizing: border-box;
}
#a ul {
    width:190px;
    margin:0px auto;
}
#a li {
    height:47px;
    font-size:12px;
    font-weight:bold;
    padding-left:50px;
    border-bottom:1px #929292 dotted;
    line-height:47px;
    box-sizing: border-box;
}
#a li b{text-decoration:none; color:#000;}
#a li b:hover{text-decoration:none; color:#CC5A0F;}

#a li:nth-of-type(1) {
    background:url(../keshi6/test2/icon_01.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(2) {
    background:url(../keshi6/test2/icon_02.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(3){
    background:url(../keshi6/test2/icon_03.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(4) {
    background:url(../keshi6/test2/icon_04.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(5) {
    background:url(../keshi6/test2/icon_05.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(6) {
    background:url(../keshi6/test2/icon_06.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(7) {
    background:url(../keshi6/test2/icon_07.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(8){
    background:url(../keshi6/test2/icon_08.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(9){
    background:url(../keshi6/test2/icon_09.jpg) 0px 0px no-repeat;
}
#a li:nth-of-type(10){
    background:url(../keshi6/test2/icon_10.jpg) 0px 0px no-repeat;
    border-bottom: none;
}

5.制作图所示的权威课程免费体验登入页面，要求如下：
页面文本颜色为白色，*的字体颜色为红色
使用无序列表排版表单元素
无序列表内容在页面中居中显示
“免费体验”按钮使用背景图像方式实现
按语义化使用表单元素，且是圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>
    <link rel="stylesheet" href="test3.css">

<body>
<div class="a">
    <ul>
        <li>*<b>姓名：<input type="text" name="userName"/></b></li>
        <li>*<b>邮箱：<input type="text" name="userName"/></b></li>
        <li>*<b>电话：<input type="text" name="userName"/></b></li>
        <li>性别
            <select name=""version id="1">
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </li>
        <li>年龄
            <select name=""version id="2">
                <option value="">请选择</option>
                <option value="47">47</option>
                <option value="24">24</option>
            </select>
        </li>
    </ul>
</div>

</body>
</html>

《css》

.a{
    background: url("../keshi6/test3/bg.jpg") 0px 0px no-repeat;
    width: 312px;
    height: 353px;
}
body,ul, li {
    margin:0px;
    padding:0px;
}
li {
    list-style-type:none;
}
#a .content {
    width:260px;
    margin:0px auto;
    padding-top:80px;
    color:#FFF;
    font-size:14px;
    box-sizing: border-box;
}
#a li {
    height:38px;
    line-height:38px;
}
#a li span {
    color:#F00;
    padding-right:5px;
}
#a input {
    border:1px #7b7b7b solid;
    border-radius: 4px;
    width:190px;
    height:17px;
}
#a select{
    border:1px #7b7b7b solid;
    border-radius: 4px;
}
#a .btnRegist {
    background:url(../keshi6/test3/btn.jpg) 0px 0px no-repeat;
    width:152px;
    height:49px;
    border:0px;
    cursor:pointer;
}
#a .btn {
    text-align:center;
}

雪无地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学生作业

第六章1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物–盒子作一个比喻来理解，所以叫它盒子模式。margin-bottom, margin-top, margin-left, marg...
复制链接

扫一扫