HTML 第六章作业

课后作业
1.什么是盒子模型？盒子模型的属性有哪几个？他们的作用分别是什么？

盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型
内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性
盒子模型边框（border）(设置盒子上下左右4条边的边框)
属性：border-width|border-style|border-color
盒子模型的内边距（padding）(设置盒子的里面的上下左右4条的边距)
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
盒子模型的外边距（margin）(设置盒子的外面的上下左右4条的边距)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距

2.盒子模型有哪几种解析方式？他们有什么区别？
盒子有两种解析方式：
当我们在样式表输入box-sizing时，会显示border-box和content-box，第一种是边框盒子尺寸，第二种是内容尺寸
当我们给一个元素设置尺寸时，默认设置的是元素内容的尺寸，也就是content-box，这种在后期布局时会有很多不便
而当我们用border-box时，我们设置的尺寸实际等于：内容尺寸+两边的内边距+两边的边框宽度
3.制作北大青鸟网站的中心开班信息版块
HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>中心开班信息</title>
		<link rel="stylesheet" type="text/css" href="css/new_file4.css"/>
	</head>
	<body>
		<div id="nav">
			<h1 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>
</html>

CSS样式:

h1,
ul,
li {
	margin: 0px;
	padding: 0px;
}

#nav {
	width: 250px;
	box-sizing: border-box;
	margin: auto;
	border: 1px solid gray;
	border-radius: 8px;
	background: linear-gradient(to bottom, #5EC2F9, #ffffff, #FFFFFF, #ffffff,#ffffff);
}

h1 {
	color: white;
	font-size: 16px;
	border-bottom: 1px solid white;
	padding: 8px;
	background: url(../img/bg.gif)10px no-repeat;
	text-indent: 2.5em;
}

ul {
	width: 220px;
}

li {
	font-size: 16px;
	list-style-type: none;
	background: url(../img/dotBg.gif)0px 2px no-repeat;
	margin-top: -6px;
	padding: 8px 18px;
}

ul li:last-of-type {
	margin-bottom: 10px;
}

a {
	color: gray;
	text-decoration: none;
}

a:hover {
	color: orangered;
}

4.制作商品分类列表页面
HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类列表页</title>
		<link rel="stylesheet" type="text/css" href="css/new_file5.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;
}
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.制作权威课程免费体验登录页面
HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>免费体验登陆页面</title>
		<link rel="stylesheet" type="text/css" href="css/课后作业.css" />
	</head>
		
	<body>
		<div>
			<form action="#" method="post">
				<p><span>* </span>姓名<a>:</a> <input type="text" name="text" id="text"  /></p>
				<p><span>* </span>邮箱<a>:</a> <input type="email" name="email" id="email" /></p>
				<p><span>* </span>电话<a>:</a> <input type="text" name="text" id="text"  /></p>
				
				<p>
						性别<a>:</a>
					<select name="id">
						<option value="">请选择</option>
						<option value="1">男</option>
						<option value="2">女</option>
					</select>
				</p>
				<p>
					年齡<a>:</a>
					<select name="id">
						<option value="">请选择</option>
						<option value="1">16</option>
						<option value="2">17</option>
						<option value="3">18</option>
						<option value="4">19</option>
						<option value="5">20</option>
					</select>
				</p>
				<p><input type="image" src="img/btn.jpg" /></p>
			</form>
		</div>
	</body>

</html>

CSS样式:

body {
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
}

body div:first-of-type {
	color: white;
	width: 350px;
	box-sizing: border-box;
	margin-top: 35px;
	text-align: center;
	padding: 35px 25px 50px 0px;
	font-size: 16px;
}

P span {
	margin-left: -45px;
}

span {
	color: red;
}

input{
	border-radius: 4px;
	line-height: 20px;
	width: 200px;
}

select {
	border-radius: 5px;
}

form p:nth-of-type(4),
form p:nth-of-type(5) {
	padding-right: 170px;
}

a {
	margin-left: 4px;
	margin-right: 4px;
	font-weight: 900;
}

HTML 第六章 作业

猜你喜欢