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. linq查询时查询语句中附带多个查询时“已有打开的与此 Command 相关联的 DataReader，必须首先将它关闭”

    主要原因是因为EF采用的 DataReader来进行数据的存储,此时connection使用的是同一个. 例如: list = _tzNewsService.GetAll().Where(w => ...

  2. 让机器说话(文字转美女语音,擅长中英文哦)，大小600K(免费下载)！

    机器人之路的第二小步:说话(文字转语音美女哦),大小600K(免费下载)! 机器人之路的第二小步:说话(文字转语音美女哦),准确率特别高,普通话标准,中英文都可以说,大家可以体验一下,请下载到电脑上在 ...

  3. 转：TCP为什么要3次握手和4次挥手时等待2MSL、 TCP如何保证消息顺序以及可靠性到达

    关于tcp三次握手.四次挥手可以看这里:TCP与UDP的差别以及TCP三次握手.四次挥手 1.TCP为甚要3次握手? 在谢希仁著<计算机网络>第四版中讲“三次握手”的目的是“为了防止已失效 ...

  4. ERR only (P)SUBSCRIBE / (P)UNSUBSCRIBE / PING / QUIT allowed in this context

    封装Redis发布订阅时,SUB时,又想探测具体Channel的状态,于是执行PUBSUB CHNNALES命令,报 ERR only (P)SUBSCRIBE / (P)UNSUBSCRIBE / ...

  5. Elasticsearch 5.X 使用 Docker 运行使用 Head 插件

    ES 5.X 版本后就不支持 elasticsearch-head  以插件方式来安装了. for Elasticsearch 5.x: site plugins are not supported. ...

  6. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  7. Silverlight中使用MVVM(4)—演练

    本来打算用MVVM实现CRUD操作的,这方面例子网上资源还挺多的,毕竟CRUD算是基本功了,因为最近已经开始学习Cailburn框架了,感觉时间 挺紧的,这篇就实现其中的更新操作吧.         ...

  8. Chapter 3 Phenomenon——20

    "All I know is that you weren't anywhere near me — 所有我知道的就是你当时不在我旁边的任何地方—— Tyler didn't see you ...

  9. WPF设置控件获取键盘焦点时的样式FocusVisualStyle

    控件获取焦点除了用鼠标外,可以通过键盘来获取,比如Tab键或者方向键等,需要设置控件获取键盘焦点时的样式,可以通过设置FrameworkElemnt.FocusVisualStyle属性, 因为几乎所 ...

  10. <Think Python>中统计文献单词的处理代码

    def process_line(line, hist):    """Adds the words in the line to the histogram. Modi ...