console
<div id="d1">
<p id="p1">个人网页</p>
<p id="p2">之本学期课程作业,自我介绍, 兴趣爱好,电影,游戏</p>
<p id="p2">以及最近时政热点</p>
</div>
<div id="d3">
<p id="d3z" class="d3z">我是一名大学生,来自于惠州</p>
<p id="d3z" class="d3z">读于广州东华学院,爱好是打羽毛球和</p>
<p id="d3z" class="d3z">游戏,本人冷静,热情,能吃苦耐劳,</p>
<p id="d3z" class="d3z">尽职尽责,有耐心</p>
</div>
<div id="d2">
<a href="https://movie.douban.com/subject/1292052/reviews"><img id="ad2" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2355109377,3007785383&fm=26&gp=0.jpg" ></a>
<a id="ad22" href="https://movie.douban.com/subject/1292052/reviews">电影,是一门视觉和听觉的现代艺术</a>
</div>
<div id="d4">
<div id="d4-1">
<a href="http://jsrun.net/r3fKp"><img class="d4-1" src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1392304890,210817661&fm=26&gp=0.jpg" ></a>
<a class="d4-2" href="http://jsrun.net/r3fKp">课程表</a>
</div>
<div id="d4-3">
<a href="http://jsrun.net/E8fKp"><img class="d4-33" src="http://images.sucaihuo.com/jquery/26/2643/big.jpg" ></a>
<a class="d4-2" href="http://jsrun.net/E8fKp">注册表</a>
</div>
<div id="d4-4">
<a href="http://jsrun.net/kEfKp"><img class="d4-33" src="http://img8.zol.com.cn/bbs/upload/19779/19778120.JPG" ></a>
<a class="d4-2" href="http://jsrun.net/kEfKp">主页</a>
</div>
<div id="d4-5">
<a href="http://jsrun.net/uU2Kp"><img class="d4-33" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593766031604&di=adf894d250bd22021137dabc6d6eb8c3&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F08%2F28%2Fc0d74d24351610f5ddc7793c8244bfb9.jpg" ></a>
<a class="d4-2" href="http://jsrun.net/uU2Kp">模仿豆瓣</a>
</div>
</div>
<div id="d5">
<h2>热门时政</h2>
<ol type="I">
<li><a id="d5z" href="http://www.offcn.com/shizheng/2020/0628/44134.html">2020年6月第4周国内时政热点汇总</a></li><br>
<li><a id="d5z" href="http://www.offcn.com/shizheng/2020/0628/44133.html">2020年6月第4周国际时政热点汇总</a></li><br>
<li><a id="d5z" href="http://www.offcn.com/shizheng/2020/0624/44123.html">2020年6月第3周国内时政热点汇总</a></li><br>
<li><a id="d5z" href="http://www.offcn.com/shizheng/2020/0624/44122.html">2020年6月第3周国际时政热点汇总</a></li><br>
</ol>
</div>
<div id="d33">
<a href="#d1"><img src="https://iknow-pic.cdn.bcebos.com/7e3e6709c93d70cfc0e42a59f7dcd100baa12b4c?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1" ></a>
</div>
<a href="#d1" id="tiaoding">走你</a>
#d1{
padding: 40px;
width: 100%;
height: 500px;
}
#p1{
font-size: 100px;
font-weight: 700;
}
#p2{
font-size: 40px;
}
#d2{
margin-top:140px;
padding: 40px;
width: 100%;
height: 500px;
}
a{
text-decoration: none;
}
#d33{
right: 25px;
bottom: 35px;
position: fixed;
width: 40px;
height: 40px;
background: white;
border-radius: 25px;
overflow: hidden;
border: 1px solid cadetblue;
}
#tiaoding{
position: fixed;
right: 2.5%;
bottom: 8%;
}
#ad2{
width: 30%;
height: 85%;
position: relative;
left: 20%;
top: 10%;
}
#ad2:hover{
transform: scale(1.1);
transition: all 1s ease 0s;
}
#d4-1:hover{
transform: scale(1.1);
transition: all 1s ease 0s;
}
#d4-3:hover{
transform: scale(1.1);
transition: all 1s ease 0s;
}
#d4-4:hover{
transform: scale(1.1);
transition: all 1s ease 0s;
}
#d4-5:hover{
transform: scale(1.1);
transition: all 1s ease 0s;
}
#ad22{
position: relative;
left: 10%;
top: 5%;
font-size: 35px;
color: bisque;
font-style: italic;
}
#d3{
background-color: black;
padding: 10px;
width: 100%;
height: 550px;
overflow: hidden;
}
#d3z{
font-weight: 250px;
font-size: 70px;
color: #FFFFFF;
}
.d3z{
margin: 25px;
}
#d4{
margin-top: 50px;
width: 100%;
height: 550px;
}
#d4-1{
height: 60%;
width: 35%;
margin-left: 8%;
}
.d4-1{
width: 100%;
height: 85%;
}
.d4-2{
margin-left: 45%;
}
#d4-3{
height: 60%;
width: 35%;
margin-left: 58%;
margin-top: -20%;
position: absolute ;
}
.d4-33{
width: 90%;
height: 55%;
}
#d4-4{
height: 60%;
width: 35%;
margin-left: 10%;
margin-top: 5%;
}
#d4-5{
height: 60%;
width: 35%;
margin-left: 60%;
margin-top: -28%;
}
#d5{
margin-top: 15%;
width: 100%;
height: 550px;
padding: 30px;
}
#d5z{
font-size: 40px;
color: #000000;
margin-top: 50px;
}
#d5 h2{
font-size: 50px;
}