console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>东华图协</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="logo"></div>
<p class="mingzi">图书馆协会</p>
</div>
<div class="beijin">
<div class="daohanglan">
<a href="tuxie.html">首页</a>
<a href="https://mp.weixin.qq.com/s/2uZU2P7g_F5akQeETJgx0Q">招新</a>
<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUyNjQ4MDAwMw==&scene=124#wechat_redirect">活动</a>
<a href="https://v.qq.com/x/page/k0916evri13.html?pcsharecode=9I6Y9OvW&sf=uri">视频</a>
<a href="http://library.gzdhxy.com/">图书馆</a>
<a href="demo.html">联系我们</a>
</div>
<div class="content">
<div class="jianjie">
<div class="biaoti_border">
<div class="biaoti">协会简介</div>
</div>
<div class="neirong"><p>协会是在图书馆各成员的领导下，于2015年9月成立，以“品读书籍，丰富人生”为口号；充分利用图书馆资源开展丰富多彩的校园文化活动。以提高当代大学生信息素养为目的。在协会各届核心干部的团结携手下，整个协会历来以和谐活泼的形象活跃在校园中。</p></div>
</div>
<div class="huodonglianjie">
<div class="biaoti_border">
<div class="biaoti">历年活动</div>
</div>
<div class="neirong">
<p><a href="https://mp.weixin.qq.com/s/5LScFyVWLOKmuFnIRFYJYA">冬至｜温暖图协与你相伴</a></p>
<p><a href="https://mp.weixin.qq.com/s/nZSrgSdSiNvJzd467gf94Q">秋游，白云山登山之旅</a></p>
<p><a href="https://mp.weixin.qq.com/s/Vi7DTZU_OsWHmlVUoWtZ1g">书单推荐十四期 | 牢记历史，勿忘国耻</a></p>
<p><a href="https://mp.weixin.qq.com/s/geIUMHn5IbruIZN4pmv0SA">报告：学校后山有空投......</a></p>
<p><a href="https://mp.weixin.qq.com/s/2aVAmckcg-UfFJzpBoqi_w">对春天最起码的尊重是......</a></p>
</div>
</div>
<div class="border">
<div class="dashu"></div>
</div>
</div>
<div class="footer">
<div class="logo"></div>
<strong>东华图协</strong>
<div class="erweima"></div>
</div>
</div>
</body>
</html>
body {
margin: 0px;
}
.header {
background-image: url("https://i.loli.net/2020/03/24/jSGie7wPzdQcFJl.jpg");
width: 100%;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.beijin {
background-color: #daf5ff;
width: 100%;
height: 700px;
}
.daohanglan {
background-color: rgb(87, 151, 224);
width: 1000px;
height: 60px;
margin: 0 auto;
margin-bottom: 10px;
}
.daohanglan a {
float: left;
padding: 40px;
margin-top: -28px;
margin-left: 20px;
font-size: larger;
font-size: 25px;
color: white;
}
a:link {
text-decoration: none;color: blue;
}
a:hover {
text-decoration: none;color: blue;
}
.header .logo {
background-image: url("https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png");
background-size: 100% 100%;
width: 70px;
height: 70px;
float: left;
margin-top: 40px;
margin-left: 50px;
}
.mingzi {
float: left;
margin-top: 55px;
font-size: 40px;
font-weight: 1000;
font-family: cursive;
color: white;
}
.content{
width: 1000px;
height: 600px;
margin: 0 auto;
}
.dashu {
background-image: url("https://i.loli.net/2020/03/26/sIc2TzrnBmvFXZE.png");
background-size: 100% 100%;
width: 600px;
height: 400px;
float: right;
}
.border {
border-style: solid;
border-color: #d1dfd1;
float: right;
border-width: 1px;
width: 600px;
height: 430px;
}
.jianjie {
border-style: solid;
border-color: #d1dfd1;
float: left;
border-width: 1px;
width: 395px;
height: 210px;
}
.jianjie .biaoti_border{
border-style: solid;
border-color: rgb(79, 168, 209);
border-width: 2px;
height: 30px;
}
.jianjie .biaoti_border .biaoti {
background-color: rgb(34, 120, 160);
width: 110px;
height: 100%;
font-size: 23px;
font-family: cursive;
font-weight: 800;
text-align: center;
color: white;
border-radius: 0px 5px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.jianjie .neirong p {
text-indent: 2em;
line-height: 25px;
letter-spacing: 2px;
margin: 8px 5px;
}
.huodonglianjie {
border-style: solid;
border-color: #d1dfd1;
float: left;
border-width: 1px;
width: 395px;
height: 215px;
position: absolute;
margin-top: 230px;
}
.huodonglianjie .biaoti_border {
border-style: solid;
border-color: rgb(79, 168, 209);
border-width: 2px;
height: 30px;
}
.huodonglianjie .biaoti_border .biaoti {
background-color: rgb(34, 120, 160);
width: 110px;
height: 100%;
font-size: 23px;
font-family: cursive;
font-weight: 800;
text-align: center;
color: white;
border-radius: 0px 5px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
.huodonglianjie .neirong p {
line-height: 15px;
letter-spacing: 0.5px;
margin-left: 1em;
}
.footer {
height: 150px;
background-color: rgb(76, 144, 223);
margin-top: -80px;
}
.footer .logo {
background-image: url("https://i.loli.net/2020/03/26/rxsw6o8iWASjMVa.png");
background-size: 100% 100%;
width: 100px;
height: 100px;
float: left;
margin: 20px 250px;
}
.footer strong {
float: left;
margin-top: 20px;
font-size: 100px;
font-weight: 1000;
font-family: cursive;
color: white;
letter-spacing: 0.5em;
margin-left: -200px;
}
.footer .erweima {
background-image: url("https://i.loli.net/2020/03/28/7TGniW8Vzl4qLDx.jpg");
background-size: 100% 100%;
width: 100px;
height: 100px;
float: left;
margin: 25px;
margin-left: 150px;
}