主要运用的dispaly将a变成行内块，再用padding撑开宽度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .nav {

            height: 40px;

            background: #eee;

            border-top: 3px solid orange;

            border-bottom: 1px solid #aaa;

        }

        .nav-con {

            width: 1000px;

            height: 40px;

            margin: 0 auto;

        }

        a {

            font: 12px/40px 微软雅黑; /*40px=>line-height:40px;*/

            color: #333;

            display: inline-block;

            height: 40px;

            text-decoration: none;

            padding: 0 12px;

        }

            a:hover {

                background: #999;

            }

    </style>

</head>

<body>

    <div class="nav">

        <div class="nav-con">

            <a href="#">设为首页</a>

            <a href="#">手机新浪网</a>

            <a href="#">移动客户端</a>

        </div>

    </div>

</body>

</html>

CSS——新浪导航demo的更多相关文章

  1. 豪情-CSS解构系列之-新浪页面解构-01

    目录: 一. 新浪的布局特点 二. 内容细节的特点 三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...

  2. Swift轻松入门——基本语法介绍和详细地Demo讲解（利用WebView打开百度、新浪等网页）

    转载请务必注明出处(all copyright reserved by iOSGeek) 本文主要分为两个部分,第一部分介绍Swift的基本语法,第二部分讲解一个利用WebView来打开百度.sina ...

  3. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  4. Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

    UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现 今天蓝老师要讲的是关于新浪新闻侧滑界面的实现.先看看原图: 如图所示,这种侧滑效果以另一种方式替 ...

  5. jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...

  6. Android仿新浪新闻SlidingMenu界面的实现 .

    先看看原图: 如图所示,这种侧滑效果以另一种方式替代了原先tab导航的那种用户体验方式 给人耳目一新的感觉,现已被广大知名应用所效仿,如新浪新闻,网易新闻,人人网等 那么这种效果该如何实现呢?那就需要 ...

  7. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 用极简方式实现新浪新版本特性展示效果--view的图片轮播

    在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...

  9. 新浪SAE中文分词接口

    最近发现新浪SAE平台上竟然也提供分词功能,分词效果也还不错,由新浪爱问提供的分词服务,研究了一番,做了一个简易版的在线调用接口(get方式,非post) 官网说明:http://apidoc.sin ...

随机推荐

  1. [bzoj 1041][HAOI2008]圆周上的整点（枚举）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 分析:实质上是求(a,b,c)勾股数的个数,其中c是确定的. 对于勾股数有一组通式: a ...

  2. Eclipse改动Project的文件夹位置

    Eclipse打开时会要求指定一个workspace, 在这个workspace中能够创建多个相关的或无关的Project, 这些Project的文件夹位置信息存储在: <path to wor ...

  3. Linux下C++访问MySQL数据库

    由于想要开始了解并学习用LAMP进行web开发,所以昨晚我在Fedora上安装了MySQL,学习了MySQL的几个常用命令.想着在学习进行web开发(PHP访问数据库)之前,先用我熟悉的C++连接数据 ...

  4. JAVA 网络长短连接

       作为java的刚開始学习的人,看了网上的资料后,关于java的长短连接,感觉理解的不是非常深刻.结合自己的学习和网上的资料整理例如以下.不对之处请大家批评指正.                  ...

  5. IPV6相关RFC文档

    1. 通用 IPv6的通用RFC和Internet草案 RFC# 类 标题 1752 标准记录 对IP下一代协议的建议 1924 资料 IPv6地址的压缩表示法 2851 标准记录 Internet网 ...

  6. Android资源文件命名规范

    在复杂Android应用的开发中,资源文件的规范命名非常重要,能帮助设计人员和开发人员减小沟通成本.资源的名字尽量力求准确,可以适当长一些,但换回的价值是值得的. 关于WCC的Android开发,资源 ...

  7. Angular常用标记

    (如果没有特别指明,则所有的HTML元素都支持该标记) (如果没有特别指明,则 AngularJS 指令不会覆盖原生js的指令) 1.数据绑定类: 1.插值语法:{{}} 2.标签内容绑定:ng-bi ...

  8. 如何利用UDP协议封装一个数据包

    在如何封装一个数据包上,是一个非常细致的问题,而利用UDP协议来封装的话,是比较简单,让我们一步步来分析典型的TCP/IP协议.一般来说一个典型的一个数据包,包括以太网MAC头+网络层IP数据头+传输 ...

  9. 关于三星手机调用相机返回后activity被回收的问题

    今天遇到个问题很蛋疼啊,别的手机没问题,唯独三星机型的手机跳转到相机之后,回来activity没了.这个或许是三星内部回收机制的关系,因为相机打开之后消耗会比较大, 所以后面的进程都给暂时回收掉了,加 ...

  10. 洛谷 P3398 仓鼠找sugar —— 树链剖分

    题目:https://www.luogu.org/problemnew/show/P3398 树链剖分一下,路径就变成线段树上的几个区间: 两条路径相交就是线段树上有区间相交,所以在相应位置打个标记, ...