主要运用的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. Linux command2

    . CentOS 想查看哪个port开了,却提示命令无效 # yum -y install net-tools 2. How to install "wget" command i ...

  2. Cocoa -- 添加和移除开机启动项

    一 写plist到~/Library/LaunchAgents/ 目录下 // 配置开机默认启动 -(void)installDaemon{ NSString* launchFolder = [NSS ...

  3. Junit4使用总结

    常用注解 @Before:初始化方法,在任何一个测试方法执行之前,必须执行的代码. @After:释放资源,在任何一个测试方法执行之后,需要进行的收尾工作.   @Test:测试方法,表明这是一个测试 ...

  4. Java设计模式补充：回调模式、事件监听器模式、观察者模式（转）

    一.回调函数 为什么首先会讲回调函数呢?因为这个是理解监听器.观察者模式的关键. 什么是回调函数 所谓的回调,用于回调的函数. 回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数. ...

  5. 微信最新开源的PhxSQL

    在编者看到“[重磅]微信开源PhxSQL:高可用.强一致的MySQL集群”时,由衷赞叹,这等造福广大DBA及运维同仁的事情,真心赞.腾讯及微信的开放,真的不是说说而已. 本文由资深DB从业者撰写,相信 ...

  6. Pixhawk---超声波模块加入说明（I2C方式）

    1 说明   在Pixhawk的固件中,已经实现了串口和i2c的底层驱动,并不须要自己去写驱动.通过串口的方式加入超声波的缺点是串口不够.不能加入多个超声波模块,此时须要用到i2c的方式去加入了.在P ...

  7. oracle 存储过程使用动态sql

    Oracle存储过程使用动态SQL 有两种写法:用 DBMS_SQL 或 execute immediate,建议使用后者. DDL和DML (注意DDL中可以用拼接字符串的方法用来create ta ...

  8. Mongo性能测试-python脚本

    单线程 500+w条数据,插入时间:1小时,13分钟. 脚本: [root@10 hurl]# cat insert-mongo2.py #!/usr/bin/env python #coding=u ...

  9. 尊重百度的api语音合成规则

    屏幕显示字幕内容与形式 和  字幕的播放时长分离 : 去除标点符号的影响 # 设置分句的标志符号:可以根据实际需要进行修改 # cutlist = ".!?".decode('ut ...

  10. ChromeDriver only supports characters in the BMP

    ChromeDriver only supports characters in the BMP