HTML部分：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/moveCss.css" />
</head>

<body>
<nav id="nav">
<section class="center">
<h1 class="logo">LOGO</h1>
<ul class="link">
<li class="active"><a href="###">首页</a></li>
<li><a href="###">资讯</li>
<li><a href="###">视频</a></li>
<li><a href="###">聊天</a></li>
<li><a href="###">联系我们</a></li>
</ul>
</section>
</nav>
<header></header>
<section></section>
<footer></footer>
</body>

</html>

CSS部分：

body,h1,ul{
margin: 0; /*去掉外边距*/
padding: 0; /*去掉内边距*/
}

a{
text-decoration: none; /*所有超链接去掉下划线*/
}

ul{
list-style: outside none none; /*去掉ul样式*/
}

#nav{
width: 100%;
height: 70px;
background-color: #CCCCCC;
}

.center{
width: 1280px;
height: 70px;
margin: 0 auto; /*水平居中*/
}
.logo{
width: 50px;
height: 70px;
float: left;
line-height: 70px;
}
.link{
width: 650px;
height: 70px;
line-height: 70px; /*行间居中*/
float: right;
}
.link li{
width: 100px;
float: left;
text-align: center; /*文字居中*/
}
.link a{
display: block; /*块极化元素*/
}
.link a:hover,
.active{
background-color: #C0C0C0; /*鼠标移入链接时,li的背景色变化*/
}

HTML5+CSS （简易nav设计）的更多相关文章

  1. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  2. Winform开发框架之简易工作流设计(转自 伍华聪博客)

    Winform开发框架之简易工作流设计 一讲到工作流,很多人第一反应就是这个东西很深奥,有时候又觉得离我们较为遥远,确实完善的工作流设计很多方面,而正是由于需要兼顾很多方面,一般通用的工作流都难做到尽 ...

  3. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  4. Web标准：九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

  5. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...

  6. HTML5 & CSS初学者教程（详细、通俗易懂）

    前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...

  7. 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button

    使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...

  8. HTML文档 html,html5,css,css3

    HTML 各种标签及简单应用: http://www.w3school.com.cn 1 <p><p> 2 <br/> 3 <hr/>横线 4 < ...

  9. 矢量化的HTML5拓扑图形组件设计

    HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html ...

随机推荐

  1. WebRTC开发基础（WebRTC入门系列1：getUserMedia）

    什么是WebRTC WebRTC由IETF(Internet Engineering Task Force——互联网工程任务组)和W3C(World Wide Web Consortium——万维网联 ...

  2. [Spring]IOC控制反转和DI依赖注入

    从之前算起到现在接触Spring也已经有几天了,进度也不是很快,就只弄懂了控制反转和依赖注入那么一点东西.然后敲了两个demo 主要是因为之前没有学过,然后网上资源很多但是都不是面向我们初学者的,大多 ...

  3. Hbuilder用ajax连接阿里服务器上的servlet以及注意事项

    Hbuiler连接服务器上的servlet的步骤与连接本地项目中的servlet基本一致,详细内容参考上一片博客:https://www.cnblogs.com/ljysy/p/10294640.ht ...

  4. POJ 2894

    #include<iostream> #define MAXN 1005 using namespace std; int a[MAXN]; int main() { //freopen( ...

  5. POJ 2685

    #include <iostream> #include <string> #define MAXN 26 using namespace std; int _map[MAXN ...

  6. syslog之二：syslog协议及rsyslog服务全解析

    目录: <syslog之一:Linux syslog日志系统详解> <syslog之二:syslog协议及rsyslog服务全解析> <syslog之三:建立Window ...

  7. 【下载】分享一个ida脚本,非常方便

    标 题: [下载]分享一个ida脚本,非常方便作 者: 梁萧时 间: 2013-09-05,13:32:14链 接: http://bbs.pediy.com/showthread.php?t=178 ...

  8. 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装用来定时任务apscheduler库（图文详解）

    不多说,直接上干货!  Anaconda2 里 PS C:\Anaconda2\Scripts> PS C:\Anaconda2\Scripts> pip.exe install apsc ...

  9. 简易的命令行聊天室程序（Winsock，服务器&客户端）

    代码中使用WinSock2函数库,设计并实现了简单的聊天室功能.该程序为命令行程序.对于服务器和客户端,需要: 服务器:创建监听套接字,并按本地主机绑定:主线程监听并接受来自客户端的请求,并为该客户端 ...

  10. Java 8 新特性-菜鸟教程 (4) -Java 8 默认方法

    Java 8 默认方法 Java 8 新增了接口的默认方法. 简单说,默认方法就是接口可以有实现方法,而且不需要实现类去实现其方法. 我们只需在方法名前面加个default关键字即可实现默认方法. 为 ...