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

<!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. bzoj1415

    比较简单的数学期望,先预处理出当聪聪在i,可可在j时聪聪往哪个点走然后做dp即可,我用了记忆化搜索实现 type node=record po,next:longint; end; ..,..] of ...

  2. WordPress NOSpam PTI插件‘comment_post_ID’参数SQL注入漏洞

    漏洞名称: WordPress NOSpam PTI插件‘comment_post_ID’参数SQL注入漏洞 CNNVD编号: CNNVD-201309-388 发布时间: 2013-09-24 更新 ...

  3. 【Android 复习】：Android之ViewFlipper（一）

    屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面:一个个性化设置页面. 通过查看Android API文档可以发现, ...

  4. Windows Phone SDK 8.0 安装系统要求

    Windows Phone SDK 8.0 是一个功能齐全的开发环境,可用于构建 Windows Phone 8.0 和 Windows Phone 7.5 的应用和游戏. Windows Phone ...

  5. 【原】关于IPcamera几个问题的思考

    安全性: 1.RTSP连接的权限管理. 2.视频加密(一般采用选择性加密算法,如对运动矢量,量化参数等进行加密.) 3.数字水印技术(用于版权等认证) 稳定性: 1.mobileIP 是用来进行丢包模 ...

  6. Web前端常见问题处理

    1. 浏览器后退按钮 这个在注册或者登陆的时候是一个普遍的问题,登陆之后,跳转到另外一个页面,我的鼠标有两个侧键,是用于前进和后退的,有时候会误点侧键,这个时候页面又会回到之前的登录页面,但事实是用户 ...

  7. Tsinsen A1505. 树（张闻涛） 倍增LCA,可持久化线段树,DFS序

    题目:http://www.tsinsen.com/A1505 A1505. 树(张闻涛) 时间限制:1.0s   内存限制:512.0MB    总提交次数:196   AC次数:65   平均分: ...

  8. Delphi 7下使用Log4Delphi 0.8日志组件

    Log4Delphi是一个开放源码项目,旨在制作用于Borland的Delphi高质量实用的日志套件,是基于Apache Software Foundation的log4j包. 安装:         ...

  9. Area - POJ 1654（求多边形面积）

    题目大意:从原点开始,1-4分别代表,向右下走,向右走,向右上走,向下走,5代表回到原点,6-9代表,向上走,向左下走,向左走,向左上走.求出最后的多边形面积. 分析:这个多边形面积很明显是不规则的, ...

  10. 字符串hash函数

    本文搜集了一些字符串的常用hash函数. 范例1:判断两个单词是否含有相同的字母,此时我们可以用hash做.例如,“aaabb”与"aabb"含有相同的单词.(参考:http:// ...