【小练习02】CSS--网易产品
要求用css和HTML实现下图效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 298px;
border: 1px solid #cfcfcf;
border-top: 2px solid #206f96;
margin: 0 auto;
font-size: 0; /*解决a标签之间的间隙*/
}
#header{
font: bold 14px/29px '宋体';
color: #252525;
padding-left: 10px;
border-bottom: 1px solid #cfcfcf;
background: url(img/head_bg.gif) repeat-x;
}
a{
text-decoration: none;
font: 12px/25px '宋体';
color: #252525;
margin-right: 10px;
white-space: nowrap;
}
#con1{
padding: 19px 0 14px 50px;
background: url(img/ico_02.gif) no-repeat 16px 25px;
}
#con2{
padding: 13px 0 13px 50px;
background: #f7f7f7 url(img/ico_03.gif) no-repeat 10px 51px;
}
#con3{
padding: 13px 0 13px 50px;
background: url(img/ico_04.gif) no-repeat 15px 25px;
}
#con4{
padding: 13px 0 13px 50px;
background: #f7f7f7 url(img/ico_05.gif) no-repeat 12px 49px;
}
</style>
</head>
<body>
<div id="box">
<div id="header">
网易产品
</div>
<div id="con1">
<a href="#">免费邮</a>
<a href="#">VIP邮箱</a>
<a href="#">企业邮</a>
<a href="#">邮箱大师</a>
<a href="#">易信</a>
</div>
<div id="con2">
<a href="#">梦幻西游2</a>
<a href="#">新大话2</a>
<a href="#">新大话3</a>
<a href="#">藏地传奇</a>
<a href="#">魔兽世界</a>
<a href="#">星际争霸Ⅱ</a>
<a href="#">倩女幽魂2</a>
<a href="#">武魂2</a>
<a href="#">天下3</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="#" style="margin-right: 0;">UU加速</a>
</div>
<div id="con3">
<a href="#">考拉海购</a>
<a href="#" >LOFTER</a>
<a href="#">博客</a>
<a href="#">相册</a>
<a href="#">花田交友</a>
<a href="#">约会</a>
<a href="#">女神</a>
<a href="#">跟帖</a>
<a href="#">抢购</a>
<a href="#">CC语音</a>
<a href="#">BoBo直播</a>
</div>
<div id="con4">
<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>
<a href="#">新闻客户端</a>
<a href="#">大学慕课</a>
</div>
</div>
</body>
</html>
源代码地址：http://download.csdn.net/detail/baidu_37107022/9835707
