实验要求
使用css实现下列图片内容
实验过程
实验一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
background-color: antiquewhite;
}
#container{
background-color: white;
width: 200px;
}
#title {
background-color: deeppink;
color: white;
line-height: 40px;
height: 45px;
text-indent: 10px;
font-weight: bold;
}
ul li {
list-style: none;
border-bottom: 1px dashed gray;
font-size: 12px;
padding: 5px;
}
ul li:last-child {
border: none;
}
ul li a {
text-decoration: none;
color: gray;
}
ul li a span {
background: url(image/dot_01.gif) no-repeat;
display: inline-block;
width: 30px;
height: 24px;
padding-left: 9px;
padding-top: 3px;
color: white;
}
ul li:hover {
color: deeppink;
}
ul li:hover a {
color: deeppink;
}
ul li:hover a span {
background: url(image/dot_02.gif) no-repeat;
}
ul li div {
display: none;
text-align: center;
}
ul li:hover div {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="title">大家都喜欢的彩妆</div>
<ul>
<li>
<a href="#">
<span>1</span>ZaXXXXXXXX
</a>
<div>
<img src="image/icon-1.jpg" alt="">
<p>$679 xxxx</p>
</div>
</li>
<li>
<a href="#">
<span>2</span>ZaXXXXXXXX
</a>
<div>
<img src="image/icon-2.jpg" alt="">
<p>$679 xxxx</p>
</div>
</li>
<li>
<a href="#">
<span>3</span>ZaXXXXXXXX
</a>
<div>
<img src="image/icon-3.jpg" alt="">
<p>$679 xxxx</p>
</div>
</li>
<li>
<a href="#">
<span>4</span>ZaXXXXXXXX
</a>
<div>
<img src="image/icon-4.jpg" alt="">
<p>$679 xxxx</p>
</div>
</li>
</ul>
</div>
</body>
</html>
实验二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#container {
border: 1px solid orange;
margin-left: 10px;
width: 300px;
}
ul li {
list-style-type: none;
border-bottom: 1px dotted;
line-height: 50px;
height: 50px;
text-indent: 50px;
font-weight: bold;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: orange;
}
li:nth-child(1) {
background: url(图片素材/icon_01.jpg) no-repeat;
}
li:nth-child(2) {
background: url(图片素材/icon_02.jpg) no-repeat;
}
li:nth-child(3) {
background: url(图片素材/icon_03.jpg) no-repeat;
}
li:nth-child(4) {
background: url(图片素材/icon_04.jpg) no-repeat;
}
li:nth-child(5) {
background: url(图片素材/icon_05.jpg) no-repeat;
}
li:nth-child(6) {
background: url(图片素材/icon_06.jpg) no-repeat;
}
li:nth-child(7) {
background: url(图片素材/icon_07.jpg) no-repeat;
}
li:nth-child(8) {
background: url(图片素材/icon_08.jpg) no-repeat;
}
li:nth-child(9) {
background: url(图片素材/icon_09.jpg) no-repeat;
}
li:nth-child(10) {
background: url(图片素材/icon_10.jpg) no-repeat;
border: none;
}
</style>
</head>
<body>
<div id="container">
<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>
实验三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p{
font-size: 18px;
}
h1 {
color: cadetblue;
}
p span:first-child {
color: red;
text-decoration: underline;
}
p span:nth-child(2) {
color: skyblue;
}
p span:nth-child(3) {
color: orange;
}
p span:nth-child(4) {
color: green;
}
p span:nth-child(5) {
color: orange;
}
</style>
</head>
<body>
<h1>花千骨</h1>
<p>
《花千骨》是由<span>慈文传媒集团</span>制作并发行,
<span>林玉芬、高林豹、梁胜权联合执导,霍建华、赵丽颖</span>
领衔主演,<span>蒋欣、杨烁</span>特别出演,
<span>张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演
的古装玄幻仙侠剧。 该剧改编自fresh果果同名小说,讲述少
女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱
虐恋[1] 。该剧于2014年5月6日开机,9月15日杀青,8月12
日发布中文及英文版的预告片[2] 。 该剧于2015年6月9日起
每周二、周三晚10点在 <span>湖南卫视</span>的钻石独播剧场播出。[3]
2015年7月5日起,该剧播放时间已经改为每周日、周一晚10点。
当天零点在爱奇艺同步更新。[4]
</p>
<img src="img/1.jpg" alt="">
<h1>主要演员</h1>
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
</body>
</html>
实验四
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lightgray;
}
#container {
background-color: white;
color: gray;
margin: 10px 10px;
width: 280px;
}
#title {
background-color: black;
color: white;
line-height: 35px;
text-indent: 20px;
height: 40px;
font-weight: bold;
font-size: 24px;
}
dd {
padding-left: 20px;
border-bottom: 2px dashed gray;
}
dt {
color: black;
font-weight: bold;
text-indent: 25px;
height: 35px;
line-height: 35px;
}
dl dt:nth-of-type(1) {
background: url(Test1图片/icon_01.gif) no-repeat;
}
dl dt:nth-of-type(2) {
background: url(Test1图片/icon_02.gif) no-repeat;
}
dl dt:nth-of-type(3) {
background: url(Test1图片/icon_03.gif) no-repeat;
}
dl dt:nth-of-type(4) {
background: url(Test1图片/icon_04.gif) no-repeat;
}
dl dt:nth-of-type(5) {
background: url(Test1图片/icon_05.gif) no-repeat;
}
dl dt:nth-of-type(6) {
background: url(Test1图片/icon_06.gif) no-repeat;
}
dl dt:nth-of-type(7) {
background: url(Test1图片/icon_07.gif) no-repeat;
}
dl dt:nth-of-type(8) {
background: url(Test1图片/icon_08.gif) no-repeat;
}
dl dt:nth-of-type(9) {
background: url(Test1图片/icon_09.gif) no-repeat;
}
dl dt:nth-of-type(10) {
background: url(Test1图片/icon_10.gif) no-repeat;
}
dd:last-child {
border: none;
}
a {
display: inline-block;
text-decoration: none;
color: gray;
text-indent: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="title">全部分类</div>
<dl>
<dt>护肤</dt>
<dd>
<a href="#">洁面</a> <a href="#">化妆水</a>
<a href="#">喷雾</a> <a href="#">美容液</a>
<a href="#">眼霜</a> <a href="#">眼部精华</a>
<a href="#">眼膜</a> <a href="#">面膜</a>
<a href="#">面膜贴</a> <a href="#">水洗面膜</a>
<a href="#">免洗面膜</a> <a href="#">精华</a>
<a href="#">精油</a> <a href="#">啫喱</a>
<a href="#">凝露</a> <a href="#">乳液</a>
<a href="#">面霜</a> <a href="#">日霜</a>
<a href="#">晚霜</a>
</dd>
<dt>彩妆</dt>
<dd>
<a href="#">卸妆</a> <a href="#">防晒</a>
<a href="#">隔离</a> <a href="#">BB霜</a>
<a href="#">粉底</a> <a href="#">粉饼</a>
<a href="#">睫毛膏</a> <a href="#">眼影</a>
<a href="#">唇彩</a> <a href="#">腮红</a>
<a href="#">眼线笔</a> <a href="#">底妆</a>
<a href="#">遮瑕</a> <a href="#">蜜粉</a>
<a href="#">眉笔</a> <a href="#">美甲</a>
</dd>
<dt>香氛</dt>
<dd>
<a href="#">男香</a> <a href="#">女香</a>
<a href="#">小Q装</a> <a href="#">中性香水</a>
</dd>
<dt>身体护理</dt>
<dd>
<a href="#">洗发</a> <a href="#">护发</a>
<a href="#">沐浴</a> <a href="#">身体乳</a>
<a href="#">手足护理</a> <a href="#">护手霜</a>
<a href="#">纤体</a> <a href="#">身体精油</a>
<a href="#">颈部护理</a> <a href="#">个人护理</a>
<a href="#">卫生用品</a> <a href="#">脱毛</a>
</dd>
<dt>礼盒套装</dt>
<dd>
<a href="#">护肤套装</a> <a href="#">身体护理套装</a>
<a href="#">彩妆套装</a> <a href="#">旅行装</a>
<a href="#">香水套装</a> <a href="#">男士套装</a>
</dd>
<dt>美容工具</dt>
<dd>
<a href="#">护肤</a> <a href="#">彩妆</a>
<a href="#">美发</a> <a href="#">美体</a>
<a href="#">美甲</a> <a href="#">美容仪器</a>
<a href="#">其他美容工具</a>
</dd>
<dt>母婴专区</dt>
<dd>
<a href="#">奶粉</a> <a href="#">尿裤湿巾</a>
<a href="#">母婴洗护</a>
</dd>
<dt>男士专区</dt>
<dd>
<a href="#">洁面</a> <a href="#">爽肤水</a>
<a href="#">面霜</a> <a href="#">啫喱</a>
<a href="#">男香</a> <a href="#">眼霜</a>
<a href="#">凝胶</a> <a href="#">乳液</a>
<a href="#">精油</a> <a href="#">沐浴</a>
</dd>
<dt>食品保健</dt>
<dd>
<a href="#">瘦身类</a> <a href="#">保健类</a>
<a href="#">美容类</a> <a href="#">食品类</a>
</dd>
</dl>
</div>
</body>
</html>
实验五
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,div,ul,li {
margin: 0px;
padding: 0px;
}
#container {
margin: 10px auto;
background: url(图片素材/trendTopBg.gif) 2px 0px no-repeat;
width: 205px;
height: 170px;
}
#title {
margin-top: 20px;
height: 35px;
line-height: 35px;
padding-left: 50px;
background: url(图片素材/bg.gif) 12px 4px no-repeat;
}
#footer {
height: 12px;
width: 12px;
background: url(图片素材/trendEndBg.jpg) 2px 5px no-repeat;
}
ul li {
list-style-type: none;
padding-left: 10px;
background: url(图片素材/dotBg.gif) -4px -9px no-repeat;
}
ul li a {
color: black;
text-decoration: none;
font-family: "宋体";
}
</style>
</head>
<body>
<div id="container">
<div id="title">
孵化小组信息
</div>
<ul>
<li><a href="#">10月30日:java精英榜</a></li>
<li><a href="#">10月30日:java精英榜</a></li>
<li><a href="#">10月30日:java精英榜</a></li>
<li><a href="#">10月30日:java精英榜</a></li>
<li><a href="#">10月30日:java精英榜</a></li>
<li><a href="#">10月30日:java精英榜</a></li>
</ul>
<div id="footer">
</div>
</div>
</body>
</html>