第六章

最新推荐文章于 2024-05-15 18:52:53 发布
最新推荐文章于 2024-05-15 18:52:53 发布
阅读量436 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcl430422hcl/article/details/83746387
版权

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>


        .box{
            width: 250px;
            margin: 0px auto;
            background: linear-gradient(to bottom,#CAEFFE,#FFFFED,white,white);
            background: -webkit-linear-gradient(to bottom,#CAEFFE,#FFFFED,white,white);
            border-radius: 20px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
        a{
            color: gray;
            text-decoration: none;
        }
        a:hover{

            color: red;
            text-decoration:none;
        }
        ul{
            list-style: none;
        }
        li{
            background: url("dotBg.gif")0px -2px no-repeat;
            font-size: 15px;
            font-family: "Times New Roman", "楷体";
            margin-top: -6px;

            padding: 8px 16px;

            width: 200px;
            margin-left: -35px;
        }
        h1{
            font-size: 15px;
            color: white;
        }
    </style>
</head>
<body>
<div class="box">
   <h1 ><img src="bg.gif" class="h1">中心开班信息</h1>
<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>

在这里插入图片描述
4.制作商品分类列表页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表页</title>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<div id="nav">
			<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>

css代码：

#nav {
	border: 2px solid orange;
	border-radius: 8px;
	width: 200px;
	padding: 3px;
	height: 479px;
}

a {
	color: black;
	text-decoration: none;
	font-weight: bold;
}
a:hover{
	color: orangered;
}
li {
	list-style-type: none;
	font-size: 14px;
	font-family: "微软雅黑";
	margin-left: -40px;
	padding: 0px;
}

ul li:nth-of-type(1) {
	margin-top: -18px;
	background-image: url(../img/icon_01.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(2) {
	background-image: url(../img/icon_02.jpg);
	background-repeat: no-repeat;
	line-height: 50px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(3) {
	background-image: url(../img/icon_03.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(4) {
	background-image: url(../img/icon_04.jpg);
	background-repeat: no-repeat;
	line-height: 45px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(5) {
	background-image: url(../img/icon_05.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(6) {
	background: url(../img/icon_06.jpg);
	background-repeat: no-repeat;
	line-height: 47px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(7) {
	background-image: url(../img/icon_07.jpg);
	background-repeat: no-repeat;
	line-height: 47px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(8) {
	background-image: url(../img/icon_08.jpg);
	background-repeat: no-repeat;
	line-height: 48px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(9) {
	background-image: url(../img/icon_09.jpg);
	background-repeat: no-repeat;
	line-height: 48.3px;
	text-indent: 3.5em;
	border-bottom: 1px dashed;
}

ul li:nth-of-type(10) {
	background-image: url(../img/icon_10.jpg);
	background-repeat: no-repeat;
	line-height: 46px;
	text-indent: 3.5em;
}

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>免费体验登入页面</title>
		<style>
			div{
				background-image: url(bg.jpg) ;
				background-repeat: no-repeat;
				
				height: 500px;
				border-radius:  2px solid;
			
			
	color: white;
	width: 350px;
	box-sizing: border-box;
	margin-top: 0px;
	text-align: center;
	padding: 60px 50px 100px 0px;
	font-size: 16px;

				}
				ul li{
					list-style: none;
					margin: 0px auto;
					height: 30px;
					
				}
				span{
					color: red;
				}
			ul li:nth-of-type(4){
				padding-right: 150px;
				
			}
			
			ul li:nth-of-type(5){
				padding-right: 120px;
				
			}
			
		</style>
	</head>
	<body>
		<div>
			<ul>
			
			<form action="#">
			<li><span>*</span>姓名：<input type="text" /></li>
			<li><span>*</span>邮箱：<input type="text" /></li>
			<li><span>*</span>电话：<input type="text" /></li>
           <li>性别:<select name="sex>
            	<option value="">[请选择]</option>
            	<option value="1">男</option>
            	<option value="2">女</option>
            	</select>
            </li>
           <li>年龄:<select name="age">
            	<option value="">[请选择]</option>
            	<option value="1">16以下</option>
            	<option value="2">16~18</option>
            	<option value="3">18以上</option>
            		</select>
            	</li>
        <p><img src="btn.jpg"/></p>
			</form>
			
			</ul>
		</div>
	</body>
</html>

在这里插入图片描述

时刻的慌张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html制作免费体验登录页面,Html制作简单而漂亮的登录页面
weixin_35171603的博客
06-03 5151
先来看看样子。html源码：LoginLogin登录css代码：html{width: %;height: %;overflow: hidden;font-style: sans-serif;}body{width: %;height: %;font-family: 'Open Sans',sans-serif;margin: ;background-color: #4A374A;}#login{...
CSAPP第六章家庭作业参考答案
Talk is cheap,give me the code!
01-22 6185
（CSAPP第三版系列）导航篇传送门 6.24 这个文件由4000个逻辑块组成，并且对于磁盘，Tavg seek = 4ms, Tmax rotation = 4ms, 而Tavgrotatioin = 2ms。 A.  最好情况是块被映射到连续的扇区，在同一柱面上这样就可以不移动读写头来一块接一块地读。一旦读写头定位到了第一个扇区，需要磁盘转4整圈（平均每个磁道上1000扇区）
CSAPP的前六章题库与答案
05-23
CSAPP深入理解计算机系统各章节的题库，附答案。比较适合一些同学复习刷题用
CSAPP笔记——第六章存储器层次结构
最新发布
做一个善良的人，做好自己的事，如果愿意，再发一份光。
05-15 897
计算机中的存储体系全介绍。ROM、RAM、磁盘、硬盘、Cache、抖动等等统统拿下。
盒子模型之免费体验登录页面
天天向上
10-12 3880
免费体验登录页面 * 姓名: * 邮箱: * 电话: 性别: 请选择 男 女 年龄: 请选择 20 21 //cssy样式 #login{ width:300px; background: url(../img1/bg.jpg) 0px 0px n
CSAPP第六章家庭作业（原书第二版）
无知亦乐
01-14 1941
6.32 A：地址格式 因为地址宽13位且题目所给地址为0x0718，转换成二进制表示为 0 0111 0001 1000，填下表： B：存储器引用 由题S=8，E=4,B=4,m=13所以s=3,b=2,t=m-(s+b)=8,0-1位是块偏移，2-4位是组索引，5-12是标记位，故根据题A中二进制地址表示可知，CO为00，CI为110，CT为00111000,由题中所给高速缓存表查看索引为0x6、标记位为0x38、块偏移量为0x0的数据为FA，命中。填下表： 6.33 A：地址格式 因为地址宽1
第五章到第六章
qq_44846808的博客
08-10 256
第五章复习 引题： （1）汉诺塔问题（非重点） 算法呈现： void hanoi(int n,A,B,C){ if(n>0){ hanoi(n-1,A,C,B); //A->C,B作辅助 move(A,B); //A->B hanoi(n-1,C,B,A); //C->B,A作辅助 } } （2）选择排序（非重点）： 时间复杂度：元素比较次数为C(n)，那么C(n)=n(n-1)/2; （3）插入排序（非重
编译原理 课后答案 第六章 清华
05-07
编译原理 课后答案 第六章 清华 张素琴 第二版
第六章幼儿园课程PPT课件.ppt
05-29
第六章幼儿园课程，第六章幼儿园课程课件，第六章幼儿园课程PPT
信息论与编码第六章课后习题答案(曹雪虹).pdf
10-06
"信息论与编码第六章课后习题答案" 本资源主要涵盖了信息论与编码的第六章内容，包括信道编码、线性分组码、码空间、对偶空间、纠错码分类、差错符号、差错图样等概念。 首先，信道编码是指在信息传输过程中，为了...
作业5：学员免费体验登录页面.7z
06-04
课后练习作业5：学员免费体验登录页面，里面有详细的制作的流程，大家可以参考里面的答案理清思路！
文化产业概论教学课件 第六章 文化产业的分类.ppt
02-18
第六章 文化产业的分类
(完整版)汽车理论课后习题答案第六章汽车的平顺性.docx
06-12
第六章汽车的平顺性是汽车理论中的一个重要章节，主要关注车辆行驶过程中如何减少振动，提高乘客舒适性。平顺性涉及到车辆与路面交互作用、动力学特性以及人体对振动的感知。 首先，平顺性通常用加速度的谱密度来...
数字图像处理第六章课后作业.pdf
06-24
本文件是本人在学习过程中的作业，冈萨雷斯第三版课后习题（6-7）、（6-24）、（6-25）；没有需要勿下载，本人能力有限，如有错误勿喷。
数据库第六章习题答案.pdf
11-17
数据库第六章习题答案.pdf
深入理解计算机系统（csapp）家庭作业——第六章存储器层次结构
醉等佳人归
03-04 2651
6.22 磁盘容量 = 磁道数 * 一个磁道上的位数 = (1-x)*r*k2πr (k为比例因子) 由此可知当x=0.5时磁盘容量最大 6.23 平均旋转延迟： T_arg_rotation = 1/2 * T_max_rotation = 1/2 * 60s/15000 RPM * 1000ms/s = 2ms 平均传送时间： T_arg_tranfer = 60s/15...
CSAPP 第三版 第六章 家庭作业and so on
weixin_43172803的博客
12-05 2902
CSAPP 第三版 第六章 家庭作业 自己做的 仅供参考 可能出现错误 注：5.18 5.19 mark一下 6.22 假设磁道沿半径均匀分布，即总磁道数和(1-x)r成正比，则设磁道数为k(1-x)r；故2πkx(1-x)r2，从而x = 0.5时最大 6.23 Tavg seek = 4 ms Tavg rotation = (1 / 2) * (1 / 15000 RPM) × (60s /...
CSAPP：第六章——存储器层次结构
yelvens的博客
03-28 1272
文章目录一、存储技术1.1 随机访问存储器1.1 随机访问存储器二、局部性三、存储器层次结构四、高速缓存存储器五、编写高速缓存有好的代码六、高速缓存对程序性能的影响 如果数据在寄存器中，指令执行期间，访问需要0个始终周期；在高速缓存中，需要4～75个周期；在主存中，需要上百个周期；在磁盘中，大约要几千万个周期。 一、存储技术 1.1 随机访问存储器 随机访问存储器（Random-Access Memory，RAM）分两类：静态（SRAM）和动态（DRAM）。 都具有易失性，断电后数据丢失。 SRAM比DR
java第六章第七章
11-28
很抱歉，您提供的引用内容中没有第六章的相关信息。以下是第七章的内容介绍： 第七章介绍了Java中的常用类，包括字符串、日期、时间、数字格式化、正则表达式等。具体内容如下： 1. 字符串类 Java中的字符串是不可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值