导航条（简单易用的导航）

<!DOCTYPE html>

<html>

<head>

<style>

ul

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li

{

float:left;

}

a:link,a:visited

{

display:block;

width:120px;

font-weight:bold;

color:#FFFFFF;

background-color:#bebebe;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active

{

background-color:#cc0000;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

布局小demo(无表格的首页)

<html>

<head>

<style type="text/css">

div.container

{

width:100%;

margin:0px;

border:1px solid gray;

line-height:150%;

}

div.header,div.footer

{

padding:0.5em;

color:white;

background-color:gray;

clear:left;

}

h1.header

{

padding:0;

margin:0;

}

div.left

{

float:left;

width:160px;

margin:0;

padding:1em;

}

div.content

{

margin-left:190px;

border-left:1px solid gray;

padding:1em;

}

</style>

</head>

<body>

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">

<h2>Free Web Building Tutorials</h2>

<p>At W3School.com.cn you will find all the Web-building tutorials you need,

from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>

<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>

</div>

</body>

</html>

css 导航条 布局的更多相关文章

  1. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  3. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  4. CSS导航条nav简单样式

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

  5. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  6. Bootstrap--响应式导航条布局

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. css导航条的设计

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  8. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  9. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

随机推荐

  1. Oracle 创建用户相关

    表空间 Oracle数据库是通过表空间来存储物理表的,一个数据库实例可以有N个表空间,一个表空间下可以有N张表. 有了数据库,就可以创建表空间. 表空间(tablespace)是数据库的逻辑划分,每个 ...

  2. 【HDOJ】1198 Farm Irrigation

    其实就是并查集,写麻烦了,同样的代码第一次提交wa了,第二次就过了. #include <stdio.h> #include <string.h> #define MAXNUM ...

  3. maven install 跳过 测试 test

    你可能想要配置 Maven 使其完全跳过单元测试. 可能你有一个很大的系统,单元测试需要花好多分钟来完成,而你不想在生成最终输出前等单元测试完成. 你可能正工作在一个遗留系统上面,这个系统有一系列的失 ...

  4. C#下多进程共同读写同一文件

    最近遇到这样一个需求,用C#写一个界面,在界面上实时输出一个日志文件. 实时检测文件变化,以便刷新界面显示,可以用FileSystemWatcher组件,响应Changed事件即可. 关键是在Chan ...

  5. VS发布,TFS邮件设置截图

    vs2012发布截图: TFS邮件设置截图:

  6. HW4.14

    public class Solution { public static void main(String[] args) { int count = 0; char asciiChar; for( ...

  7. mysql常用的一些命令,用于查看数据库、表、字段编码

    1.查看数据库支持的所有字符集         show character set;或show char set; 2.查看当前状态 里面包括当然的字符集设置         status或者\s ...

  8. java数据结构-非线性结构之树

    一.树状图 树状图是一种数据结构,它是由n(n>=1)个有限节点组成的具有层次关系的集合.因其结构看起来想个倒挂的树,即根朝上,叶子在下,故被称为"树". 特点: 1. 每个 ...

  9. (4/18)重学Standford_iOS7开发_框架和带属性字符串_课程笔记

    第四课(干货课): (最近要复习考试,有点略跟不上节奏,这节课的内容还是比较重要的,仔细理解掌握对今后的编程会有很大影响) 本节课主要涉及到Foundation和UIKit框架,基本都是概念与API知 ...

  10. 英文Ubantu系统安装中文输入法

    以前都是安装的中文Ubantu,但是有时候用命令行的时候中文识别不好,会出现错误,所以这次安装了英文版,但是安装后发现输入法不好用,于是就要自己安装输入法. 安装环境为Ubantu13.04 1.卸载 ...