605. 大学生HTML5期末大作业 ―【简单的个人博客网页(6页)】 Web前端网页制作 html5+css3-CSDN博客

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/148746352

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

一、网页简介

本实例应用html5+css3，代码简单，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<title>博客</title>
</head>
<body>
<nav class="menu">
<ul class="center">
<li><a href="index.html">首页</a></li>
<li><a href="jieshao.html">简介</a></li>
<li><a href="rizhi.html">日志</a></li>
<li><a href="tupian.html">图片</a></li>
<li><a href="liuyan.html">留言</a></li>
</ul>
</nav>
<div class="banner"> <img src="images/banner.jpg" width="100%" /> </div>
<div class="content">
<div class="main">
<div class="index"> <img src="images/01.jpg" class="fl" width="200" /> <span>
<h3> 简介 </h3>
<p>姓名：xxxx<br />
学号：xxxx <br />
我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。 </p>
</span>
<div class="clear"></div>
</div>
<div class="index">
<div class="tu ">
<ul>
<li><img src="images/c1.jpg" width="100%" height="160"/></li>
<li><img src="images/c2.jpg" width="100%" height="160"/></li>
<li><img src="images/c3.jpg" width="100%" height="160"/></li>
<li><img src="images/c4.jpg" width="100%" height="160"/></li>
</ul>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
a{ text-decoration:none; color:#000}
html{ background:#89776f}
body{ width:960px; margin:10px auto; line-height:28px; background:#fff; }
.clear{ clear:both}
.menu li{ list-style:none}
.logo{ width:250px; margin:40px auto}
.banner{ clear:both; position:relative}
.banner img{ display:block}
.menu{ width:100%; background:#b9a196; border-bottom:#CCCCCC solid 1px; text-align:center; float:left; height:50px }
.menu li a{ color:#fff}
.menu li { display:inline-block; padding:12px 30px ; width:100px}

.right{ float:right; width:660px; padding:20px}
.left{ min-height:300px; float:left; width:260px; padding:20px}
.content{ background:#dbbfb2; font-size:14px; display:block ; width:100%}
.index{ clear:both; padding:40px; background:#ebd9d1; margin:20px;}
.end{ clear:both; background:#89776f; color:#fff; padding:30px 0; text-align:center;}
.produce img{ margin:0 20px 20px 0}
.produce { line-height:30px}
.pad{ padding:20px 70px; display:block}
.pics p{ margin:20px; text-align:center}

.main{ padding:20px 50px; font-size:18px;}

.index img{ margin-right:50px}
.index h3{ margin-bottom:20px}
.index .fr{ margin-right:0; margin-left:50px}
.imglist{ margin:0 auto}
.imglist li{ float:left; width:260px; margin:30px ; text-align:center}

.news li{ padding:5px;}

.title{ text-align:center; color:#F00; padding:10px}
.fl{ float:left}.fr{ float:right}

.tu li{ float:left; width:24%; margin:0.5%}
.news p{ font-size:20px; padding:10px }
.msg>div{ padding:10px}

...