要求用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. 简单介绍关于IOS的生命周期过程

    初步了解一下生命周期的过程: 1.通过alloc init 分配内存,初始化controller. 2.loadViewloadView方法默认实现[super loadView]如果在初始化cont ...

  2. CSS样式表初学，比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  3. docker.service启动失败：Unit not found

    docker.service启动失败:Unit not found 版权声明:本文为博主原创文章,未经博主允许不得转载. 背景 因为最近一直在折腾Kubernetes集群版本升级.Docker版本升级 ...

  4. three.js提供的几何体

    1.简单几何体 three.js提供的稍微简单点的几何体包括有:PlaneGeometry(平面).CircleGeometry(圆形).ShapeGeometry(塑性).CubeGeometry( ...

  5. Android -- 从源码解析Handle+Looper+MessageQueue机制

    1,今天和大家一起从底层看看Handle的工作机制是什么样的,那么在引入之前我们先来了解Handle是用来干什么的 handler通俗一点讲就是用来在各个线程之间发送数据的处理对象.在任何线程中,只要 ...

  6. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  7. IE报vuex requires a Promise polyfill in this browser问题解决

    使用Vuex, IE浏览器报错 因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本的浏览器不支持. ##解决方法 第一步: 安装 babel-polyfill . babel-po ...

  8. 忘记了root密码，如何进入系统?

    Issue 问题 忘记了root密码不能进入系统 如何进入系统? 环境 红帽企业版Linux所有版本 解决方法 可以进入单用户模式或者援救模式来改变root密码,如何进入单用户模式取决引导加载程序. ...

  9. hadoop单机环境搭建

    [在此处输入文章标题] Hadoop单机搭建 1. 工具准备 1) Hadoop Linux安装包 2) VMware虚拟机 3) Java Linux安装包 4) Window 电脑一台 2. 开始 ...

  10. JavaScript中return的用法和this的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对this和函数中的return的用法和意思理解的比较模糊,这里写一篇博客跟大家一起探讨一下return和this的 ...