1.如何设置一个
标签下边框的样式为1px的蓝色虚线？
border-bottom:1px blue dashed;
2.如何计算盒子模型的总尺寸？
盒子总尺寸： border+padding+margin+内容宽/高。
3.在CSS中如何设置一个元素的圆角边框？
border-radius: 50%;元素的宽度和高度必须相同 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
4.如何设置盒子的阴影
box-shadow:inset阴影类型内阴影 x-offsetX轴位移，指定阴影水平位移量 y-offsetY轴位移，用来指定阴影垂直位移量 blur-radius阴影模糊半径阴影向外模糊的模糊范围 color阴影颜色，定义绘制阴影时所使用的颜色;
5.练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
background-color: darkgray;
}
div {
width: 300px;
margin: 0 auto;
background-color: white;
}
h2{
background-color: black;
width: 300px;
color: white;
}
div li {
list-style-type: none;
background-color: white;
}
ul{
background-color: white;
border-bottom: 1px darkgray dashed;
}
p{
background-color: white;
font-weight:bold;
}
</style>
</head>
<body>
<div>
<h2>全部分类</h2>
<p><img src="tu/icon_01.gif"/> 护肤
<ul >
<li> 洁面 化妆水 喷雾 美容液 眼霜</li>
<li> 眼部精华 眼膜 面膜 面膜贴</li>
<li> 水洗面膜 免洗面膜 精华 精油</li>
<li> 凝露 乳液 面霜 日霜 晚霜 </li>
</ul>
</p>
<p><img src="tu/icon_02.gif"/> 彩妆
<ul>
<li> 卸妆 防晒 隔离 BB霜 粉底 粉饼</li>
<li> 睫毛膏 眼影 唇彩 腮红 眼线笔</li>
<li> 底妆 遮瑕 蜜粉 眉笔 美甲</li>
</ul>
</p>
<p><img src="tu/icon_03.gif"/> 香氛
<ul>
<li> 男香 女香 小Q装 中性香水</li>
</ul>
</p>
<p> <img src="tu/icon_04.gif"/> 身体护理
<ul>
<li> 洗发 护发 沐浴 身体乳 手足护理</li>
<li> 护手霜 纤体 身体精油 颈部护理</li>
<li> 个人护理 卫生用品 脱毛 </li>
</ul>
</p>
<p><img src="tu/icon_05.gif"/> 礼盒套装
<ul>
<li> 护肤套装 身体护理套装 彩妆套装 </li>
<li> 旅行装 香水套装 男士套装 </li>
</ul>
</p>
<p><img src="tu/icon_06.gif"/> 美容工具
<ul>
<li> 护肤 彩妆 美发 美体 美甲 </li>
<li> 美容仪器 其他美容工具 </li>
</ul>
</p>
<p><img src="tu/icon_07.gif"> 母婴专区
<ul>
<li> 奶粉 尿裤湿巾 母婴洗护</li>
</ul>
</p>
<p><img src="tu/icon_08.gif"/> 男士专区
<ul>
<li> 洁面 爽肤水 面霜 男香</li>
<li> 眼霜 凝胶 乳液 精华 沐浴 </li>
</ul>
</p>
<p><img src="tu/icon_09.gif"/> 食品保健
<ul>
<li> 瘦身类 保健类 美容类 食品类</li>
</ul>
</p>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
