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

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3,代码简单；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含1个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./css/style.css">
       <title>个人博客</title>
   </head>
   <body>
       <div class="top1 auto clearfix">
           <p>个人博客</p>
           <p class="clearfix">
               <span>首页</span>
               <span>登录</span>
               <span>注册</span>
           </p>
       </div>
       <ul class="cul auto clearfix">
           <li><a href="">首页</a></li>
           <li><a href="">我的说说</a></li>
           <li><a href="">个人笔记</a></li>
           <li><a href="">我的旅行</a></li>
           <li><a href="">我的相册</a></li>
           <li><a href="">我的视频</a></li>
       </ul>
       <div class="con1 auto clearfix">
           <img src="./img/1.jpg" alt="">
           <div>
               工科男，IT男，本科毕业，在一线城市工作多年，精通C语言和C++语言，熟悉各类其它语言和开发小工具，根据多年的工作经验写有如下的知识专栏，欢迎大家一键三连！！！！
               C和C++Everything教程(该专栏目前已有七千多篇博文)点击进入C和C++Everything教程传送门
               C和C++完整教程点击进入C和C++完整教程传送门
               C和C++算法完整教程点击进入C和C++算法完整教程传送门
               VTK实战教程点击进入VTK实战教程传送门
               OpenGL加载3D模型点击进入OpenGL加载3D模型传送门
               OpenGL完整教程点击进入OpenGL完整教程传送门
               OpenCV完整教程点击进入OpenCV完整教程传送门
               QT完整教程点击进入QT完整教程传送门
               QT实战大杂烩点击进入QT实战大杂烩传送门
               DCMTK完整实战教程点击进入DCMTK完整实战教程传送门
               ITK完整实战教程点击进入ITK完整实战教程传送门
               GDCM完整实战教程点击进入GDCM完整实战教程传送门
               Boost完整实战教程点击进入Boost完整实战教程传送门
               wxWidgets完整教程点击进入wxWidgets完整教程传送门
               OpenCASCADE完整教程点击进入OpenCASCADE完整教程传送门
               C和C++实战教程点击进入C和C++实战教程传送门
               python算法完整教程点击进入python算法完整教程传送门
           </div>
       </div>
       <h2 class="ch3">塔克拉玛干沙漠：爱我就征服我</h2>
       <hr class="chr auto">
       <p class="p1 auto">
           塔克拉玛干沙漠（维语：تەكلىماكان قۇملۇقى）位于新疆南疆的塔里木盆地中心，是中国最大的沙漠，也是世界第十大沙漠，同时亦是世界第二大流动沙漠。整个沙漠东西长约1000公里，南北宽约400公里，面积达33万平方公里。
       </p>
       <div class="con2 auto clearfix">
           <p class="clearfix"><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""></p>
           <p><img src="./img/6.jpg" alt=""></p>
       </div>
       <p class="p1 auto">
           沙漠里亦有少量的植物，其根系异常发达，超过地上部分的几十倍乃至上百倍，以便汲取地下的水分，那里的动物有夏眠的现象。
       </p>
       <div class="con2 auto clearfix">
           <p class="clearfix"><img src="./img/7.jpg" alt=""><img src="./img/8.jpg" alt=""><img src="./img/9.jpg" alt=""><img src="./img/10.jpg" alt=""></p>
           <p><img src="./img/11.jpg" alt=""></p>
       </div>
       <div class="con3 auto">
           <p class="p2">
               网友留言
           </p>
       </div>
       <hr class="chr auto">
       <div class="con4 auto">
           <div class="clearfix">
               <img src="./img/12.jpg" alt="">
               <div>
                   <p>
                       <span>调皮钵钵鸡</span>
                       <span>2021-08-02</span>
                   </p>
                   <p>
                       太喜欢了，非常赞，哈哈哈
                   </p>
               </div>
           </div>
           <div class="clearfix">
               <img src="./img/13.jpg" alt="">
               <div>
                   <p>
                       <span>蹦蹦跳跳小白兔</span>
                       <span>2021-06-01</span>
                   </p>
                   <p>
                       我也想去沙漠看看
                   </p>
               </div>
           </div>
           <div class="clearfix">
               <img src="./img/14.jpg" alt="">
               <div>
                   <p>
                       <span>欧式情调、</span>
                       <span>2021-04-09</span>
                   </p>

...

2.CSS

代码如下（节选示例）：

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
}
li,ul,ol{
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.flex{
   display: flex;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
.top1{
   width: 1000px;
   height: 50px;
   line-height: 50px;
}
.top1 p:first-child{
   float: left;
   font-size: 28px;
   font-family: "kaiti";
   color: mediumpurple;
   font-weight: 700;
   letter-spacing: 15px;
}
.top1 p:last-child{
   float: right;
}
.top1 p:last-child span{
   display: block;
   float: left;
   cursor: pointer;
}
.top1 p:last-child span:hover{
   color: blue;
}
.top1 p:last-child span~span{
   margin-left: 20px;
}
.cul{
   width: 1000px;
   height: 40px;
   line-height: 40px;
   background-color: antiquewhite;
}
.cul li{
   width: 140px;
   float: left;
}
.cul li a{
   display: block;
   text-align: center;
}
.cul li a:hover{
   background-color: rgba(0, 0, 0, .23);
}
.con1{
   width: 1000px;
   margin: 15px auto;
}
.con1 img{
   float: left;
   width: 60%;
   height: 450px;
   transition: all .3s;
}
.con1 img:hover{
   box-shadow: 1px 1px 10px 1px #000;
}
.con1 div{
   width: 36%;
   float: right;
   font-family: "kaiti";
   font-weight: 500;
   color: deepskyblue;
   line-height: 20px;
}
.ch3{
   text-align: center;
   margin: 30px 0;
}
.chr{
   width: 1000px;
   border: 0;
   height: 2px;
   background-color: #ccc;
}
.p1{
   width: 1000px;
   line-height: 28px;
   text-indent: 2em;
   margin: 30px auto;
}