论文部分页面

最新推荐文章于 2024-08-31 21:18:22 发布

begin 专注

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/qq_61718994/article/details/123171461

版权

论文类型专题论文辩论论文综述论文综合论文

关键词由CSDN通过智能技术生成

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;
}

页面效果：

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
论文部分页面

html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="lunwen.css"> </head> <body>  <div class="daohang"> &l
复制链接

扫一扫