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

这是一个刚学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>

以上就是个人网站的首页部分了。
第一次写博客记录一下自己的学习，加油鸭ヾ(◍°∇°◍)ﾉﾞ

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

全国默哀网站首页都要变成灰色的简单解决办法
今天全国默哀网站首页都要变成灰色给大家一个简单的解决办法在首页的body中加上 style="FILTER: alphaopacity=80 gray" 大家也可以在自己的b ...
ps css html,用ps两分钟做个xhtml+css的网站首页
xhtml+css网站重构web标准等等之类的文章太多了,我就不重复了,发个最简单的制作xhtml+css页面的方法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到. 开 ...
DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...
Asp.net MVC 仿照博客园的简单网站首页列表设计
本来我打算采用ajax提交请求,异步的请求获取数据,但是我发现如果这样的话就会拖慢开发的进度,拖长时间.所以在这篇博客中仿照首页的列表设计其实和左侧列表网站分类采用了同样的方式,通过局部视图的方式呈现 ...
CSS画心形的三种方法，超级简单
CSS画心形的三种方法,超级简单一.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素首先,我们在页面上先写出一个div 使用CSS,将这个div变为一个橘红色的正方形: 接着我们 ...
HTML+CSS写网站首页
(html+css写网站首页) HTML <html><head><meta charset="UTF-8"><title>网站建设 ...
婚恋相亲交友网站搭建教程超级简单，一步就能拥有属于自己的网站
下一站遇见爱,相亲婚恋网站的搭建整体过程简单,搭建即可拥有属于自己的婚恋相亲交友网站,包含PC端.手机端.微信端可部署到服务器上,部署完成即可拥有属于自己并可投入使用运营的婚恋相亲交友网站,可以试 ...
vue+element简单实现商城网站首页，模仿电商商城
1.安装启动vue项目可参考 vue+element简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544 ...
用HTML+CSS编写一个计科院网站首页的静态网页
用HTML+CSS编写一个计科院网站首页的静态网页利用浏览器查看网页源代码,并将一些图片分门别类的下载到本地,然后删除javascript脚本. 项目的文件目录最终效果 <!DOCTYPE ...