模仿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"). ...
随机推荐
- 2.redis配置
转自:http://www.runoob.com/redis/redis-tutorial.html Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 你可以通过 ...
- 塔防游戏 Day2
1. 创建炮塔选择的 UI 使用 UI -> Toggle .注意指定同一 group. 2. 创建炮台的数据类 [System.Serializable] // 序列化 public clas ...
- 当一个项目中同时存在webroot和webcontext时
当一个项目中同时存在webroot和webcontext时,注意一定要删除那些没在使用的.还有要发布其中一个想要的目录到服务器中,具体方法是 选择相应工程-----properties-----de ...
- python 中类的初始化过程
首先元类中的__new__被调用 所有使用该元类的类都会调用一次,不管其有没有初始化,所以元类__new__的作用是修改/验证类的定义 返回的是一个元类的实例,即一个类的定义 元类的__init__由 ...
- hdu2516-取石子游戏 （斐波那契博弈）【博弈 二分查找】
http://acm.hdu.edu.cn/showproblem.php?pid=2516 取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memor ...
- iOS导航栏自由缩放头像效果
效果图: 上代码: 先给一个self.navigationItem.titleView ,然后再放个ImangeView添加到titleView上: UIView *titleView = [[UIV ...
- @property 修饰符
原子性--- nonatomic 特质 在默认情况下,由编译器合成的方法会通过锁定机制确保其原子性(atomicity).如果属性具备 nonatomic 特质,则不使用同步锁.请注意,尽管没有名为“ ...
- 小程序本地资源无法通过 css 获取
background-image:可以使用网络图片,或者 base64,或者使用<image/>标签
- eclipse基础环境配置和svn、maven的配置以及maven的安装
安装eclipse和基础配置 第一步:解压eclipse安装包,直接解压就可以,绿色版安装 第二步:启动eclipse,注意这里的eclipse需要依赖jdk,并且版本需要匹配,否则启动会出 现问题. ...
- 推荐一个好用的sql版本控制和美化工具SQLToolbelt
SQL Toolbelt含Red Gate公司目前出品的所有SQL Server工具和新版本.也就是说,当你使用SQL Server数据库工作时,您可以很方便的获得您所需要的一套强大的工具,包括SQL ...