主要运用的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. Yet another Number Sequence 矩阵快速幂

    Let’s define another number sequence, given by the following function: f(0) = a f(1) = b f(n) = f(n ...

  2. MYSQL中有关表的简单操作

    #创建表 CREATE TABLE table02( tid INT, tname VARCHAR(20)); #查看所有表SHOW TABLES; #查看表的结构DESC table01; #修改表 ...

  3. Spring Cloud简介/版本选择/ZooKeeper例子搭建简单说明

    一.什么是Spring Cloud 官方的说法就是Spring Cloud 给开发者提供一套按照一定套路快速开发分布式系统的工具. 具体点就是Spring Boot实现的微服务架构开发工具.它为微服务 ...

  4. 18、Java并发性和多线程-饥饿与公平

    以下内容转自http://ifeve.com/starvation-and-fairness/: 如果一个线程因为CPU时间全部被其他线程抢走而得不到CPU运行时间,这种状态被称之为“饥饿”.而该线程 ...

  5. Hadoop2.0安装之非HA版

    主要步骤跟Hadoop1.0(1.0安装地址)一致,主要在配置这块有更改 安装 下载地址:http://archive.apache.org/dist/hadoop/core/hadoop-2.6.5 ...

  6. PhoneGap3+版本号的安装、配置和使用[图]

    如若转载.请注明博文地址及原作者(RisingWonderland). PhoneGap2+版本号最高为2.9.1,从3+版本号開始,PhoneGap官方不再提供下载安装包,须要在联网状态下.通过No ...

  7. linux系统下用到的小知识点积累

    preface:在ubuntu下做事情,在终端下执行一些命令.或者在vim里面做一些操作.自然而然须要用到一些小知识点,没有怎么系统地看<鸟哥的菜>,基本上是遇到了什么问题想要实现什么功能 ...

  8. framework/base子目录

    framework/base下各子目录 ~/src/aosp_master/frameworks $ tree base/ -L 1 base/ ├── Android.bp ├── Android. ...

  9. sql server中数据约束相关的查询

    根据表名查找数据约束 SELECT * FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS WHERE TABLE_NAME = 'CMS_EventLog'; SEL ...

  10. go语言笔记——指针，和C用法以及本质一样，但不支持指针的+-运算！

    4.4.2 值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值. Go 语言的取地址符是 &,放到一个 ...