题目
题目一:电商团购悬浮框(效果图)
结构分析:
图中所示的电商“团购悬浮框”由团购时间、团购种类和返回顶部几个部分并列构成,可以通过无序列表<ul>来定义。
样式分析:
- 为<ul>设置宽度、高度和边框样式。
- 为<li>设置宽、高样式,并通过背景属性定义列表项目符号。
题目二:课程介绍专栏(效果图+代码)
样式分析:
如图所示的课程介绍专栏由标题和课程分类两部分组成。其中课程类别,在排序上不分先后,可以使用无序列表ul进行定义,并且它们都是可以点击的链接,当鼠标移上时,其样式会发生变化,因此需要使用CSS伪类控制链接样式。效果图如下:
当鼠标移动到课程类别时,其链接样式会发生如下变化:
实现代码
题目一代码:
<body>
<ul>
<li>7月30日0:00开团</li>
<li class="item">新品团</li>
<li class="item">尝鲜团</li>
<li class="item">秒杀团</li>
<li class="item">清仓团</li>
<li class="back">返回顶部</li>
</ul>
</body>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
font-size: 18px;
font-family: "微软雅黑";
}
ul{
width: 200px;
height: 270px;
margin: 20px;
border: 3px solid #613e72;
padding: 10px;
}
li{
width: 142px;
height: 40px;
line-height: 40px;
background: url(images/clock.png) no-repeat left center;
padding-left: 40px;
margin: 0 auto 5px;
color: #613e72;
}
.item{
background: #613e72 url(images/icon.png) no-repeat 5px center;
color:#fff;
}
.back{
background: url(images/back.png) no-repeat left center;
}
题目二代码:
<body>
<div class="bg">
<h2></h2>
<ul>
<li>
<a href="#">
<span>印刷流程<br>广告设计<br>企业形象设计</span>
<span class="num">1</span>
<span class="descript">平面设计</span>
</a>
</li>
<li>
<a href="#">
<span>页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
<span class="num">2</span>
<span class="descript">网页设计</span>
</a>
</li>
<li>
<a href="#">
<span>视觉创意设计<br>人机交互原则<br>UI设计规范</span>
<span class="num">3</span>
<span class="descript">UI设计</span>
</a>
</li>
</ul>
</div>
</body>
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
}
body{
font-family: "微软雅黑";
font-size: 14px;
}
a:link,a:visited{
color: #f4f4e1;
text-decoration: none;
}
.bg{
width: 461px;
height: 532px;
background: #ce4d52;
margin: 10px auto;
}
h2{
width: 461px;
height: 95px;
background: url(images/head.png) no-repeat;
border-bottom: 1px solid #8d2327;
}
ul{
width: 461px;
border-top: 1px solid #e68589;
}
a{
display: inline-block;
width: 451px;
height: 103px;
background: url(images/bg.png) no-repeat;
padding: 42px 0 0 10px;
}
a span{
display: inline-block;
width: 110px;
height: 60px;
text-align: right;
}
a .num,a .descript{
vertical-align: middle;
width: 90px;
}
a .descript{
text-align: left;
padding-left: 35px;
}
a:hover{
background: url(images/bg1.png) no-repeat;
}
F a:hover .num{
color: #f4f4e1;
}