Document

基于HTML+CSS+JavaScript技术设计的博客网站(web前端期末大作业)

2023-12-08
dfer
401
前端 html css javascript 课程设计 CSDN

📂文章目录

二、✍️网站描述
三、📚网站介绍
四、🌐网站演示
五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
六、🥇 如何让学习不再盲目
七、🎁更多干货

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

# 一、👨‍🎓网站题目 👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作、等网站的设计与制作。

二、✍️网站描述

🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有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结构代码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>杨青青个人博客</title>
<link href="css/base.css" rel="stylesheet">
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/jquery-1.8.3.min.js" ></script>
<script src="js/main.js"></script>
<!-- banner-->
<link href="css/swiper.min.css" rel="stylesheet">
<script src="js/swiper.min.js"></script>
<script src="js/banner.js"></script>
</head>

<body>
<header id="header">
  <div class="navbox">
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <div class="logo"><a href="" alt="杨青青个人博客" title="杨青青个人博客">杨青青个人博客</a> | <a href="#" alt="排名技术建站" title="排名技术建站"><font class="font16">排名技术建站</font></a></div>
    <nav>
      <ul id="starlist">
        <li><a href="" title="首页">网站首页</a></li>
        <li><a href="fengmian.html">原创模板</a></li>
        <li class="menu"><a href="fengmian.html">网站制作</a>
          <ul class="sub">
            <li><a href="fengmian.html">前端设计</a></li>
            <li><a href="fengmian.html">帝国cms</a></li>
            <li><a href="fengmian.html">网站优化</a></li>
          </ul>
          <span></span></li>
        <li class="menu"><a href="fengmian.html">我要学建站</a>
          <ul class="sub">
            <li><a href="fengmian.html">前端设计</a></li>
            <li><a href="fengmian.html">帝国cms</a></li>
            <li><a href="fengmian.html">网站优化</a></li>
          </ul>
          <span></span></li>
        <li><a href="fengmian.html" title="个人博客">青青博客</a></li>
        <li><a href="fengmian.html" title="站长圈子">站长圈子</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="sou">
  <div class="searchbox">
    <ul id="tab">
      <li class="tab-current">文章</li>
      <li class="">视频</li>
    </ul>
    <div id="tab-content">
      <section class="tab-box" style="display: block;">
        <div class="search">
          <form action="e/search/index.php" method="post" name="searchform" id="searchform">
            <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
            <input name="show" value="title" type="hidden">
            <input name="tempid" value="2" type="hidden">
            <input name="tbname" value="news" type="hidden">
            <input type="hidden" name="classid" value="90">
            <input name="Submit" class="input_submit" value="搜索文章" type="submit">
          </form>
        </div>
      </section>
      <section class="tab-box" style="display: none;">
        <div class="search sblue">
          <form action="e/search/index.php" method="post" name="searchform" id="searchform">
            <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
            <input name="show" value="title" type="hidden">
            <input name="tempid" value="1" type="hidden">
            <input name="tbname" value="news" type="hidden">
            <input type="hidden" name="classid" value="91,77">
            <input name="Submit" class="input_submit" value="搜索视频" type="submit">
          </form>
        </div>
      </section>
    </div>
  </div>
</div>
<div class="box">
  <div class="side_left_news zuijin">
    <h2 class="h_title">最近更新</h2>
    <section><a href="/" title="" target="_blank">
      <p>十条设计原则教你学会如何设计网页布局!</p>
      </a><span>网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局</span> </section>
    <ul>
      <li><a href="#" title="个人博客网站应该如何选购云服务器">个人博客网站应该如何选购云服务器</a></li>
      <li><a href="#" title="SEO优化中选择关键词需要注意什么?">SEO优化中选择关键词需要注意什么?</a></li>
      <li><a href="#" title="影响网站关键词相关性的四要素">影响网站关键词相关性的四要素</a></li>
      <li><a href="#" title="网站快照不更新与哪些因素有关？">网站快照不更新与哪些因素有关?</a></li>
      <li><a href="#" title="如何让蜘蛛来爬取自己网站呢?">如何让蜘蛛来爬取自己网站呢?</a></li>
      <li><a href="#" title="网站SEO优化中网站URL应该怎样优化?">网站SEO优化中网站URL应该怎样优化呢？</a></li>
      <li><a href="#" title="网站SEO优化时如何提升蜘蛛抓取频率呢？">网站SEO优化时如何提升蜘蛛抓取频率呢？</a></li>
      <li><a href="#" title="网站alt标签你用对了吗？">网站alt标签你用对了吗？</a></li>
    </ul>
  </div>
  <div class="main_box"> 
    <!-- banner begin-->
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><a href="/love/1.html" target="_blank"><img src="images/2.jpg" alt="官方推荐"><span>官方推荐</span></a></div>
          <div class="swiper-slide"><a href="/love/1.html" target="_blank"><img src="images/3.jpg" alt="独家"><span>独家</span></a></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <!-- banner end-->
    <div class="headlines">
      <h2><i>头条</i><a href="/web/seo/6.html" title="个人博客网站怎么选择模板程序？">个人博客网站怎么选择模板程序？ </a></h2>
      <section>
        <p>个人博客模板的选择，其实就是根据自己的爱好或模板的功能来选择。一般来说，选模板程序从这几方面入手，第一，要看网站的整体布局，是以图片为主，还是文字为主，第二，看示例网站的网站访问速度。第三，看示例网站的功能以及用户评价。</p>
      </section>
      <ul>
        <li><a href="/web/qianduan/340.html" title="个人博客网站应该购买什么样的服务器？">个人博客网站应该购买什么样的服务器？</a> </li>
        <li><a href="/web/qianduan/201.html" title="适合纯小白的个人博客搭建流程">适合纯小白的个人博客搭建流程</a> </li>
        <li><a href="/web/qianduan/169.html" title="阿里云如何解析域名，搭建云服务器环境">阿里云如何解析域名，搭建云服务器环境</a> </li>
        <li><a href="/web/qianduan/255.html" title="十条设计原则教你学会如何设计网页布局!">十条设计原则教你学会如何设计网页布局</a> </li>
        <li><a href="/web/qianduan/127.html" title="我的个人博客之——阿里云空间选择">我的个人博客之——阿里云空间选择</a> </li>
        <li><a href="web/qianduan/412.html" title="从摄影作品中获取网页颜色搭配技巧">从摄影作品中获取网页颜色搭配技巧</a></li>
      </ul>
    </div>
  </div>
  <div class="side_right_news tuijian">
    <h2 class="h_title">站长推荐</h2>
    <ul>
      <li>
        <p><a href="/web/qianduan/102.html" title="网页前端设计快速入门技巧">网页前端设计快速入门技巧</a></p>
        <span>一千个人眼中就有一千个哈姆雷特，每个人对网页前端的理解也是不一</span> </li>
      <li>
        <p><a href="/web/qianduan/411.html" title="鼠标悬停图片、文字css3效果">鼠标悬停图片、文字css3效果</a></p>
        <span>其实这样的效果也很常见，但是我平时用到很少，在其他网站看到这样的 </span> </li>
      <li>
        <p><a href="/web/qianduan/412.html" title="从摄影作品中获取网页颜色搭配技巧">从摄影作品中获取网页颜色搭配技巧</a></p>
        <span>作为一个优秀、专业的网页设计师，首先要了解各种颜色的象征，以及不 </span> </li>
      <li>
        <p><a href="/web/qianduan/401.html" title="给个人博客增加色彩元素提升网站用户体验">给个人博客增加色彩元素提升网站用户体验</a></p>
        <span>第一眼看到杨青个人博客网站的时候，如果你喜欢，那肯定是右边的颜色 </span> </li>
      <li>
        <p><a href="/web/qianduan/57.html" title="你应该知道的HTML5五大特性">你应该知道的HTML5五大特性</a></p>
/11.html" title="SEO优化中选择关键词需要注意什么?">SEO优化中选择关键词需要注意什么？</a></li>
        <li><a href="/web/seo/12.html" title="网站死链的查找、危害、形成及处理方法">网站死链的查找、危害、形成及处理方法</a></li>
        <li><a href="/web/seo/13.html" title="黑帽SEO优化方法解密">黑帽SEO优化方法解密</a></li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
  <div class="links">
    <h2 class="h_title"><span><a href="/" target="_blank">[ 申请 ]</a></span>友情链接</h2>
    <ul class="links_text">
      <li><a href="https://www.qingqingblog.com/" target="_blank">杨青青个人博客</a></li>
      <li><a href="http://www.ip3q.com/" target="_blank">IP3Q模板网</a></li>
      <li><a href="https://www.cax8.com/" target="_blank">个人博客模板</a></li>
      <li><a href="http://www.3dcax.com/" target="_blank">个人网站</a></li>
    </ul>
  </div>
</div>
<footer>
  <div class="box">
    <ul class="footer_nav">
      <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>
      <li><a href="" target="_blank">免责声明</a></li>
      <li><a href="" target="_blank">WAP</a></li>
    </ul>
    <p class="copyright">技术支持：<a href="/">天津青于蓝科技有限公司</a> <a href="/">XML网站地图</a> 备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">津ICP备20005778号-1</a> <img src="images/ga.png" alt="公安备案号">公安备案号 12011602000311</p>
  </div>
</footer>
</body>
</html>

💒CSS样式代码


@charset "utf-8";
/* CSS Document design by qingqingblog.com */

* { margin: 0; padding: 0 }
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; color: #000; background: url(../images/bg.png) no-repeat bottom right #f5f5f5; background-attachment: fixed; background-size: 300px; }
img { border: 0; display: block }
ul, li { list-style: none; }
a { text-decoration: none; color: #2c3e50; }
a:hover { color: #218af1; text-decoration: none; }
.clear { width: 100%; clear: both; overflow: hidden }
r: #fff; float: left; margin: 15px 5px 0 0; }
a.inputsub-zc { height: 26px; line-height: 26px; padding: 0 10px; border-radius: 3px; background: #0ec1d3; border: 0; color: #fff; display: inline-block; margin: 15px 5px 0 0; }
.sou #tab li { cursor: pointer; display: inline-block }
.sou #tab-content section { display: none; }
.sou #tab-content section:nth-child(1) { display: block }
.sou #tab { width: 50%; margin: auto; clear: both; overflow: hidden; border: 0; }
.sou #tab li { font-size: 15px; width: 54px; height: 28px; text-align: center; line-height: 28px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #666; padding: 0; margin-right: 2px }
.sou #tab li.tab-current { background-color: #F4543C; color: #fff; }
.sou #tab-content { margin: auto; overflow: hidden; width: 50%; }
.sou #tab li:nth-child(2).tab-current { background: #00c1de; }
.sou #tab li:after { display: none !important; }
.h_title { font-size: 18px; margin: 20px; }
.h_title span { float: right; font-size: 14px; font-weight: normal }
.h_title span a { color: #777 }
.side_left_news { width: 22%; margin-right: 2%; float: left; background: #fff; }
.side_right_news { width: 24%; float: right; background: #fff; }
.side_left_news ul, .side_right_news ul { padding: 0 20px 20px }
.zuijin ul li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 34px; position: relative; padding-left: 15px; }
.zuijin ul li:before { content: ""; width: 4px; height: 4px; border-radius: 4px; position: absolute; left: 0; top: 16px; background: #a8d4d7; }
.zuijin section { overflow: hidden; background: #f5f5f5; margin: 0 15px 15px; padding: 10px; }
.zuijin section p { font-weight: bold; margin: 8px 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.zuijin section span { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; font-size: 14px; color: #777; }
.zuijin section a { display: block; overflow: hidden; margin-bottom: 10px; }
.tuijian ul li { margin-bottom: 15px; border-bottom: #ccc 1px dashed; padding-bottom: 15px; }
.tuijian ul li:last-child { margin-bottom: 8px }
.tuijian ul li p { font-weight: bold; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuijian ul li span { color: #777; line-height: 24px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
/*banner*/
.main_box { width: 50%; float: left }
.banner { width: 100%; height: 310px; margin-bottom: 20px; }
.swiper-slide { position: relative }
.swiper-slide span { position: absolute; right: 0; font-size: 12px; padding: 2px 5px 2px 10px; top: 10px; background: #0CF; color: #fff; border-radius: 3px derline; }
.hnav a {display: block;margin-left: 10px;padding-left: 10px;float: left;position: relative;}
.hnav a:after { position: relative; content: "/"; right: -10px; bottom: 0; color: #ccc }
.hnav a:last-child::after { content: "" }
.news_fm {background: #fff;padding: 20px;margin-bottom: 20px;}
.news_fm h2 {font-size: 16px;margin-bottom: 10px;border-bottom: #f4f4f4 1px solid;padding-bottom: 11px;position: relative;}
.news_fm h2:after{position:absolute;content:"";width: 61px;height: 2px;background:#000;bottom: -1px;left: 0; transition:all .5s}
.news_fm h2 span { float: right; font-size: 14px; font-weight: normal; }
.news_fm h2 span a { color: #777 }
.news_fm h2 span a:hover { color:#000 }
.news_fm ul li {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 32px;position: relative;padding-left: 15px;}
.news_fm ul li:before {content: "";width: 4px;height: 4px;border-radius: 4px;position: absolute;left: 0;top: 14px;background: #a8d4d7;}
.news_fm ul li span { float: right; color: #777; font-size: 12px; }
.main_left .news_fm:last-child {
    margin-bottom: 0;
}
.side_right_box { width: 25%; float: right; background: #fff; }
.side_right_box ul { padding: 0 20px 20px; }

.list_news li:nth-child(10n) {margin-bottom: 26px;border-bottom: #eee 1px solid;padding-bottom: 25px;}
/*epages*/
.epages {text-align: center;color: #666;width: 100%;clear: both;padding-top: 10px;}
.epages a {color: #666;margin: 0 5px 10px;padding: 5px 10px;background: #f6f6f6;display: inline-block;}
.epages a:nth-child(1) { background: none; margin: 0; padding: 0 50px 0 0; position: relative }
.epages a:nth-child(1):after { position: absolute; content: "篇文章"; right: 0; bottom: 0 }
.epages a:nth-child(1):hover { background: none; color: #666 }
.epages a:hover, .epages > b { color: #FFF; background: #f4543c; }
.epages > b { padding: 5px 10px; }

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

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

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

上一篇：基于HTML+CSS

下一篇： 2022年大一网页期