案例：
图片：
参考代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手实践</title>
<style>
*{
margin: 0;
padding: 0;
font-size:14px;
}
dd{
width: 461px;
height: 145px;
margin: -4px;
padding: 0;
background: url("../素材/bg.png");
}
.one,.three{
padding-top:43px;
width:120px;
height:80px;
display: inline-block;
text-align: right;
}
.two{
color: white;
padding-top:39px;
width:90px;
height:80px;
display: inline-block;
text-align: right;
}
a:hover{
color: #ce4d52;
background:url("../素材/bg1.png");
}
a{
color: white;
display: block;
width: 461px;
height: 145px;
text-decoration: none;
}
</style>
</head>
<body>
<dl>
<dt><img src="../素材/head.png" width="457" height="95" alt=""/></dt>
<dd><a href="">
<span class="one">印刷流程<br>广告设计<br>企业形象设计</span>
<span class="two"> <br>1<br> </span>
<span class="three"><br> 平面设计<br> </span></a>
</dd>
<dd><a href="" >
<span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
<span class="two"> <br>2<br> </span>
<span class="three"> <br>网页设计<br> </span></a>
</dd>
<dd><a href="" >
<span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span>
<span class="two"> <br>3<br> </span>
<span class="three"> <br>网页设计<br> </span></a>
</dd>
</dl>
</body>
</html>
更多推荐
HTML5网页基础设计——课程介绍专栏
发布评论