个人网站—首页HTML+CSS（超级简单的那种）

最新推荐文章于 2024-06-23 10:00:07 发布

yuhua-333

最新推荐文章于 2024-06-23 10:00:07 发布

阅读量9.3k

点赞数 29

文章标签： html css

本文链接：https://blog.csdn.net/yuyuyuyuh/article/details/113178483

版权

这是一个刚学web的学生写的大作业的一部分。
大佬们不需要看。

先上效果展示

介绍一下页面布局

整体就是一个很简单的三行三列式布局。
上边有一条header。
中间是main（里面是三列left center right）
left部分：调了一下div的css用的矩形边框，背景是一个图片。
center部分：就是一个竖向的导航栏。
right部分：跟left部分差不多。
下边也有一条footer。

css部分

<style type="text/css">
             body{text-align: center;}
             #header{width: 100%;height: 30px;}
             #main{width: 100%;height: 560px;}
             #left{width: 400px;height: 400px;float: left;border-radius:300px;background:url(12.jpg); }
             #center{width: 20%;height: 100%;float: left;}
             #right{width: 43%;height: 81%;float: left;background: url(a.gif);border-radius:100px;}
             #footer{clear: both;width: 100%;height: 80px;}
             ul{list-style-type:none;margin:0;padding:0;width: 800px;height: 100%}
             a{display:block;background-color:#E3BDAA;color:black;width:160px;text-align:center;padding:25px;text-decoration:none;font-family: 幼圆;font-size: 18pt;border-radius:80px;}
             a:hover,a:active{background-color:#98bf21;}
             h4{font-size: 20pt;font-family: 幼圆;color:black}
             h1{font-size: 30pt;font-family: 幼圆;color:black}
		</style>

所有的代码

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style type="text/css">
             body{text-align: center;}
             #header{width: 100%;height: 30px;}
             #main{width: 100%;height: 560px;}
             #left{width: 400px;height: 400px;float: left;border-radius:300px;background:url(12.jpg); }
             #center{width: 20%;height: 100%;float: left;}
             #right{width: 43%;height: 81%;float: left;background: url(a.gif);border-radius:100px;}
             #footer{clear: both;width: 100%;height: 80px;}
             ul{list-style-type:none;margin:0;padding:0;width: 800px;height: 100%}
             a{display:block;background-color:#E3BDAA;color:black;width:160px;text-align:center;padding:25px;text-decoration:none;font-family: 幼圆;font-size: 18pt;border-radius:80px;}
             a:hover,a:active{background-color:#98bf21;}
             h4{font-size: 20pt;font-family: 幼圆;color:black}
             h1{font-size: 30pt;font-family: 幼圆;color:black}
		</style>
	</head>
	<body background="1.jpg">
		<div id="header"></div>
		<div id="main">
			<div id="left" class="">
				
			</div>
			<div id="center">
				<ul>
					<a href="./首页.html"><span>首页</span></a><br>
					<a href="./注册页.html"><span>注册页</span></a><br>
					<a href="./爱好介绍页.html"><span>爱好介绍页</span></a><br>
					<a href="./爱看的视频页.html"><span>爱看的视频页</span></a><br>
					<a href="./音乐页/音乐页面.html"><span>音乐页面</span></a><br>
					<a href="./职业规划页.html"><span>职业规划页</span></a><br>
				</ul>
			</div>
			<div id="right">
				<h4>姓名：余桦  班级：19软工A2</h4>
				<h4>学号：***********</h4>
			</div>
		</div>
		<div id="footer" class=" ">
			<ul>
				<h4>本网页制作人为：余桦 制作日期：2021年1月11日</h4>
			</ul>
		</div>
	</body>
</html>