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

<!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. python-urllib2模块

    参考: http://blog.csdn.net/wklken/article/details/7364390 http://hankjin.blog.163.com/blog/static/3373 ...

  2. vs2005 ，2008,2010中引入app.manifest（即c#程序在win7下以管理员权限运行方法）

    打开VS2005.VS2008.VS2010工程,查看工程文件夹中的Properties文件夹下是否有app.manifest这个文件:如没有,按如下方式创建:鼠标右击工程在菜单中选择“属性”,点击工 ...

  3. -_-#【video】

    视频 HTML5 视频 HTML5的视频格式之争 移动端HTML5<video>视频播放优化实践 后备

  4. 【转】Xcode7.1环境下上架iOS App到AppStore 流程 (Part 一)

    原文网址:http://www.cnblogs.com/ChinaKingKong/p/4957682.html 前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前 ...

  5. easyui datagrid pagesize设置无效

  6. Flash正则例子

    var jack:String = "zhuhai"; var arr:Array = ["23", "4", "67" ...

  7. C# Sending data using GET or POST ZZ

    In this short article, I'll show you how to send data to a website from a C# application using GET o ...

  8. sql递归函数（自定义函数递归查找） 能返回递归的层次

    实现效果图如下: 创建表: create table t_tree ( id int IDENTITY(1,1), parentid int, name varchar(10) ) go 插入测试数据 ...

  9. HTTPS、SSL与数字证书介绍

    在互联网安全通信方式上,目前用的最多的就是https配合ssl和数字证书来保证传输和认证安全了.本文追本溯源围绕这个模式谈一谈. 名词解释 HTTPS:在HTTP(超文本传输协议)基础上提出的一种安全 ...

  10. Java学习——数据类型【2】

    1. 对象与类 对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象的行状态和行为. 2. 类可以包含的变量 类型 局部变量 成员变量 类变量(静态变量) 定义位置 方法.或语句块中 类中, ...