发表于： 2019-11-16 20:58:04
1 1123
今天完成的事情：基本完成了任务九，修改了一下在响应式布局下的bug，学习了一下锚点标记
明天计划的事情： 继续后面的任务
遇到的问题：调整页面花费较长时间
收获：今天学习了一下锚点标记，举一个简单的例子
<a name="hello">Hello</a>
xxxxx
xxxxx
<a href="#hello">点击这里跳转到Hello处</a>
这个就是一个简单的锚点标记，用这个可以定向跳转到页面的一些位置，也可以跨页面跳转，a标签里面的href加上 另一个页面的地址 然后后面加#hello就可以了
用这个做了三个页面间的跳转，三个页面的效果图
点击首页的几个项目可以跳转，第二个页面
第三页的部分
css代码
.d1{
display: none;
}
.x1{
display: block;
cursor: pointer;
}
.d2{
display: none;
}
.d2 a{
width: 100%;
display: block;
margin: 0 auto;
}
#menu1{
height: 50px;
width: 50px;
background: url(./8/QQ20191113144045.png);
display: block;
cursor: pointer;
}
#menu:checked ~ .d2{
display: block;
}
.m1{
display: flex;
flex-direction: row-reverse;
}
.d6{
height: 800px;
flex-direction: column;
align-items: center;
}
.d61{
width: 50%;
}
.dd6{
flex-direction: column;
align-items: center;
height: 500px;
border: none;
}
.d8{
flex-direction: column;
align-items: center;
height: 350px;
justify-content: space-around;
}
.d11{
flex-direction: column;
align-items: center;
}
.d111{
margin-right: 0;
width: 80%;
margin-bottom: 10px;
}
.d12{
display: none;
}
.d14{
flex-direction: column;
align-items: center;
}
.db{
flex-direction: column;
}
.zb{
padding-left: 0px;
}
.db .yb p{
text-align: left!important;
}
.c0{
height: 1000px;
}
.t1{
height: 301.94px;
}
.b2{
padding-right: 0px;
}
.d62{
padding: 55px 0 0 0;
}
.d4 .l1{
padding-left: 0px;
}
.d4 .l1 li{
list-style: none;
padding-right: 4px;
}
全写在了一个css文件里，重复利用减少文件数量，明天继续后续的任务
返回列表
评论