HTML5+CSS （简易nav设计）
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设计）的更多相关文章
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- Winform开发框架之简易工作流设计(转自 伍华聪博客)
Winform开发框架之简易工作流设计 一讲到工作流,很多人第一反应就是这个东西很深奥,有时候又觉得离我们较为遥远,确实完善的工作流设计很多方面,而正是由于需要兼顾很多方面,一般通用的工作流都难做到尽 ...
- CSS表单设计
今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...
- Web标准：九、CSS表单设计
Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<i ...
- HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘
<html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...
- HTML5 & CSS初学者教程（详细、通俗易懂）
前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现 ...
- 使用 HTML5 & CSS 实现一个自定义开关按钮 switch button
使用 HTML5 & CSS 实现一个自定义开关按钮 switch button switch button <div class="switch"> < ...
- HTML文档 html,html5,css,css3
HTML 各种标签及简单应用: http://www.w3school.com.cn 1 <p><p> 2 <br/> 3 <hr/>横线 4 < ...
- 矢量化的HTML5拓扑图形组件设计
HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html ...
随机推荐
- c++11中关于std::thread的join的思考
c++中关于std::thread的join的思考 std::thread是c++11新引入的线程标准库,通过其可以方便的编写与平台无关的多线程程序,虽然对比针对平台来定制化多线程库会使性能达到最大, ...
- [EXP]WordPress Core 5.0 - Remote Code Execution
var wpnonce = ''; var ajaxnonce = ''; var wp_attached_file = ''; var imgurl = ''; var postajaxdata = ...
- Excel的合并解析
相关文件我放到如下链接: http://files.cnblogs.com/files/DreamDrive/Excel%E5%90%88%E5%B9%B6%E8%A7%A3%E6%9E%90.rar ...
- (转)IBM AppScan 安全漏洞问题修复（.net）
原文:https://www.cnblogs.com/anngeiBKY/p/4952269.html 按问题类型分类的问题 使用 SQL 注入的认证旁路2 已解密的登录请求3 登录错误消息凭证枚举1 ...
- 关于一点儿对仓储(Repository)的理解
仓储(Repository) 内容来源于dudu的 关于Repository模式一文 Repository是一个独立的层,介于领域层与数据映射层(数据访问层)之间.它的存在让领域层感觉不到数据访问层的 ...
- redis的高级事务CAS(乐观锁)
Optimistic locking using check-and-set(乐观锁) 乐观锁介绍:watch指令在redis事物中提供了CAS的行为.为了检测被watch的keys在是否有多个cli ...
- hao643.com劫持（修改快捷方式跳转至hao123.com）
>症状:所有浏览器快捷方式,都被加上尾巴,例如IE的:"C:\Program Files\Internet Explorer\iexplore.exe" http://hao ...
- chromium浏览器开发系列第三篇：chromium源码目录结构
上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...
- 图片按日期分类和查看程序（WPF开发）(附源码)
手机方便了我们的生活,可以随时随地拍摄.越来越多的图片堆砌在电脑里.看到杂乱无章的图片,实在感到头痛.手动整理太复杂.基于此,我写了一个小程序,可以将图片按日期整理和查看.按日期查看图片,回忆过去的点 ...
- Spring Boot使用JWT实现系统登录验证
简介 什么是JWT(Json Web Token) jwt是为了在网络应用环境间传递声明而执行的一种基于json的开放标准.该token被设计紧凑且安全的,特别适用于SSO场景.jwt的声明一般被用来 ...