有关于锚点的代码实现

有关于锚点的小实现:

<body>
   <p class="nav">
		<a href="#1">第一个</a>
		<a href="#2">第二个</a>
		<a href="#3">第三个</a>
		<a href="#4">第四个</a>
		<a href="#5">第五个</a>
   </p>
   <div id="1">1</div>
   <div id="2">2</div>
   <div id="3">3</div>
   <div id="4">4</div>
   <div id="5">5</div>
</body>

css部分:

<style type="text/css">
	body{
		font-family:arial;
		height:2000px;
	}
	.nav{
		margin:50px auto 0;
		text-align:center;
		background-color:#cfcfcf;
		line-height:40px;
	}
	.nav a{
		display:inline-black;
		padding:5px 10px;
		font-size:14px;
		text-decoration:none;
		color:#fff;
		text-shadow:1px 1px 5px #04acef;
	}
	.nav a:hover{
		background-color:#04acef;
	}
	div{
		line-height:130px;
		box-shadow:1px 1px 10px #ccc;
		font-size:30px;
		text-align:center;
	}
</style>
时间: 2024-08-28 09:06:18

有关于锚点的代码实现的相关文章

ios中关于对锚点的理解

锚点在ios中见到的地方不多,大部分用在动画中. 今天看到一个动画,上面都是关于锚点的,锚点这个概念在两年前看cocos2d得基本概念时接触过,当时没怎么看,今天看到了,就在好好的学一下. 看了一篇blog,是关于锚点的,就借鉴一些上面的图像: cocos2d里采用OpenGL ES坐标系,坐标原点在屏幕左下角.而ios采用的是Quartz 2D坐标系,坐标原点在屏幕左上角. 在cocos2d和ios中分别把视图的坐标点设为(10,10),结果如下: 那么什么是锚点呢?下面以一个例子来说明: 比

CSS的50个代码片段

1.css全局 Html代码   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还有一种就是使用标签的id属性.百度百科就是使用a标签的name属性来实现锚点跳转的. 比如: <a href="#2">波轮洗衣机介绍</a> <a name="2"></a> 但是上种方法使用了一个空标签,而且

HTML中的锚点

锚点是什么?锚点也可以理解成为一种超级链接,只不过它是网页内部的超级链接(注意不是网站内部).比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分.这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找.锚点的使用.锚点从代码上看,仍然是超级链接的一种应用.<a name="A1" id="A1"></a>这样的一个无内容的<a>标签,便是一

jQuery锚点跳转及相关操作

1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还有一种就是使用标签的id属性.百度百科就是使用a标签的name属性来实现锚点跳转的. 比如: <a href=”#2”>波轮洗衣机介绍</a> <a name=”2”></a> 但是上种方法使用了一个空标签,而且有时候会出现锚点失效.所以建议采用id来绑定锚点,

微信小程序基于scroll-view实现锚点定位

代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 基于scroll-view实现锚点定位 2.案例目录结构 二.程序实现具体步骤 1.锚点index.wxml代码 a.导航滚动 <!--pages/scrollnav/scrollnav.wxml--

进入页面跳转到指定锚点

问题 在Vue实例完成之后,将锚点定位到指定元素. 分析: 如何实现,这是一个问题.首先生命周期函数,放在created钩子中,这个时候页面还没有渲染完成,如果进行锚点跳转,很可能就无法跳转到指定位置.因此只能放在生命周期钩子mounted中. 但是,如果直接使用location.hash也是有可能无法正常跳转,因此,要保证正常跳转,就要把跳转锚点的代码放在事件队列的最好,这个时候就要使用setTimeout(() => {}, 0)了. 解决方案: 在生命周期钩子mounted写代码 将跳转锚

web前端之css快速入门

css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2

HTML(入门第一课)

html —— 超文本标记语言 标准的格式 如果出现小的编码错误 系统会自动帮你纠正 htm —— 一些较老的服务器,只有支持后缀为三位 xhtml—— 严格的html 格式 Meta 标签: <meta name="Keywords" content="学生成绩"> 向搜索引擎说明网页的关键字 如果搜索学生成绩 那么就对抓取到这个网页 如果输入其他的则无法搜索到 <meta name="Description" content