CSS-home.htm

2019独角兽企业重金招聘Python工程师标准>>>

<html5>
<head>
</head>
<style type="text/css">
/*
Highlighting the current page in a nav bar
*/
/*
To highlight the current page, you simply target the following combination of IDs and class
names:
*/
#home .nav .home a,
#about .nav .about a ,
#news .nav .news a,
#products .nav .products a,
#services .nav .services a {
background-position: right bottom;
color: #fff;
cursor: default;
}
/*
When the user is on the home page, the nav item with a class of home will display the selected
state, whereas on the news page, the nav item with the class of news will show the selected state.
For added effect, I have changed to cursor style to show the default arrow cursor. That way, if
you mouse over the selected link, your cursor will not change state and you won’t be tempted to
click a link to a page you are already on.
*/
</style><body>
<!--In the previous vertical nav bar example, I used a class to indicate the current page. For small
sites with the navigation embedded in the page, you can simply add the class on a page-by-page
basis. For large sites, there is a good chance that the navigation is being built dynamically, in
which case the class can be added on the back end. However, for medium-sized sites, where the
main navigation doesn’t change, it is common to include the navigation as an external file. In
these situations, wouldn't it be good if there were a way to highlight the page you are on, without
having to dynamically add a class to the menu? Well, with CSS there is.
This concept works by adding an ID or a class name to the body element of each page, denoting
which page or section the user is in. You then add a corresponding ID or class name to each item
in your navigation list. The unique combination of body ID and list ID/class can be used to
highlight your current section or page in the site nav.
Take the following HTML fragment as an example. The current page is the home page, as
indicated by an ID of home on the body. Each list item in the main navigation is given a class
name based on the name of the page the list item relates to.-->
<body id="home">
<ul class="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
</body>
</html5>

转载于:https://my.oschina.net/LosersAFC/blog/213262

CSS-home.htm相关推荐

(四)学习CSS之position、bottom、left、right和top属性
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...
纯HTML+CSS带说明的黄色导航菜单
HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...
firework 怎么导出html,由Fireworks导出的htm生成imageset文件
在游戏制作中,需要将界面图形元素保存到一幅png图像中,然后在xml格式的imageset文件中指出每个元素的位置和大小,方便游戏程序加载使用. 这里将Fireworks切成很多小的图层导出为CSS的 ...
css取li的点,CSS 去掉点li 的点
转:http://blog.sina.com.cn/s/blog_63b13c300100jyek.html 方法一: 百度雅虎新浪谷歌方法二: li {list-style-type:non ...
【VS实践】如何在vs中自动添加注释
前言: 之前看别人博客关于在vs中添加类注释的,今天自己看到牛腩里的讲述,也就跟着试了试,牛腩有点out了,跟着他的视频,自己还给建错了,找了找原因,也意外的开辟了新大陆! 步骤: 1. 我的vs是2 ...
yum安装nginx+PHP+Mysql
#mkdir /var/www/yum_repo 1.nginx安装: 在http://nginx.org/en/linux_packages.html#stable中下载CentOSX对应版本的rp ...
多学一点（八）——LNMP环境搭建
在之前的博客中虽然已经总结过了 MySQL 和 Apache 的安装.配置,但分开总结总是不太系统,这篇博客将会对LNMP(Linux + Nginx + MySQL +PHP)做一个比较系统的总结. ...
Linux -nginx-源码安装
1.wget http://nginx.org/download/nginx-1.14.0.tar.gz 2.tar zxvf nginx-1.14.0.tar.gz 查看源码文件:/nginx/sr ...
LNMP_ 配置文件
vim /usr/local/nginx/conf/nginx.conf //清空原来的配置,加入如下内容: user nobody nobody; worker_processes 2; error ...
LNMP之 nginx 启动脚本和配置文件
因为 nginx 启动不方便,所以我们需要自已手动来编译一个nginx 的启动脚本 [root@LNMP ~]# vim /etc/init.d/nginx #加入以下内容 #!/bin/bash# ...

CSS-home.htm

CSS-home.htm相关推荐

最新文章

热门文章