盒子模型（网页内容设计、美化）
2018-11-13 本文已影响53人
i我所爱
边框：
边框的颜色：border-color
1.border-top-color:red;:上边框颜色
2.border-right-color:red;:右边框颜色
3.border-bottom-color:red;:下边框颜色
4.border-left-color:red;:左边框颜色
5.border-color: #0d7114;:四个边框同一颜色
6.border-color: #0d7114 #000;:上下边框,左右边框
7.border-color: #0d7114 #000 #f00;:上边框,左右边框,下边框
8.border-color: #0d7114 #000 #f00 #00f;:上边框,右边框,下边框,左边框
事例：
div{
border: 10px solid;
width: 250px;
height: 250px;
border-color: orange red blue green;
/*上 右 下 左*/
/*border-color: orange red blue;*/
/*上 左右 下*/
}
边框颜色
边框样式： border-style
1.border-top-style: solid;上边框实线
2.border-right-style: dotted; 右边框短虚线
3.border-bottom-style: dashed; 下边框长虚线
4.border-left-style: double; 左边框双实线
5.border-style: solid dotted dashed double; 上，右，下，左
总结：border:1px solid red;
事例：
div{
/*border-style:dashed; /!* 长虚线 *!/*/
/*/!*border-style:dotted; /!* 短虚线 *!/*/
/*/!*border-style:solid; /!* 单实线 *!/*/
border-style:double; /* 双实线 */
width: 120px;
height: 120px;
}
双实线(边框线的修改)
外边距：margin
1.margin-top:1px;上边框外边距
2.margin-right:1px;右边框外边距
3.margin-bottom:1px;下边框外边距
4.margin-left:1px;左边框外边距
5.margin:1px 2px 3px 4px;上，右，下，左
6.margin: 0px auto;网页居中对齐（块元素，固定宽度）
内边距：padding
1.padding-top:1px;上边框内边距
2.padding-right:1px;右边框内边距
3.padding-bottom:1px;下边框内边距
4.padding-left:1px;左边框内边距
5.padding:1px 2px 3px 4px;上，右，下，左
div{
border:dashed 5px orange;
width: 120px;
height: 120px;
/*margin: 40px;*/
margin: 0 auto;
padding: 40px;
}
虚线，内外边距
圆角边框：border-radius: 20px 10px 50px 30px;从左定点开始顺时针排列
圆形：border-radius: 50%;
盒子阴影：box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型
x-offset：X轴位移
y-offset：Y轴位移
blur-radius：模糊半径
color：模糊颜色
利用上面的知识点，和前面几天学习的内容。
(第五章 美化网页元素https://www.jianshu.com/p/924190ee789a)
完成下面作业：
作业1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>北大青鸟课程导航</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body {
font-family: 楷体;
width: 380px;
}
a{
text-decoration: none;
color: black;
}
li{
list-style-type: none;
}
div{
margin-left: 150px;
margin-top: 15px;
border:1px solid #aacbee ;
background-color: #f5f9fc;
}
.titles{
font-size: 20px;
color: #1F376D;
background: url(../images/ch20.2.gif) 1px center no-repeat;
text-indent: 25px;
line-height: 40px;
}
li{
background: url(../images/ch20.1.gif )right no-repeat;
border-top: solid 1px #aacbee;
line-height: 30px;
font-size: 20px;
text-indent: 8px;
margin: 0px 4px;
}
</style>
</head>
<body>
<div id="course_list">
<h1 class="titles">课程导航</h1><ul>
<li class="current"><a href="#">ACCP 软件工程师</a></li>
<li><a href="#">BTEST 软件测试工程师</a></li>
<li><a href="#">BENET 网络工程师</a></li>
<li><a href="#">JBNS 网站工程师</a></li>
<li><a href="#">ACCP 启蒙星</a></li>
<li><a href="#">ANDROID 软件工程师</a></li>
<li><a href="#">JAVA 软件工程师</a></li>
<li><a href="#">.NET 软件工程师</a></li>
<li><a href="#">网络营销</a></li>
</ul>
</div>
</body>
</html>
结果如图所示：
课程导航
作业2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>商品分类</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body {
background-color: #808080;
}
div{
width: 300px;
background-color: white;
}
h1{
background-color: black;
font-size: 15px;
line-height: 30px;
color: white;
text-indent: 20px;
}
dt{
line-height: 40px;
}
dd{
border-bottom:dashed 1px;
line-height: 40px;
padding-left: 30px;
}
dt:nth-of-type(1) {
background: url(../images/icon_01.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(2) {
background: url(../images/icon_02.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(3) {
background: url(../images/icon_03.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(4) {
background: url(../images/icon_04.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(5) {
background: url(../images/icon_05.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(6) {
background: url(../images/icon_06.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(7) {
background: url(../images/icon_07.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(8) {
background: url(../images/icon_08.gif) 0px center no-repeat;
text-indent: 30px;
}
dt:nth-of-type(9) {
background: url(../images/icon_09.gif) 0px center no-repeat;
text-indent: 30px;
}
</style>
</head>
<body>
<div id="product">
<h1>全部分类</h1>
<dl>
<dt>护肤</dt>
<dd>洁面 化妆水 喷雾 美容液 眼霜<br/>
眼部精华 眼膜 面膜 面膜贴<br/>
水洗面膜 免洗面膜 精华 精油<br/>
凝露 乳液 面霜 日霜 晚霜
</dd>
<dt>彩妆</dt>
<dd>卸妆 防晒 隔离 BB霜 粉底 粉饼<br/>
睫毛膏 眼影 唇彩 腮红 眼线笔<br/>
底妆 遮瑕 蜜粉 眉笔 美甲
</dd>
<dt>香氛</dt>
<dd>男香 女香 小Q装 中性香水</dd>
<dt>身体护理</dt>
<dd>洗发 护发 沐浴 身体乳 手足护理<br/>
护手霜 纤体 身体精油 颈部护理<br/>
个人护理 卫生用品 脱毛
</dd>
<dt>礼盒套装</dt>
<dd>护肤套装 身体护理套装 彩妆套装 <br/>
旅行装 香水套装 男士套装
</dd>
<dt>美容工具</dt>
<dd>护肤 彩妆 美发 美体 美甲 <br/>
美容仪器 其他美容工具
</dd>
<dt>母婴专区</dt>
<dd>奶粉 尿裤湿巾 母婴洗护</dd>
<dt>男士专区</dt>
<dd>洁面 爽肤水 面霜 男香<br/>
眼霜 凝胶 乳液 精华 沐浴
</dd>
<dt>食品保健</dt>
<dd>瘦身类 保健类 美容类 食品类</dd>
</dl>
</div>
</body>
</html>
结果如图所示：
商品分类
作业3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
body {
width: 300px;
height: 300px;
margin: 80px 80px;
}
h2{
color: mediumpurple;
border-bottom: dotted 1px;
background:linear-gradient(to top,white,#DDDFFF,#9698FF);
text-indent: 25px;
line-height: 60px;
border-left: solid #DDDFFF;
border-right: solid #DDDFFF;
border-top: solid #DDDFFF;
}
ul{
text-indent: 25px;
line-height: 40px;
border-bottom: solid #DDDFFF;
border-left: solid #DDDFFF;
border-right: solid #DDDFFF;
}
</style>
</head>
<body>
<h2>京东快报</h2>
<ul>
<li>[特惠]海飞丝去屑又去油 超清爽</li>
<li>[公告]京东公益支持鲁甸新动作</li>
<li>[特惠]4688元抢iPhone 6</li>
<li>[公告]小米电视携豪礼高调入驻京东</li>
</ul>
</body>
</html>
结果如图所示：
京东快报
作业4：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>爱奇异视频播放列表</title>
<style>
*{
margin: 0px;
padding: 0px;
}
h3{
margin-left: 50px;
margin-top: 40px;
}
li{
width: 240px;
height: 420px ;
display: inline-block;
margin-top: 30px;
margin-left: 50px;
line-height: 30px;
}
li:hover {
border-radius: 20px 20px 20px ;
box-shadow: 1px 1px 1px 1px grey ;
}
img{
border-radius: 15px 15px 15px ;
margin-top: 20px;
margin-left:15px;
}
li h4:nth-of-type(1){
font-size: 16px;
color: #4d4d4d;
margin-left: 8px;
}
li p:nth-of-type(1){
color: #640000;
font-size: 14px;
margin-left: 8px;
}
li p:nth-of-type(2){
font-size: 12px;
color: blue;
margin-left: 8px;
}
</style>
</head>
<body>
<h3>热播</h3>
<ul>
<li>
<img src="../images/ch25.1.png " alt=""/>
<h4>神武赵子龙</h4>
<p>怒，林更新不抱网红抱女神</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="../images/ch25.2.png" alt=""/>
<h4>旋风十一人</h4>
<p>胡歌变教练在撩前女友</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="../images/ch25.3.png " alt=""/>
<h4>太阳的后裔</h4>
<p>宋慧乔吃嫩草</p>
<p>点击次数：242445次</p>
</li>
<li>
<img src="../images/ch25.4.png " alt=""/>
<h4>山海经之赤影传说</h4>
<p>娜扎张翰再度联手</p>
<p>点击次数：242445次</p>
</li>
</ul>
</body>
</html>
结果如图所示：
爱奇艺视频播放列表
好像代码太多了。今天晚上没时间对作业题解析。
看不懂见谅！！！谢谢赏脸！！！
