要求用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. Unity C# const与static readonly的区别与联系

    using System; namespace Test { class MainClass { //懒人写法的单例 class Weapon { public static readonly Wea ...

  2. C语言学习第六章

    今天开始尝试改变! 今天要学习函数,一个C语言中的重要组成部分. 首先先聊聊为什么要使用函数?随着学习的深入很多人会发现某段的代码重复使用的几率很大,而如果用一次写一次的话很明显的效率就会比较低,如果 ...

  3. Java设计模式———静态工厂

    上课时yqj2065要求:除了JDK等框架或工具中的类,自己编写的类不得使用new创建对象(Test除外). 据说是因为使用new会涉及到硬编码.(不是很懂) 所以要求用God类利用反射+配置文件来创 ...

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

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

  5. 表单提交音乐文件（php）

    利用点空闲时间来写个博客,最近做的项目中需要表单提交音频的,图片的,各种类型,把它存到数据库里,这里先来说一下音乐文件的表单提交吧,后几天再来更新输入数据库的,先看一下效果 点击浏览 就会出来预览,点 ...

  6. 蓝桥杯-无穷分数-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  7. poj2185 Milking Grid

    题目链接:http://poj.org/problem?id=2185 这道题我看了好久,最后是通过参考kuangbin的博客才写出来的 感觉next数组的应用自己还是掌握的不够深入 这道题其实就是先 ...

  8. JavaScript之onXXXX事件和addEventListener的区别

    JavaScript之onXXXX事件和addEventListener的区别 1.首先介绍两者的用法: 1.1onXXXX的用法:以onclick为例 第一种: obj.onclick = func ...

  9. Eclipse中启动tomcat时内存溢出

    今天在启动自己项目的时候遇到一个永久带(permgen space)内存溢出,查找了很多资料和请教了许多大神,最终才解决问题. 一.什么原因造成了永久带溢出: 1.项目使用了太多的静态变量 2.加载了 ...

  10. Python爬虫学习之获取网页源码

    偶然的机会,在知乎上看到一个有关爬虫的话题<利用爬虫技术能做到哪些很酷很有趣很有用的事情?>,因为强烈的好奇心和觉得会写爬虫是一件高大上的事情,所以就对爬虫产生了兴趣. 关于网络爬虫的定义 ...