要求用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. 读《effective C++》2

    条款03:尽可能使用const(Use const whenever possible) 1.const == 奇妙的事 const的一件奇妙的事是,他允许你定义一个约束,(告诉编译器,这是一个“不该 ...

  2. 使用validator-api来验证spring-boot的参数

    作为服务端开发,验证前端传入的参数的合法性是一个必不可少的步骤,但是验证参数是一个基本上是一个体力活,而且冗余代码繁多,也影响代码的可阅读性,所以有没有一个比较优雅的方式来解决这个问题? 这么简单的问 ...

  3. Mvc Ajax提交多个checkbox，也说绑定和提交select

    Ajax Mvc的 checkbox 后端必须是List<T> ,T是ID类型,一般int 或guid 模型必须初始化List<T> 防止客户端没有提交任何值时空引用的问题,如 ...

  4. 深入tornado中的ioLoop

    本文所剖析的tornado源码版本为4.4.2 ioloop就是对I/O多路复用的封装,它实现了一个单例,将这个单例保存在IOLoop._instance中 ioloop实现了Reactor模型,将所 ...

  5. Android 如何本地加载pdf文件

    大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上 ...

  6. JS组件系列——自己动手封装bootstrap-treegrid组件

    前言:最近产品需要设计一套相对完整的组织架构的解决方案,由于组织架构涉及到层级关系,在表格里面展示层级关系,自然就要用到所谓的treegrid.可惜的是,一些轻量级的表格组件本身并没有自带树形表格的功 ...

  7. HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象

    [前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...

  8. hdu2819二分图匹配

    Given an N*N matrix with each entry equal to 0 or 1. You can swap any two rows or any two columns. C ...

  9. poj3304计算几何直线与线段关系

    Given n segments in the two dimensional space, write a program, which determines if there exists a l ...

  10. 2017TSC世界大脑与科技峰会，多角度深入探讨关于大脑意识

    TSC·世界大脑与科技峰会是全世界范围内的集会,多角度深入探讨关于大脑意识体验来源这一根本话题,我们是谁,现实的本质是什么,我们所处宇宙空间的本质为何.该峰会由亚利桑那大学意识研究中心主办. 会议时间 ...