作业一学期三书六章

最新推荐文章于 2023-07-06 23:38:13 发布
最新推荐文章于 2023-07-06 23:38:13 发布
阅读量480 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sc13647346287/article/details/83506171
版权

1.什么是盒子模型？盒子模型的属性有那几个？它们的作用分别是什么？
（1）CSS将网页中所有元素都看成一个个盒子。
（2）盒子模型属性有边框、内边距和外边距。
（3）边框设置网页元素边框的颜色、粗细和样式；外边距指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离，便于精确控制盒子的位置；内边距用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。
2.盒子模型有哪几种解析方式？它们有什么区别？
content-box：默认值，盒子的宽度或高度 = border+padding+（margin）+ width/height。
border-box：盒子的宽度或高度等于元素内容的宽度或高度。从盒子模型的介绍可知，这里内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度=盒子宽度或高度-border-padding）。
3.制作图北大青鸟网站的中心开班信息模块。要求如下：
<页面宽度250px，整体居中显示，背景使用线性渐变及1px的灰色圆角边框。
<标题左侧的小图标以背景图片的方式实现，标题颜色为白色。
<使用无序实现开班信息列表，列表前的小三角箭头和下方的虚线均使用背景图像的方式实现。
<列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上是，字体颜色改变无下划线。
<页面中涉及的盒子模型解析方式都使用border-box。

/*初始化内外边距*/
body,div,ul,li{
    padding: 0px;
    margin: 0px;
}
/*设置页面整体*/
.div{
    width: 250px;
    margin: 0 auto;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    box-sizing:border-box;
    background: linear-gradient(to bottom,#5bc1f9 ,#FFF,#FFF,#FFF,#FFF);/*渐变*/
}
/*设置标题*/
.h2{
    background: url("../Semester1book3DJ6/bg.gif") 5px no-repeat;
    color: white;
    font-size: 14px;
    padding-left: 45px;
    margin: 10px 0px;
    font-weight:bold;
    height: 40px;
    line-height:40px;
    border-bottom: 1px solid #FFFFFF;
}
/*设置列表*/
li{
    list-style:none;/*去前面的原点*/
    background: url("../Semester1book3DJ6/dotBg.gif") -9px center no-repeat;
    width:220px;
    height:30px;
    padding-left: 10px;
    margin: 10px 0px;
}
/*原来*/
a{
    color: #626262;
    text-decoration: none;
}
/*悬浮时*/
a:hover{
    color: #F30;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中心开班信息</title>
    <link rel="stylesheet" href="DJ6word3.css" type="text/css">
</head>
<body>
<div class="div">
    <h2 class="h2">中心开班信息</h2>
    <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.制作图商品分类列表页面。
<商品列表放在一个div中，<div的四边框均为2px的橙色实线圆角边框。
<用结构伪类选择器选择每个列表并为其加上背景图每个列表下方1px的灰色虚线边框，但是最后一个列表项没有。
<文本超链接为黑色粗体，当鼠标悬浮在超链接文本上变色，平切无下划线。

/*初始化内外边距*/
body,div,ul,li{
    margin: 0px;
    padding: 0px;
}
li{
    list-style:none;
}
/*设置整体*/
#div{
    width: 200px;
    border: #fc9829 2px solid;
    border-radius:8px;
    box-sizing: border-box;
}
/*设置宽度去除前面装饰*/
#div ul{
    width: 190px;
    margin: 0px auto;
}
/*设置列表*/
#div li{
    height:47px;
    font-size:12px;
    font-weight:bold;
    padding-left:50px;
    border-bottom:1px #929292 dotted;
    line-height:47px;
    box-sizing: border-box;
}
/*未悬浮时*/
#div a{
    color: black;
    font-weight: bold;
    text-decoration:none;
}
/*悬浮时*/
#div a:hover{
    color: #008bbf;
    text-decoration:none;
}
/*设置列表背景*/
#div li:nth-of-type(1){
    background: url("../Semester1book3DJ6/icon_01.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(2){
    background: url("../Semester1book3DJ6/icon_02.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(3){
    background: url("../Semester1book3DJ6/icon_03.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(4){
    background: url("../Semester1book3DJ6/icon_04.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(5){
    background: url("../Semester1book3DJ6/icon_05.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(6){
    background: url("../Semester1book3DJ6/icon_06.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(7){
    background: url("../Semester1book3DJ6/icon_07.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(8){
    background: url("../Semester1book3DJ6/icon_08.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(9){
    background: url("../Semester1book3DJ6/icon_09.jpg") 0px 0px no-repeat;
}
#div li:nth-of-type(10){
    background: url("../Semester1book3DJ6/icon_10.jpg") 0px 0px no-repeat;
}

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

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

body,div,ul,li{
    margin: 0px;
    padding: 0px;
}
li {
    list-style-type:none;
}
.picture{
    width: 312px;
    height: 353px;
    background: url("../Semester1book3DJ6/bg.jpg") 0px 0px no-repeat;
}
.su{
    width: 260px;
    margin: 0px auto;
    padding-top: 80px;
    font-size: 14px;
    color: white;
    box-sizing: border-box;
}
li{
    height: 38px;
    line-height: 38px;
}
li span{
    color: red;
    padding-right: 5px;
}
select{
    border: 1px #7b7b7b solid;
    border-radius: 4px;
}
.button{
    background: url("../Semester1book3DJ6/btn.jpg") 0px 0px no-repeat;
    width:152px;
    height:49px;
    border:0px;
    cursor:pointer;
}
.male{
    text-align:center;
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>免费体验登陆页面</title>
    <link rel="stylesheet" href="DJ6word5.css" type="text/css">
</head>
<body>
<div class="picture">
    <div class="su">
        <ul>
            <li>
                <span>*</span>姓名：
                <input type="text" name="name">
            </li>
            <li>
                <span>*</span>邮箱：
                <input type="email" name="email">
            </li>
            <li>
                <span>*</span>电话：
                <input type="number" name="number">
            </li>
            <li>性别：
                <select name="sex">
                    <option>请选择</option>
                    <option>男</option>
                    <option>女</option>
                </select>
            </li>
            <li>年龄：
            <select name="age">
                <option>请选择</option>
                <option>1</option>
                <option>2</option>
            </select>
            </li>
            <li class="male">
                <input type="submit" value=" " class="button">
            </li>
        </ul>
    </div>
</div>
</body>
</html>
一江风雪
关注
大学生HTML静态网页大作业
03-24
该资源是大学期间做的html大学页，非常适合大学生当作大作业用，纯前端 很美丽 文件里面有几个视频 所以显得较大
中心动态列表页面html,中心动态列表.html
weixin_36064484的博客
05-31 728
中心动态列表*{margin: 0;padding: 0;}.box{border: 1px solid #77CBFA;width: 250px;height: 320px;/*盒子居中*/margin: 0px auto;border-radius: 3%;/*标准语法*/background: linear-gradient(#77CBFA,white 30%);}ul{list-style...
HTML作业三
lmhnba的博客
10-19 487
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业三</title> <link rel="stylesheet" href="01.css"
盒子模型
Hero4399的博客
07-14 700
一、什么是盒子模型 1.     盒子模型是CSS中重要的指导思想，是网页布局的基石 2.     它认为页面中所有元素都是一个盒子，可以通过设置它的属性进而改变该盒子的显示状态 3.     它认为盒子间是相互影响的 二、盒子模型中常用的盒子属性 1.     width：设置盒子的内容的宽度，属性值为像素值或百分比，如果是块元素默认宽度为父元素的100%，如果是行内元素默认宽度为内容
盒子模型解析
shao_xuan_的博客
10-11 1444
盒子模型盒子模型盒子的特性1、外边距属性2、内边距属性3、边框属性4、背景属性 盒子模型 进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同 盒子的特性 (1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border) 1、外边距属性 外边距属性 作用 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin
2021第一学期C语言课程作业汇总
03-04
在2021年第一学期的C语言课程中，学生们通过一系列作业深入学习了这门语言，涵盖了基础到进阶的知识点。 一、C语言基础 C语言的基础包括变量、数据类型、运算符和控制结构。变量是存储数据的容器，有整型(int)、...
东南大学计算机系短学期MFC作业 西文图书馆
12-06
这篇资料主要涵盖了东南大学计算机系在短学期中的一项MFC（Microsoft Foundation Classes）作业，主题是构建一个西文图书馆管理系统。MFC是微软提供的一套C++类库，用于简化Windows应用程序的开发，它提供了丰富的...
一年级下学期少先队工作计划书.docx
11-15
【一年级下学期少先队工作计划书】 在一年级下学期的少先队工作中，主要的目标是根据学校的德育训练思路，围绕少先队的核心任务，针对孩子们的实际需求，设计并实施一系列富有童趣和教育意义的活动。这些活动旨在...
三峡大学2023秋计算机图形学期末大作业
最新发布
12-30
本篇作业是针对三峡大学2023年秋季学期计算机图形学课程的一份期末大作业，旨在检验学生对Unity引擎的理解和应用能力。作业内容涵盖理论考试和项目制作两大部分，其中项目制作是重点，要求使用Unity 5.6.6f2版本或...
盒子模型（box model）是什么
Lzy_o的博客
07-06 1271
盒子模型不仅在css里面用到的多，而且在面试地时候问到的也多。##一、 盒子模型概念盒子模型（box model），就是把 HTML 标签比喻成盒子 box。例如我们在网页上看到每个板块都是一个盒子。在浏览器中点击快捷键F12 可以查看到盒子模型。
【22】CSS核心样式（3）——盒模型5种属性
倏存的博客
03-29 8257
（盒模型）五个用来描述盒子位置、尺寸的属性： ①宽度 width、 ②高度 height、 ③内边距padding、 ④边框 border、 ⑤外边距 margin。
第六
liujia20001123的博客
11-09 485
1.什么是盒子模型？盒子模型的属性有哪几个？它们的作用分别是什么？ 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。 盒子模型边框（border） 属性：border-width（设置边框宽度）|border-style（设置边框样式）|bo...
简述盒子元素
RJ0403的博客
11-15 1247
一、css盒子模型概念 css盒子模型又称为框模型（Box Model），内容主要有4个要素。 1、元素内容（content）： 2、内边距（padding） 3、边框（border） 4、外边距（margin） 图中最内部的框就是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距（padding），然后是挨着（padding）的边框（border），然后最外层是外边距（margin），整个就组成了一个盒子模型。通常我们设置背景的区域就是内容，内边距 ，边框这一块范围。 二、盒子模型的属性 内容（c
CSS基础知识(二）——盒子模型
weixin_54799350的博客
06-21 8228
CSS盒子模型相关属性介绍
盒子模型的组成及其相关属性
m0_55931152的博客
08-03 5125
一、盒子模型的组成 二、盒子模型的组成属性 1、边框属性(border) ⑴边框属性样式(border-style) 属性值 none：没有边框 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。 分开写，即 border-top-style 上边框样式 border-bottom-style.
CSS盒子模型及属性
weixin_56373368的博客
07-20 750
对CSS盒子模型及属性的介绍
HTML+CSS制作列表页面和多彩照片以及美食推荐页面
Night_798的博客
05-14 3383
html和css的基础的页面里 此html标签为元素定义标记，css元素不会向用户呈现任何特殊效果，当用户选择此便签时，浏览器会标签相关的表单控件上。 html和css属性应当与相关元素的id属性相同。 1.制作中心动态列表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/.
HTML第6章简答题3(制作北大青鸟网站的中心开班信息模板)
拂欢
07-23 3791
代码如下，自需自看： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; ...
写一个标准的一个学期的学校计划
03-02
6. 学期计划总结：制定一个学期计划总结，以便学生和教师能够回顾学期中的进展和挑战。总结应包括对每个课程的评估和对学生学术成绩的评估。 希望这些信息能够帮助你编写一个标准的学期学校计划。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值