|
命名锚点的作用：在同一页面内的不同位置进行跳转。
通俗理解：可以通过锚点跳转到页面中的其他位置，当页面过长时，可以将页面分为几部分，通过顶部设置一些锚点，点击可以方便浏览者快速定位到相应的位置。
制作锚标记：
1)给元素定义命名锚记名
语法：
2)命名锚记连接
语法：
注意：
href属性的属性值最前面要加**#**（href="#id名）在要跳转到的位置的标签中添加的是id属性
 
Document
* {
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;
}
春晓
悯农
静夜思
鹅鹅鹅
春眠不觉晓，处处闻啼鸟
锄禾日当午，汗滴和下土
窗前明月光，地上鞋两双
白毛浮绿水，红掌拨清波
跳转到另一个页面的固定位置
小练习： 
电子相册
*{
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;
}
电子相册
|