html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="lunwen.css">
</head>
<body>
<!-- 页面导航 -->
<div class="daohang">
<ul>
<li><a href="lunwen.html">专题型论文</a></li>
<span>|</span>
<li><a href="blx.html">辩论型论文</a></li>
<span>|</span>
<li><a href="zsx.html">综述型论文</a></li>
<span>|</span>
<li><a href="zhx.html">综合型论文</a></li>
</ul>
</div>
<!-- 2022年内容布局 -->
<div class="wen1">
<h1>2022</h1>
<div class="box1">
<h2>这里是标题</h2>
<div class="riqi"> 2022.1.2 这里是日期</div>
<div class="neirong">这里是文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字
文字简介文字简介文字简介文字简介文字简介文字简介文字简介 文字简介文字简介文字简介文字简介字
还是文字简介文字简介文字简介文字简介文字简介文字简介依然是文字简介文字简介文字简介文字简介
文简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</div>
<div class="buyu"> 这里是补语</div>
</div>
</div>
<div class="wen2">
<div class="box2">
<h2>这里是标题</h2>
<div class="riqi2"> 2022.1.2 这里是日期</div>
<div class="neirong2">这里是文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字
文字简介文字简介文字简介文字简介文字简介文字简介文字简介 文字简介文字简介文字简介文字简介字
还是文字简介文字简介文字简介文字简介文字简介文字简介依然是文字简介文字简介文字简介文字简介
文简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</div>
<div class="buyu2"> 这里是补语</div>
</div>
</div>
<!-- 2021年内容布局 -->
<div class="wen1">
<h1>2021</h1>
<div class="box1">
<h2>这里是标题</h2>
<div class="riqi"> 2022.1.2 这里是日期</div>
<div class="neirong">这里是文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字
文字简介文字简介文字简介文字简介文字简介文字简介文字简介 文字简介文字简介文字简介文字简介字
还是文字简介文字简介文字简介文字简介文字简介文字简介依然是文字简介文字简介文字简介文字简介
文简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</div>
<div class="buyu"> 这里是补语</div>
</div>
</div>
<div class="wen2">
<div class="box2">
<h2>这里是标题</h2>
<div class="riqi2"> 2022.1.2 这里是日期</div>
<div class="neirong2">这里是文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字
文字简介文字简介文字简介文字简介文字简介文字简介文字简介 文字简介文字简介文字简介文字简介字
还是文字简介文字简介文字简介文字简介文字简介文字简介依然是文字简介文字简介文字简介文字简介
文简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</div>
<div class="buyu2"> 这里是补语</div>
</div>
</div>
</body>
</html>
css代码:
body {
height: 1500px;
}
.daohang {
height: 64px;
position: relative;
}
.daohang ul {
list-style: none;
position: absolute;
width: 480px;
margin-left: 50%;
left: -260px;
}
.daohang ul li{
float: left;
}
.daohang ul a {
text-decoration: none;
color: #000000;
padding: 0 10px;
font-size: 18px;
line-height: 21px;
margin-top: 10px;
}
.daohang ul a:hover {
text-decoration: underline;
}
span {
float: left;
}
h1 {
margin-top: 5px;
height: 50px;
font-size: 36px;
line-height: 41px;
text-align: center;
margin-left: -750px;
color: #000000;
font-weight: 400;
}
.box1,
.box2 {
position: relative;
width: 670px;
height: 160px;
margin: 0 auto;
margin-top: -30px;
background-color: #C4C4C4;
margin-bottom: 30px;
}
.box2 {
margin-top: 17px;
}
.box h2 {
position: absolute;
height: 28px;
left: 0%;
right: 0%;
top: 0px;
font-size: 24px;
line-height: 28px;
color: #000000;
}
.riqi,
.riqi2 {
position: absolute;
margin: -15px 20px;
height: 16px;
font-size: 14px;
line-height: 16px;
color: #000000;
}
.neirong,
.neirong2 {
position: absolute;
height: 69px;
margin: 8px 20px;
font-size: 14px;
line-height: 16px;
color: #000000;
}
.buyu,
.buyu2 {
position: absolute;
height: 16px;
margin: 90px 20px;
font-size: 14px;
line-height: 16px;
color: #000000;
}
页面效果: