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. Django中安装搜索引擎方法。

    全文检索 全文检索不同于特定字段的模糊查询,使用全文检索的效率更高,并且能够对于中文进行分词处理. haystack:全文检索的框架,支持whoosh.solr.Xapian.Elasticsearc ...

  2. Xamarin中 ios 修改Assets.xcassets 文件后 无法调试和编译

    根本问题是因为 vs项目里面 没有包含 如果提示找不到对应png 请检查 iOS 项目卸载后 编辑 并找到对应文件检查 <ImageAsset Include="Assets.xcas ...

  3. 如何在Ubuntu 14.04上利用jexus搭建支持php+mysql数据库的网站服务

      准备部分:sudo apt-get update          sudo apt-get install unzip -y第一部分:安装jexus    在终端运行以下命令    cd /tm ...

  4. 集合框架_DAY17

    1:五种数据结构: 数组:长度固定,有序,查找方便   链表:添加删除方便   栈:先进后出    队列:先进先出   树结构:完成排序动作 2:泛型(了解) (1)是一种把明确数据类型的工作推迟到创 ...

  5. java.io.IOException: Stream closed解决办法

    1.出现这个bug的大体逻辑代码如下: private static void findMovieId() throws Exception { File resultFile = new File( ...

  6. 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码（博主强烈推荐）

    前言   其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...

  7. 全网最详细的再次或多次格式化导致namenode的ClusterID和datanode的ClusterID之间不一致的问题解决办法（图文详解）

    不多说,直接上干货! java.io.IOException: Incompatible clusterIDs in /opt/modules/hadoop-2.6.0/data/tmp/dfs/da ...

  8. Linux 各种运算符

    目录 - 算术运算符 - 关系运算符 - 逻辑运算符 - 按位运算符 - 文件测试符 - 算术运算符 算术运算符,常用的有+.-.*./.%.++.--.** + - 加法运算符 [root@www ...

  9. Visual Studio 2017 取消 break mode

    用 Visual Studio 2017 (以下简称 VS 2017) 运行程序,程序出错后,只是进入中断模式,仅显示 The application is in break mode而没有像 VS ...

  10. 并发编程之 CyclicBarrier 源码分析

    前言 在之前的介绍 CountDownLatch 的文章中,CountDown 可以实现多个线程协调,在所有指定线程完成后,主线程才执行任务. 但是,CountDownLatch 有个缺陷,这点 JD ...