要求用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. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

  2. IOS——触摸事件 视图检测和事件传递

    iPhone上有非常流畅的用户触摸交互体验,能检测各种手势:点击,滑动,放大缩小,旋转.大多数情况都是用UI*GestureRecognizer这样的手势对象来关联手势事件和手势处理函数.也有时候,会 ...

  3. node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

    效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...

  4. List<T>对元素的查找。

    要在List<T>中查找特定的元素,可以使用Contains() .IndexOf().LastIndexOf()和BinarySearch()方法.除了 LastIndexOf()是从最 ...

  5. TCP三次握手四次挥手过程及各过程中客户端和服务器端的状态。

    #三次握手 客户端向服务器端发送SYN包,客户端进入SYN_SEND状态 服务器端收到客户端发送的包返回ACK+SYN包,服务器端进入SYN_RECV状态 客户端收到服务器端返回的包再发回ACK包,客 ...

  6. 关于REST的浅显了解

    REST 是一种软件架构风格 1.定义 REST即表述性状态传递(Representational State Transfer) 是一组架构约束条件和原则.是设计风格而不是标准. 满足这些约束条件和 ...

  7. JavaScript中的数据结构及实战系列（2）：栈

    开题: 不冒任何险,什么都不做,什么也不会有,什么也不是. 本文目录 栈介绍: JavaScript实现栈: 栈的应用: 栈介绍: 和队列一样,栈也是一种表结构,但是和队列的"先进先出&qu ...

  8. C语言学习第七章

    今天开始学习指针,指针在C语言中具有很重要的地位,按照老师所说,学C学不好指针跟没学一样,可见指针在C语言中的重要地位.废话不多说,首先我们先要知道什么是指针. 指针:指针是一个变量,它存储另一个对象 ...

  9. poj1990树状数组

    Every year, Farmer John's N (1 <= N <= 20,000) cows attend "MooFest",a social gather ...

  10. [UWP]了解模板化控件(9)：UI指南

    1. 使用TemplateSettings统一外观 TemplateSettings提供一组只读属性,用于在新建ControlTemplate时使用这些约定的属性. 譬如,修改HeaderedCont ...