内容:content
即盒子里面的文字或者标签。
内边距:padding
即盒子边框到内容之间的距离。
边框:border
即盒子的边框。
外边距:margin
即盒子与盒子之间的距离。
border相关属性:border-width:边框的宽度、border-style:边框的样式(solid:实线 、dashed:虚线、dotted:点线 )、border-color:边框的颜色。(border也可进行连写,顺序可调换。)
可对四个方向边框单独编辑:border-left 左边框、border-right 右边框、border-top 上边框、border-bottom 下边框。
padding相关属性:盒子边框与内容之间的距离 。(padding-top 上内边距、padding-right 右内边距、padding-bottom 下内边距、padding-left 左内边距。)
10px:上下左右为10、
10px 20px:上下为10,左右为20、
10px 20px 30px:上为10,左右为20,下为30、
10px 20px 30px 40px:上为10,右为20,下为30,左为40。
margin相关属性:盒子与盒子之间的距离。(margin-top 上外边距、margin-right 右外边距、margin-bottom 下外边距、margin-left 左外边距。)(属性值多写代表方向与padding相同。)
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>畅销书排行榜</title>
<style>
.title {
width: 300px;
height: 30px;
font-size: 16px;
font-weight: 700;
color: #e8f3cb;
line-height: 30px;
text-indent: 16px;
background: #518600 url(./素材/image/bang.gif) no-repeat 100px 50%;
}
.qun {
width: 300px;
height: 330px;
background-color: #f9fad8;
}
ul {
width: 260px;
height: 300px;
background-color: #f9fad8;
background-image: linear-gradient(#f9fad8, white);
}
li {
width: 260px;
height: 26px;
font-weight: 700;
line-height: 26px;
list-style-position: inside;
}
a:link {
color: #4773a3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.yi {
list-style-image: url(./素材/image/book_no01.gif);
}
.er {
list-style-image: url(./素材/image/book_no02.gif);
}
.san {
list-style-image: url(./素材/image/book_no03.gif);
}
.si {
list-style-image: url(./素材/image/book_no04.gif);
}
.wu {
list-style-image: url(./素材/image/book_no05.gif);
}
.liu {
list-style-image: url(./素材/image/book_no06.gif);
}
.qi {
list-style-image: url(./素材/image/book_no07.gif);
}
.ba {
list-style-image: url(./素材/image/book_no08.gif);
}
.jiu {
list-style-image: url(./素材/image/book_no09.gif);
}
.shi {
list-style-image: url(./素材/image/book_no10.gif);
}
</style>
</head>
<body>
<div class="qun">
<div class="title">畅销书排行</div>
<ul>
<li class="yi"><a href="#">不抱怨的世界</a></li>
<li class="er"><a href="#">遇见未知的自己</a></li>
<li class="san"><a href="#">活法</a></li>
<li class="si"><a href="#">高效能人士的七个习惯</a></li>
<li class="wu"><a href="#">被迫强大</a></li>
<li class="liu"><a href="#">遇见心想事成的自己</a></li>
<li class="qi"><a href="#">世界上最伟大的推销员</a></li>
<li class="ba"><a href="#">我的成功可以复制</a></li>
<li class="jiu"><a href="#">少有人走的路</a></li>
<li class="shi"><a href="#">活出全新的自己</a></li>
</ul>
</div>
</body>
</html>
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品分类</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #d5d5d5;
}
div {
width: 250px;
height: 550px;
background-color: white;
}
.title {
width: 200xp;
height: 40px;
background-color: #000000;
color: white;
line-height: 40px;
text-indent: 16px;
}
dt {
width: 200px;
height: 36px;
font-family: 宋体;
font-weight: 700;
padding-left: 26px;
}
dd {
width: 225px;
font-size: 10px;
font-family: 宋体;
padding-left: 26px;
border-bottom: 1px dashed;
}
.hf {
background-image: url(./素材/image/icon_01.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.cz {
background-image: url(./素材/image/icon_02.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.xf {
background-image: url(./素材/image/icon_03.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.st {
background-image: url(./素材/image/icon_04.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.lh {
background-image: url(./素材/image/icon_05.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.mr {
background-image: url(./素材/image/icon_06.gif);
background-repeat: no-repeat;
line-height: 36px;
}
.my {
background-image: url(./素材/image/icon_07.gif);
background-repeat: no-repeat;
line-height: 36px;
}
</style>
</head>
<body>
<div>
<div class="title">全部分类</div>
<dl>
<dt class="hf">护肤</dt>
<dd>洁画 化妆水 喷雾 美容液 眼霜 眼部精华 眼膜 面膜 面膜贴 水洗面膜 免洗面膜 精华 精油 凝露 乳液 面霜 日霜 晚霜</dd>
<dt class="cz">彩妆</dt>
<dd>卸妆 防晒 阿高 BB霜 粉底 粉饼 睫毛膏 眼影 唇彩 腮红 眼线笔 底妆 遮瑕 蜜粉 唇笔 美甲</dd>
<dt class="xf">香氛</dt>
<dd>男香 女香 小Q装 中性香水</dd>
<dt class="st">身体护理</dt>
<dd>洗发 护发 沐浴 身体乳 手足护理 护手霜 纤体 身体精油 颈部护理 个人护理 卫生用品 脱毛</dd>
<dt class="lh">礼盒套装</dt>
<dd>
护肤套装 身体护理套装 彩妆套装 旅行装 潜水套装 男士套装</dd>
<dt class="mr">美容工具</dt>
<dd>护肤 彩妆 美发 美体 美甲 美容仪器 其他美客工具</dd>
<dt class="my">母婴专区</dt>
<dd>奶粉 尿裤湿巾 母婴洗护</dd>
</dl>
</div>
</body>
</html>
总结:望大佬指正。