HTML简单的个人博客网站 DIV学生网页设计作品 dreamweaver作业静态HTML网页设计模板个人网页作业制作

原创

@码出未来④-web网页设计 2022-10-31 09:47:10 ©著作权

文章标签 html静态页面 web课程与设计 html期末大作业学生我那工业作业期末网页作业 文章分类 运维

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业：【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南：【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目
二、✍️网站描述
三、📚网站介绍
四、🌐网站演示
五、🔧 网站代码

🧱HTML结构代码
💒CSS样式代码

六、🥇 如何让学习不再盲目
七、🎁更多干货

一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板、等网站的设计与制作。

二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
页面清爽、美观、大方，不雷同。。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

HTML简单的个人博客网站 DIV学生网页设计作品 dreamweaver作业静态HTML网页设计模板个人网页作业制作_web课程与设计

五、🔧 网站代码

🧱HTML结构代码

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="gb2312">
 <title>我的博客</title>
 <meta name="关键字" content="">
 <link href="css/buju.css" rel="stylesheet">
 <link href="css/index.css" rel="stylesheet">
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/sliders.js"></script>
</head>
<body>
  <header>
    <div class="logo f_l">
     <a href="#">
        <img src="images/logo.png">
     </a>
   </div>
   <div id="topnav" class="f_r">
       <ul>
         <a href="#" target="_blank" id="topnav_current">首页</a>
        <a href="#" target="_blank">关于我</a>
        <a href="#" target="_blank">文章</a>
        <a href="#" target="_blank">心情</a>
        <a href="#" target="_blank">相册</a>
        <a href="#" target="_blank">留言</a>
      </ul>
   </div>
  </header>
  <article>
    <div class="l_box f_l">
    <div class="banner">
      <div id="slide-holder">
       <div id="slide-runner">
         <a href="/" target="_blank">
           <img id="slide-img-1" src="images/a1.jpg" alt style>
        </a>
        <a href="/" target="_blank">
           <img id="slide-img-2" src="images/a2.jpg" alt style>
        </a>
        <a href="/" target="_blank">
           <img id="slide-img-3" src="images/a3.jpg" alt style>
        </a>
        <a href="/" target="_blank">
           <img id="slide-img-4" src="images/a4.jpg" alt style>
        </a>
        <div id="slide-controls" style="display:block;">
          <p id="slide-client" class="text">
            <strong></strong>
           <span></span>
         </p>
              <p id="slide-desc" class="text"></p>  
              <p id="slide-nav"></p>                
        </div>
       </div> 
     </div>
    </div>
    <script>
       if(!window.slider){
         var slider={};
     }
     slider.data=[
     {
         "id":"slide-img-1", //与slide-runner中的img标签id对应
       "client":"醉牛逼",
       "desc":"醉牛逼是武魂醉牛逼的存在"     //这里描述图片内容
     },
     {
         "id":"slide-img-2", 
       "client":"醉牛逼",
       "desc":"醉牛逼是武魂醉牛逼的存在"
     },
     {
         "id":"slide-img-3", 
       "client":"醉牛逼",
       "desc":"醉牛逼是武魂醉牛逼的存在"
     },
     {
         "id":"slide-img-4", 
       "client":"醉牛逼",
       "desc":"醉牛逼是武魂醉牛逼的存在"
     }
     ];
     </script>
     <div class="topnews">
     <h2>
     <span>
      <a href="/" target="_blank">武魂大罗</a>
     <a href="/" target="_blank">装逼大神</a>
     <a href="/" target="_blank">屌毛推荐</a>
     </span>   
      文章推荐
     </h2>
       <div class="blogs">
          <figure>
           <img src="images/01.jpg">
         </figure>
         <ul>
           <h3><a href="/">住在手机里的朋友</a></h3>
          <p>"通信时代，无论是初次相见还是老友重逢，交换联系方式，常常是彼此交换名片，然后郑重或是出于礼貌用手机记下对方的电话号码。在快节奏的生活里，我们不知不觉中就成为住在别人手机里的朋友。又因某些意外，变成了别人手机里匆忙的过客，这种快餐式的友谊 ..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
         </div>
      <div class="blogs">
          <figure>
           <img src="images/02.jpg">
         </figure>
         <ul>
           <h3><a href="/">教你怎样用欠费手机拨打电话</a></h3>
          <p>"初次相识的喜悦，让你觉得似乎找到了知音。于是，对于投缘的人，开始了较频繁的交往。渐渐地，初识的喜悦退尽，接下来就是仅仅保持着联系，平淡到偶尔在节假曰发短信互致问候..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
         </div>
      <div class="blogs">
         <figure>
           <img src="images/03.jpg">
         </figure>
         <ul>
           <h3><a href="/">原来以为，一个人的勇敢是，删掉他的手机号码...</a></h3>
          <p>"原来以为，一个人的勇敢是，删掉他的手机号码、QQ号码等等一切，努力和他保持距离。等着有一天，习惯不想念他，习惯他不在身边,习惯时间把他在我记忆里的身影磨蚀干净..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
         </div>
       <div class="blogs">
         <figure>
           <img src="images/04.jpg">
         </figure>
         <ul>
           <h3><a href="/">手机的16个惊人小秘密，据说99.999%的人都不知</a></h3>
          <p>"引导语：知道么，手机有备用电池，手机拨号码12593+电话号码=陷阱……手机具有很多你不知道的小秘密，说出来一定很惊奇！不信的话就来看看吧！..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
         </div>
      <div class="blogs">
           <figure>
           <img src="images/05.jpg">
         </figure>
         <ul>
           <h3><a href="/">你面对的是生活而不是手机</a></h3>
          <p>"每一次与别人吃饭，总会有人会拿出手机。以为他们在打电话或者有紧急的短信，但用余光瞟了一眼之后发现无非就两件事：1、看小说，2、上人人或者QQ..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
          </div>
      <div class="blogs">
           <figure>
           <img src="images/06.jpg">
         </figure>
         <ul>
           <h3><a href="/">豪雅手机正式发布! 在法国全手工打造的奢侈品</a></h3>
          <p>"现在跨界联姻，时尚、汽车以及运动品牌联合手机制造商联合发布手机产品在行业里已经不再新鲜，上周我们给大家报道过著名手表制造商瑞士泰格·豪雅（Tag Heuer） 联合法国的手机制造商Modelabs发布的一款奢华手机的部分谍照，而近日该手机终于被正式发布了..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
          </div>
      <div class="blogs">
          <figure>
           <img src="images/04.jpg">
         </figure>
         <ul>
           <h3><a href="/">手机的16个惊人小秘密，据说99.999%的人都不知</a></h3>
          <p>"引导语：知道么，手机有备用电池，手机拨号码12593+电话号码=陷阱……手机具有很多你不知道的小秘密，说出来一定很惊奇！不信的话就来看看吧！..."</p>
           <p class="autor">
            <span class="lm f_l">
              <a href="/">个人博客</a>
           </span>
           <span class="dtime f_l">2016-02-16</span>
           <span class="viewnum f_r">
              浏览（<a href="/">666</a>）</span>
           <span class="pingl f_r"> 
              评论（<a href="/">60</a>）</span>
          </p>
         </ul>
         </div>
     </div>
   </div>  
    <div class="r_box f_r">
     <div class="tit01">
         <h3>关注我</h3>
      <div class="gzwm">
        <ul>
         <li><a class="xlwb" href="#" target="_blank">新浪微博</a></li>
         <li><a class="txwb" href="#" target="_blank">腾讯微博</a></li>
         <li><a class="rss" href="#" target="_blank">RSS</a></li>
         <li><a class="wx" href="#" target="_blank">邮箱</a></li>
      </ul>
      </div>
       </div> 
     <div class="ad300x100">
         <img src="images/wh.jpg">
     </div>
     <div class="tab" id="lp_right_select">
       <script>
         window.onload=function()
       {
           var oLi=document.getElementById("tb").getElementsByTagName("li");
         var oUl=document.getElementById("tb-main").getElementsByTagName("div");
         for(var i=0;i<oLi.length;i++)
         {
             oLi[i].index=i;
           oLi[i].onmouseover=function()
           {
              for(var n=0;n<oLi.length;n++)
                oLi[n].className="";
              this.className="cur";
            for(var n=0;n<oUl.length;n++)
                            oUl[n].style.display="none";
                            oUl[this.index].style.display="block";              
           }
         }
       }
      </script>
       <div class="tab-top">
          <ul class="hd" id="tb">
             <li class="cur"><a href="/">点击排行</a></li>
           <li><a href="/">最新文章</a></li>
           <li><a href="/">站长推荐</a></li>
        </ul>
      </div>
      <div class="tab-main" id="tb-main">
          <div class="bd bd-news" style="display:block;"><ul>
            <li><a href="/" target="_blank">住在手机里的朋友</a></li>
           <li><a href="/" target="_blank">教你怎样用欠费手机拨打电话</a></li>
           <li><a href="/" target="_blank">原来以为，一个人的勇敢是，删掉他的手机号码...</a></li>
           <li><a href="/" target="_blank">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
           <li><a href="/" target="_blank">你面对的是生活而不是手机</a></li>
           <li><a href="/" target="_blank">豪雅手机正式发布! 在法国全手工打造的奢侈品</a></li>
        </ul></div>
         <div class="bd bd-news" ><ul>
            <li><a href="/" target="_blank">原来以为，一个人的勇敢是，删掉他的手机号码...</a></li>
           <li><a href="/" target="_blank">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
           <li><a href="/" target="_blank">住在手机里的朋友</a></li>
           <li><a href="/" target="_blank">教你怎样用欠费手机拨打电话</a></li>
           <li><a href="/" target="_blank">你面对的是生活而不是手机</a></li>
           <li><a href="/" target="_blank">豪雅手机正式发布! 在法国全手工打造的奢侈品</a></li>
        </ul></div>
         <div class="bd bd-news" ><ul>
            <li><a href="/" target="_blank">手机的16个惊人小秘密，据说99.999%的人都不知</a></li>
           <li><a href="/" target="_blank">你面对的是生活而不是手机</a></li>
           <li><a href="/" target="_blank">住在手机里的朋友</a></li>
           <li><a href="/" target="_blank">豪雅手机正式发布! 在法国全手工打造的奢侈品</a></li>
           <li><a href="/" target="_blank">你面对的是生活而不是手机</a></li>
           <li><a href="/" target="_blank">原来以为，一个人的勇敢是，删掉他的手机号码...</a></li>
        </ul></div>
      </div>
     </div>
     <div class="cloud">
       <h3>标签云</h3>
      <ul>
        <li><a href="/">个人博客</a></li>
       <li><a href="/">web开发</a></li>
       <li><a href="/">前端设计</a></li>
       <li><a href="/">Html</a></li>
       <li><a href="/">CSS3</a></li>
       <li><a href="/">CSS3+HTML5</a></li>
       <li><a href="/">百度</a></li>
       <li><a href="/">JavaScript</a></li>
       <li><a href="/">C/C++</a></li>
       <li><a href="/">ASP.NET</a></li>
       <li><a href="/">IOS开发</a></li>
       <li><a href="/">Android开发</a></li>
       <li><a href="/">PHP</a></li>
       <li><a href="/">VS</a></li>
      </ul>
     </div>
     <div class="tuwen">
       <h3>图文推荐</h3>
     <ul>
       <li><a href="/"><img src="images/01.jpg"><b>住在手机里的朋友</b></a>
          <p>
            <span class="tulanum"><a href="/">手机配件</a></span>
           <span class="tutime">2016-02-16</span>
         </p>
       </li>
       <li><a href="/"><img src="images/02.jpg"><b>教你怎样用欠费手机拨打电话</b></a>
          <p>
            <span class="tulanum"><a href="/">手机配件</a></span>
           <span class="tutime">2016-02-16</span>
         </p></li>
       <li><a href="/"><img src="images/03.jpg"><b>手机的16个惊人小秘密，据说99.999%的人都不知</b></a>
          <p>
            <span class="tulanum"><a href="/">手机配件</a></span>
           <span class="tutime">2016-02-16</span>
         </p></li>
       <li><a href="/"><img src="images/06.jpg"><b>原来以为，一个人的勇敢是，删掉他的手机号码...</b></a>
          <p>
            <span class="tulanum"><a href="/">手机配件</a></span>
           <span class="tutime">2016-02-16</span>
         </p></li>
       <li><a href="/"><img src="images/04.jpg"><b>豪雅手机正式发布! 在法国全手工打造的奢侈品</b></a>
          <p>
            <span class="tulanum"><a href="/">手机配件</a></span>
           <span class="tutime">2016-02-16</span>
         </p></li>
     </ul>
     </div>
     <div class="ad"><img src="images/03.jpg"></div>
     <div class="links">
       <h3><span><a href="/">申请友情链接</a></span>友情链接</h3>
     <ul>
       <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="/">360导航</a></li>
         <li><a href="/">一带一路门户网</a></li>
     </ul>
     </div>
   </div>
  </article>
</body>
</html>

💒CSS样式代码

/*共用CSS*/
*{margin:0px;padding:0px;}
body { font: 12px/1.5 'Microsoft Yahei', 'Simsun'; color: #666666; background: #fff }
img { border: 0; display: block }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
a { outline: none; }
a:link, a:visited { text-decoration: none; color: #666 }
a:hover { text-decoration: none; }
.f_l{float:left;}
.f_r{float:right;}
.l_box{width:670px;}
.r_box{width:300px;}
/*头部样式*/
header{
  width:1000px;
  margin:20px auto;
  overflow:hidden;
  clear:both;
}
#topnav {
  width:60%;
  background:#48AE15;
  height:46px;
  line-height:46px; 
  text-align:center;
  border-radius:46px; 
}
#topnav a { display: inline-block; font-size: 18px; font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif; padding: 0 20px; }
#topnav a:hover { background: #fff; color: #000; }
#topnav a { color: #FFF }
#topnav_current { background: #F3FF41; }/* 高亮选中颜色 */
a#topnav_current { color: #000 }
article{
  width:1000px;
  margin:20px auto;
}
/*右侧选项卡*/
.tab{
  width:100%;
  margin:30px 0 20px 0;
  overflow:hidden;
}
.tab-top{
  height:32px;
  border-bottom:solid 1px #EAEAEA;
  font-size:14px;
}
#tb li a{
  float:left;
  height:32px;
  cursor:pointer;
  line-height:32px;
  list-style-type:none;
  padding:0 15px;
}
#tb li.cur a { color: #fff; background: #f77825; }
.bd { display: none }
.bd-news ul { padding: 10px 0 0 10px; background: url(../images/ph2.png) no-repeat 10px 29px; }
.bd-news ul li { border-bottom: solid 1px #EAEAEA; line-height: 30px; height: 30px; overflow: hidden; font-size: 14px; padding: 10px 0 0 30px; }
.bd-news ul li a { display: block; }
.bd-news ul li a:hover { color: #000; }
.bd-news ul li:hover { border-bottom: #000 1px solid; }/* 鼠标放上去的效果 */
/*标签云*/
.cloud{
  width:100%;
  clear:both;
  overflow:hidden;
}
.cloud h3{
  line-height:40px;
  color:#38485A;
  font-size:18px;
  border-bottom:1px solid #E6E6E6;
  height:40px;
}
.cloud ul{
  margin:20px 0;
}
.cloud ul li { line-height: 24px; height: 24px; display: block; background: #999; float: left; padding: 3px 11px; margin: 10px 10px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.cloud ul li a { color: #FFF }
.cloud ul li:nth-child(8n-7) { background: #8A9B0F }
.cloud ul li:nth-child(8n-6) { background: #EB6841 }
.cloud ul li:nth-child(8n-5) { background: #3FB8AF }
.cloud ul li:nth-child(8n-4) { background: #FE4365 }
.cloud ul li:nth-child(8n-3) { background: #FC9D9A }
.cloud ul li:nth-child(8n-2) { background: #EDC951 }
.cloud ul li:nth-child(8n-1) { background: #C8C8A9 }
.cloud ul li:nth-child(8n) { background: #83AF9B }
.cloud ul li:first-child { background: #036564 }
.cloud ul li:last-child { background: #3299BB }
.cloud ul li:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。