模仿w3c school的示例导航栏
近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。
示例导航栏如下图所示
导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效
做成后效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<style>
li {
/* 去掉标签点，左浮动 */
list-style: none;
float: left;
} a {
/* 将a标签变为块级元素，设置文字大小和背景颜色 */
display: block;
width: 150px;
font-size: 32px;
color: white;
background-color: gainsboro;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid brown;
} a:hover {
/* 鼠标移入后特效 */
font-size: 34px;
font-weight: bold;
background-color: brown;
border-color: lightcoral;
transform: scale(1.1);
transition: all 0.1s;
box-shadow: 0 4px 4px gray;
}
</style>
</head> <body>
<nav>
<ul>
<!-- 使用li标签做导航栏 -->
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">news</a>
</li>
<li>
<a href="#">about</a>
</li>
</ul>
</nav>
</body> </html>
运用这几天的所学知识模仿做了一个，不知道以后学会了以后，标签还是不是这么做的
这个老爷机surface pro3风扇声音是真的大，坐到床上不得不带上耳机，好久不用了又觉得键盘键程真的是短的可怕，可惜没钱，不然换个
模仿w3c school的示例导航栏的更多相关文章
- sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar' ...
- sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃 仅参考）
最新版本我将会放在:http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面,这里不会再做更新 代码: /* *模仿且改进NavigationView *返回 ...
- sencha touch 模仿tabpanel导航栏TabBar的实现代码
这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...
- html 小米商城导航栏示例
1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- 模仿虎牙App 导航栏切换
昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩 <view class="tab_list row"> <view class="tab_item ...
- eclipse Maven Bootstrap 导航栏
1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...
- 自定义iOS7导航栏背景,标题和返回按钮文字颜色
在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
随机推荐
- 跟着太白老师学python day10 函数嵌套， global , nonlocal
函数嵌套: 第一种嵌套方法 def func(): count = 123 def inner(): print(count) inner() func() 第二种嵌套方法 count = 123 d ...
- Keepalived 角色选举
简介: 1.在 Keepalived 集群中,其实并没有严格意思上的主.备节点,虽然可以在 keepalived.conf 中定义 state 选项为 MASTER 状态,但是这并不意味着此节点就一直 ...
- jvm的happens-before原则
提到并发,通常首先想到是锁,其实对共享资源的互斥操作是一方面,在Java中还有一方面是内存的可见性和顺序化,了解JMM的同学可能会更清楚些,内存可见性和顺序性同样非常重要,在这里简单提一下JMM模型, ...
- Elasticsearch-PHP 安装
安装 Elasticsearch-PHP只有三个要求你需要担心: PHP 5.3.9 或更高版本(查看更多信息) Composer ext-curl: Libcurl的PHP扩展 其它的依赖会通过Co ...
- 推荐十几款Firefox web开发插件（转载）
开发工具 Web Developer 1.1.8 https://addons.mozilla.org/en-US/firefox/addon/60by chrispederick The Web ...
- Java服务器工程师任职资格
Java服务器端开发工程师 1.Java服务器端3年以上开发经验 2.至少一个完整游戏项目经验 3.熟练掌握OOA.OOD.OOP 4.掌握常见网游协议开发方法 5.对TCP/IP有深入了解 6.对消 ...
- Go语言的基本类型转换-golang类型转换
简单整理一下Golang的基本类型转换,作为备忘: 1.整形到字符串: var i int = 1 var s string 3. s = strconv.Itoa(i) 或者 s = Format ...
- 143. Reorder List(List)
Given a singly linked list L: L0→L1→…→Ln-1→Ln, reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do th ...
- 785. Is Graph Bipartite?从两个集合中取点构图
［抄题］: Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is ...
- js 数字游戏
在某网站看到一道js题,觉得有点意思 Some numbers have funny properties. For example: 89 --> 8¹ + 9² = 89 * 1 695 - ...