要求用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--网易产品的更多相关文章

  1. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  2. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  5. 前端小技巧：css sprite----V客学院技术分享

    前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无 ...

  6. 02 CSS块级元素和行内元素

    02 CSS块级元素和行内元素 划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关. 要先了解这个 得先了解 什么是容器级别的标签和文本级? 容器级标签 什么是容器级标签? 内部 ...

  7. css通用小笔记02——浮动、清除（三个例子）

    css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...

  8. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  9. 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动

    本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...

随机推荐

  1. Java排序算法之归并排序

    基本思想: 归并排序利用分治法,先将一个序列分成一个个子序列,然后对子序列进行排序,再把有序子序列合并为整体有序序列. 图片来自于http://www.cnblogs.com/shudonghe/p/ ...

  2. vue.js2.0新手笔记（一）——安装

    知道vue很长时间了,一直只是了解,没有深入学习,也没做什么具体的东西.现在有时间了,决定重头好好学一下,就从安装开始吧. 一.安装node vue是用npm安装,npm是node的一个包管理工具,所 ...

  3. LINUX下安装搭建nodejs及创建nodejs-express-mongoose项目

    在Ubuntu中按CTRL+ALT+T打开命令窗口,按下面步骤和命令进行安装即可.添加sublime text 3的仓库.1.sudo add-apt-repository ppa:webupd8te ...

  4. js函数中this的指向

    本文是我个人对this指向的一些理解,如有不足之处,还望大家可以批评指正,在此先谢过了! 首先,我们来回顾一下ES5里函数的几种调用方式: 1⃣️直接调用 foo(); 2⃣️方法调用 obj.foo ...

  5. python 错误之SyntaxError: Missing parentheses in call to 'print'

    SyntaxError: Missing parentheses in call to 'print' 由于python的版本差异,造成的错误. python2: print "hello ...

  6. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  7. unity collider 和 trigger 触发条件

    物体A,物体B(都含有collider组件) collider触发条件:A和B至少一方是  未勾选is Kinematic的rigidbody,且都未勾选 is trigger.当只有一方是rigid ...

  8. 大数据和BI商业智能有何区别？有何相关？

    大数据 ≠BI商业智能,大数据也不是传统商业智能的简单升级. 1.大数据和BI两者的区别 BI(BusinessIntelligence)即商业智能,它是企业数据化管理的一整套的方案,用来将企业中现有 ...

  9. github上传文件

    说来也惭愧,我是最近开始用github,小白一个,昨天研究了一个下午.终于可以上传了,所以今天写点,一来分享是自己的一些经验,二来也是做个记录,万一哪天又不记得了:) 废话不多说,直接来,这次主要介绍 ...

  10. 转：Centos6.5_x86安装Redis。

    Redis是一个高性能的,开源key-value型数据库.是构建高性能,可扩展的Web应用的完美解决方案,可以内存存储亦可持久化存储.因为要使用跨进程,跨服务级别的数据缓存,在对比多个方案后,决定使用 ...