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. flask框架--模板

    今天又是一个精彩又无聊的一天,不过随着知识的缓慢的增加我的内心也充满了干劲,虽然前进的有些缓慢 但我不会这么容易放弃的,一定要相信自己,不要灰心 好了 ~ 不说废话了 , 我自己听的都有些受不了了 . ...

  2. 《Python编程从入门到实践》--- 学习过程笔记(2)变量和简单数据类型

    一.变量无需声明 二.变量命名规则 (1)变量名只能包括字母.数字和下划线: (2)变量名不能包含空格: (3)变量名不能使用Python关键字和函数名(保留字不可以做变量名); (4)简短易懂,清晰 ...

  3. 【xsy2818】 最近点 动态树分治+可持久化线段树

    题目大意:给你一颗n个节点的树,最初点集S为空. 有m次操作:往当前点集S中加入/删除一个点,询问点x至集合S中任意点的最小距离,回到第t次修改点集的操作后的状态. 数据范围:$n,m≤10^5$ 我 ...

  4. POJ 2840

    #include<iostream> #include<stdio.h> #include<string> using namespace std; int mai ...

  5. vim 常用命令（一）特殊删除

    dd 可以删除光标当前行: ndd  n代表行数,3dd,删除从当前光标往下3行: di 删除在指定符号内的内容,如 空号,引号内: dt 删除当前光标到指定符号的内容

  6. Linux的僵尸进程及其解决方法

    1. 产生原因: 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / waitpid)他,那么他将变成一个僵尸进程.通过ps命令查看其带有defunct的标志.僵尸进程是一个 ...

  7. mysql索引总结(2)-MySQL聚簇索引和非聚簇索引

    mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...

  8. （转）第十一篇：springboot集成swagger2，构建优雅的Restful API

    声明:本部分内容均转自于方志明博友的博客,因为本人很喜欢他的博客,所以一直在学习,转载仅是记录和分享,若也有喜欢的人的话,可以去他的博客首页看:http://blog.csdn.net/forezp/ ...

  9. Java Collection 学习

    定义:Java 作为面向对象语言,对象的操作必比然是重中之重.要操作一个对象容易,如果需要存储多个对象,则需要一个容器,存储多个对象可以使用数组,但是数组的长度是不可变的.所以有了集合的概念.Coll ...

  10. Android UI相关开源项目库汇总

    最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...