【小练习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

【小练习02】CSS--网易产品相关推荐

爆款不是运气：网易产品布局背后的6大标准框架
PMCAFF(www.pmcaff.com):互联网产品社区,是百度,腾讯,阿里等产品经理的学习交流平台.定期出品深度产品观察,互联产品研究首选. 外包大师(www.waibaodashi.com): ...
118.【微信小程序 - 02】
微信小程序-02 (六).小程序基础加强 1.自定义组件-组件的创建与引用 (1).创建自定义组件 (2).引用组件(全局和局部) (3).局部引用组件 (4).全局引用组件 (5).全局引用和局部引 ...
网易产品的数据估算题
网易产品的数据估算题估算今年全国通过网络参加考研培训的人数? 估算今年全国通过网络参加考研培训的人数? 这类题型主要考察: 逻辑思维能力:遇到问题能否清晰有条理. 数据能力:对数据的关注度,是否重视 ...
小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...
“限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享里面有80款小游 ...
成都启之航电商：抖音小店使用效果+性价比产品+直播
现在的电商已经成了很多人创业的选择,想要更好的创业,那么就要了解抖音带货,毕竟直播可以带来更多流量,那么下面就和成都启之航电商一起来了解抖音小店使用效果+性价比产品+直播,希望对广大电商创业者有所帮助 ...
shopee上架接口java_Shopee虾皮店小秘ERP刊登发布产品图文教程
Shopee虾皮店铺开通了,如何进行产品刊登发布呢?其实可以利用各类ERP软件进行刊登或者发布,发布产品的速度很快.但是也有很多刚开始进入Shopee的小白,不清楚如何快速的发布及刊登产品,这里虾皮路 ...
前端小demo_day02_聚光灯(CSS)实现
前端小demo_day02_聚光灯(CSS)实现写在前面前端练习的第三天,今天实现了一个聚光灯的效果,看到这个效果的第一眼的时候,就感觉会用到我们第一天学习到的一个新属性clip-path ,一起 ...
微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS. 1. WXSS:小程序版CSS. WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特 ...

【小练习02】CSS--网易产品

【小练习02】CSS--网易产品相关推荐

最新文章

热门文章