模仿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"). ...
随机推荐
- leetcode572
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
- Bootstrap 与 Jquery validate 结合使用——简单实现
首先必须引入的JS和CSS <script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.mi ...
- Excel 数字处理
说明 最近在做一个比较小型的网站,需要批量导入注册用户.用户的信息写在一张excel表格里面. 所以就需要读取excel.所以就记录下遇到的问题,以及以后查看. 相关技术 使用的POI解析Excel需 ...
- mysql存储过程(procedure)
#创建带参数的存储过程 delimiter // ),out p int) begin ; end // delimiter call pro_stu_name_pass(@n,@p); select ...
- Lamber算法 & SurfaceShader自定义光照
[SurfaceShader自定义光照] 1.在pragma中添加自定义光照函数名: #pragma surface surf BasicDiffuse 2.实现自定义光照函数.下面就是Lamber ...
- 高性能Web服务器Nginx的配置与部署研究（15）Upstream负载均衡模块
Nginx 的 HttpUpstreamModule 提供对后端(backend)服务器的简单负载均衡.一个最简单的 upstream 写法如下: server backend1.example.co ...
- 274. H-Index论文引用量
［抄题］: Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...
- spring+springmvc+mybatis+redis实现缓存
先搭建好redis环境 需要的jar如下: jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:330 ...
- Tftp上传、下载
上传 tftp -g -r filename serverip 下载 tftp -p -l filename serverip
- LA4794 分享巧克力
Sharing Chocolate Chocolate in its many forms is enjoyed by millions of people around the world ever ...