主要运用的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. docker: useful commands

    docker build -t stock_data_repo_instance24 . docker run -v /opt/log:/opt/log -d -it stock_data_repo_ ...

  2. zoj 1880 - Tug of War

    题目:有n个人分成两组,两组人数差不能超过1,找到两组的人重量之差的最小值. 分析:dp,二维01背包. 由于必须放在两个组中的一组,直接背包全部可到状态, 取出相差不超过 1的最接近 sum/2的值 ...

  3. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  4. 解决华为手机不出现logcat日志的问题

    问题描写叙述:公司一部华为手机在连接Eclipse时在Logcat中看不到相关日志 解决方法:1 进入手机拨号界面2 输入*#*#2846579#*#*3 输入完成后自己主动跳转到測试界面4 依次选择 ...

  5. oracle 创建暂时表

    提交事务后会自己主动清空,不同的事务之间数据隔离 create global temporary table GLS_REPORT_EXPR (   EXPRNO VARCHAR2(30) not n ...

  6. 20170623_oracle_SQL

    ============SQL分类 数据定义语言(DDL):CREATE ALERT DROP TRUNCATE 数据操纵语言(DML):INSERT UPDATE DELETE SELECT 事务控 ...

  7. 异步POST请求解析JSON

    异步POST请求解析JSON 一.创建URL NSURL *url = [NSURL URLWithString:@"http://localhost:8080/MJServer/order ...

  8. Android App调用MediaRecorder实现录音功能的实例【转】

    本文转载自:http://www.jb51.net/article/82281.htm 这篇文章主要介绍了Android App调用MediaRecorder实现录音功能的实例,MediaRecord ...

  9. Modular_exponentiation模幂运算

    https://en.wikipedia.org/wiki/Modular_exponentiation 蒙哥马利(Montgomery)幂模运算是快速计算a^b%k的一种算法,是RSA加密算法的核心 ...

  10. Tarjan Algorithm

    List Tarjan Algorithm List Knowledge 基本知识 基本概念 复杂度 有向图 Code 缩点 Code 用途 无向图 Articulation Point-割顶与连通度 ...