个人网站—首页HTML+CSS(超级简单的那种)
这是一个刚学web的学生写的大作业的一部分。大佬们不需要看。先上效果展示介绍一下页面布局整体就是一个很简单的三行三列式布局上边有一条header中间是main(里面是三列left center right)下边是footer代码片欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一
·
这是一个刚学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>
以上就是个人网站的首页部分了。
第一次写博客记录一下自己的学习,加油鸭ヾ(◍°∇°◍)ノ゙
更多推荐
已为社区贡献1条内容
所有评论(0)