HTML和CSS中的锚点如何使用?
最编程
2024-08-02 14:47:29
...
命名锚点的作用:在同一页面内的不同位置进行跳转。
通俗理解:可以通过锚点跳转到页面中的其他位置,当页面过长时,可以将页面分为几部分,通过顶部设置一些锚点,点击可以方便浏览者快速定位到相应的位置。
制作锚标记:
1)给元素定义命名锚记名
语法:<标记 id="命名锚记名"> </标记>
2)命名锚记连接
语法:<a href="#命名锚记名称"></a>
注意:
- href属性的属性值最前面要加**#**(href="#id名)
- 在要跳转到的位置的标签中添加的是id属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 自适应窗口高度 */
html,
body {
height: 100%;
}
p {
height: 100%;
text-align: center;
line-height: 600px;
font-size: 100px;
font-family: "宋体";
color: #fff;
}
p:nth-of-type(1) {
background-color: rgb(32, 59, 4);
}
p:nth-of-type(2) {
background-color: rgb(11, 10, 31);
}
p:nth-of-type(3) {
background-color: rgb(77, 83, 20);
}
p:nth-of-type(4) {
background-color: rgb(58, 9, 34);
}
a {
display: block;
width: 100px;
height: 40px;
border: 1px solid rgb(105, 36, 36);
text-align: center;
line-height: 40px;
font-size: 14px;
color: #fff;
margin-bottom: 10px;
}
div {
position: fixed;
right: 0;
top: 200px;
}
</style>
</head>
<body>
<!-- 1.作用:同一页面不同位置快速跳转 -->
<!-- 2.语法 -->
<div>
<a href="#p1">春晓</a>
<a href="#p2">悯农</a>
<a href="#p3">静夜思</a>
<a href="#p4">鹅鹅鹅</a>
</div>
<p id="p1">
春眠不觉晓,处处闻啼鸟
</p>
<p id="p2">
锄禾日当午,汗滴和下土
</p>
<p id="p3">
窗前明月光,地上鞋两双
</p>
<p id="p4">
白毛浮绿水,红掌拨清波
</p>
</body>
</html>
跳转到另一个页面的固定位置
<a href="practice.html#one"></a>
<!-- 跳转到practice.html页面中id名为one的标签的位置-->
小练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子相册</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 421px;
height: 325px;
border: 1px solid #CDCDCD;
background-color: #666666;
position: relative;
margin: 200px auto;
}
h1{
color: #fff;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 18px;
width: 100%;
}
.box2{
width: 280px;
height: 196px;
border: 1px solid #fff;
margin-left: 20px;
overflow: hidden;
}
.box3{
width: 80px;
height: 196px;
position: absolute;
right: 0px;
top: 48px;
overflow: auto;
/* overflow-y:scroll;也可以 */
}
.box3 img {
vertical-align: top;
/* 用来解决图片把外层容器多撑开3px的问题 */
}
.box3 a{
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="box1">
<h1>电子相册</h1>
<div class="box2">
<!-- 快捷键生成:img[src="../images/mn$.ipg"]*8 按回车 -->
<img src="../images/mn1.jpg" alt="" id="photo1">
<img src="../images/mn2.jpg" alt="" id="photo2">
<img src="../images/mn3.jpg" alt="" id="photo3">
<img src="../images/mn4.jpg" alt="" id="photo4">
<img src="../images/mn5.jpg" alt="" id="photo5">
<img src="../images/mn6.jpg" alt="" id="photo6">
<img src="../images/mn7.jpg" alt="" id="photo7">
<img src="../images/mn8.jpg" alt="" id="photo8">
</div>
<div class="box3">
<!-- 快捷键生成:a[href="#photo$"]*8>img[src="../images/c$.ipg"] 按回车 -->
<a href="#photo1"><img src="../images/c1.jpg" alt=""></a>
<a href="#photo2"><img src="../images/c2.jpg" alt=""></a>
<a href="#photo3"><img src="../images/c3.jpg" alt=""></a>
<a href="#photo4"><img src="../images/c4.jpg" alt=""></a>
<a href="#photo5"><img src="../images/c5.jpg" alt=""></a>
<a href="#photo6"><img src="../images/c6.jpg" alt=""></a>
<a href="#photo7"><img src="../images/c7.jpg" alt=""></a>
<a href="#photo8"><img src="../images/c8.jpg" alt=""></a>
</div>
</div>
</body>
</html>
上一篇: 实操动态锚点,避开常见陷阱
下一篇: 在HTML中添加链接到特定位置的方法
推荐阅读
-
如何使用 Illustrator 中的旋转功能自定义锚点位置。
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
全面解析:在Linux中如何查看CPU和内存的使用情况
-
如何在CSS和PS中创建出漂亮的金色渐变效果?
-
如何在父div中水平和垂直居中子div(使用div和CSS)
-
如何在Express中实现URL重定向?:使用res.location和res.redirect的方法
-
简易教程:使用纯CSS和HTML打造美观的Table表格
-
如何在HTML5中为表格的每一行和每一列设置边框?调整表格边框颜色的方法
-
在传奇版本中如何快速获取装备?学习使用和修改GM命令的技巧!
-
如何在Verilog中通过VCS使用VPI和PLI/DPI调用C程序来实现Cover Property驱动的仿真控制?