目录
一、更多推荐
二、网页简介
三、网页文件
四、网页效果
五、代码展示
1.html
2.CSS
3.JS
六、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3+js：菜单栏、返回顶部按钮、搜索等。适用于大学生网页课程作业设计。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含4个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>《初见》响应式个人博客模板</title>
<meta name="keywords" content="个人博客，个人网站，个人博客模板，个人网站模板" />
<meta name="description" content="《初见》响应式个人博客模板是由前端设计师杨青青（www.qingqingblog.com）于2021年5月份设计完成的，模板主要展示个人博客、相册、视频、介绍等功能。" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/base.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js" ></script>
<script src="js/comm.js"></script>
</head>
<body>
<header>
<div class="box">
<div class="logo"><a href="/"><img src="images/logo.png" alt="logo"></a></div>
<div class="ad_top"><a href="/"><img src="images/ad01.jpg" alt="广告"></a></div>
<div class="contact_icon">
<ul>
<li><a href="http://wpa.qq.com/msgrd?v=3&uin=476847113&site=qq&menu=yes"><i class="icon_qq"></i></a></li>
<li><a href="tel:186491309**"><i class="icon_tel"></i></a></li>
<li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=476847113@qq.com" target="_blank"><i class="icon_email"></i></a></li>
<li><i class="icon_weixin"><img src="images/wx.png" alt="微信号：476847113"></i></li>
</ul>
</div>
<div class="clear"></div>
<nav>
<ul id="starlist">
<li><a href="index.html">网站首页</a></li>
<li><a href="blog.html">博文日记</a></li>
<li class="menu"><a href="#">所有内容</a>
<ul class="sub">
<li><a href="blog_info.html">文章内容</a></li>
<li><a href="photos_info.html">相册内容</a></li>
<li><a href="videos_info.html">视频内容</a></li>
<li><a href="page_info.html">单页内容</a></li>
</ul>
<span></span></li>
<li><a href="photos.html">我的相册<i></i></a></li>
<li><a href="videos.html">我的视频</a></li>
<li><a href="about.html">个人简历</a></li>
</ul>
<h2 id="mnavh"><span class="navicon"></span></h2>
<div class="is-search"> <i></i> </div>
<div class="search-page">
<div class="search_box">
<div class="go-left"></div>
<div class="search">
<form action="http://zhuanti.ip3q.com/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);" οnfοcus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" οnblur="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 name="Submit" class="input_submit" value="搜索" type="submit">
</form>
</div>
</div>
</div>
<!--search end-->
</nav>
</div>
</header>
<div class="ph_margin"></div>
<!-- banner -->
<div class="banner_box">
<ul class="banner">
<li><a href="/" target="_blank"><img src="images/01.jpg">
<section><span>创造时尚1</span>
<p>轻薄素颜妆让你与众不同</p>
</section>
</a></li>
<li><a href="/" target="_blank"><img src="images/02.jpg">
<section><span>创造时尚2</span>
<p>轻薄素颜妆让你与众不同</p>
</section>
</a></li>
<li><a href="/" target="_blank"><img src="images/03.jpg">
<section><span>创造时尚3</span>
<p>轻薄素颜妆让你与众不同</p>
</section>
</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="box">
<div class="featured_news">
<div class="featured_nav">
<h2 class="h_title">精选文章</h2>
<ul id="tab">
<li class="tab-current"><a href="/" target="_blank">栏目名称</a></li>
<li><a href="/" target="_blank">栏目名称</a></li>
<li><a href="/" target="_blank">栏目名称</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="tab-content">
<section class="tab-box">
<div class="f_news_pic"><i><img src="images/04.jpg" alt=""></i>
<div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记</a>
<p class="f_news_title"><a href="/">个人博客，属于我的小世界！</a></p>
<p class="f_news_info"><span>2021-05-01</span><span>3090</span></p>
</div>
</div>
<ul class="f_news_list">
<li><a href="/"><i><img src="images/news01.jpg" alt=""></i>
<p>十条设计原则教你学会如何设计网页布局!</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news02.jpg" alt=""></i>
<p>为什么说10月24日是程序员的节日？</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news03.jpg" alt=""></i>
<p>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</p>
<span>2018-11-08</span></a></li>
</ul>
</section>
<section class="tab-box">
<div class="f_news_pic"><i><img src="images/05.jpg" alt=""></i>
<div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记</a>
<p class="f_news_title"><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></p>
<p class="f_news_info"><span>2021-05-01</span><span>3090</span></p>
</div>
</div>
<ul class="f_news_list">
<li><a href="/"><i><img src="images/news04.jpg" alt=""></i>
<p>10年前的个人博客模板设计风格，你都还有印象吗？</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news05.jpg" alt=""></i>
<p>2020年个人博客还有哪些个人网站站长在坚持？</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news06.jpg" alt=""></i>
<p>记录下我第一次在阿里云618活动做直播的感受和心得</p>
<span>2018-11-08</span></a></li>
</ul>
</section>
<section class="tab-box">
<div class="f_news_pic"><i><img src="images/06.jpg" alt=""></i>
<div class="f_news_pic_box"><a href="/" target="_blank" class="f_news_tag">博文日记</a>
<p class="f_news_title"><a href="/">为什么说10月24日是程序员的节日？</a></p>
<p class="f_news_info"><span>2021-05-01</span><span>3090</span></p>
</div>
</div>
<ul class="f_news_list">
<li><a href="/"><i><img src="images/news07.jpg" alt=""></i>
<p>世界上根本没有感同身受这回事</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news02.jpg" alt=""></i>
<p>兴趣支撑梦想，兴趣是支撑我自己前行的动力</p>
<span>2018-11-08</span></a></li>
<li><a href="/"><i><img src="images/news03.jpg" alt=""></i>
<p>忙碌是自由活着的一种底气</p>
<span>2018-11-08</span></a></li>
</ul>
</section>
</div>
</div>
<!--featured_news-->
<div class="mycard">
<section>
<p class="mycard_title">个人名片</p>
<p class="mycard_title_en">my</p>
<p class="mycard_title_en">profile</p>
<div class="ewm"><img src="images/wx.png" alt="二维码"></div>
<i><img src="images/avatar.png" alt="头像"></i>
<ul>
<li><span>name</span>杨青青</li>
<li><span>job</span>前端设计师、程序员</li>
<li><span>web</span><a href="https://www.qingqingblog.com/" target="_blank">www.qingqingblog.com</a></li>
<li><span>add</span>天津市滨海新区</li>
</ul>
</section>
</div>
<div class="clear"></div>
<div class="featured_pics">
<ul>
<li><a href="/"><i><img src="images/01.jpg" alt=""></i>
<section>
<p>毕业相册</p>
<span>6</span></section>
</a></li>
<li><a href="/"><i><img src="images/02.jpg" alt=""></i>
<section>
<p>宝宝成长记录</p>
<span>23</span></section>
</a></li>
<li><a href="/"><i><img src="images/03.jpg" alt=""></i>
<section>
<p>婚礼相册</p>
<span>8</span></section>
</a></li>
<li><a href="/"><i><img src="images/04.jpg" alt=""></i>
<section>
<p>旅行纪念</p>
<span>6</span></section>
</a></li>
<li><a href="/"><i><img src="images/05.jpg" alt=""></i>
<section>
<p>写真相册</p>
<span>4</span></section>
</a></li>
</ul>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document
design by www.qingqingblog.com
*/
* { margin: 0; padding: 0 }
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; background: #f3f8fb; color: #001737; }
img { border: 0; display: block }
ul, li { list-style: none; }
a { text-decoration: none; color: #001737; }
a:hover { color: #012684; text-decoration: none; }
.clear { clear: both; width: 100%; overflow: hidden; }
.box { width: 1200px; margin: auto; }
/*header*/
header { padding-top: 20px; position: relative; height: 140px; background: #fff; margin-bottom: 60px; }
.logo { float: left }
.ad_top { float: left; margin-left: 100px; width: 550px; height: 80px; overflow: hidden }
.ad_top img { width: 100%; }
/*contact_icon*/
.contact_icon { float: right; margin: 20px 0 0 0; }
.contact_icon ul li { display: inline-block; }
.contact_icon ul li i { width: 36px; height: 36px; border-radius: 100%; display: block; transition: .3s; margin-left: 10px; }
.icon_qq { background: url(../images/icon_qq.png) no-repeat center #f3f8fb }
.icon_tel { background: url(../images/icon_tel.png) no-repeat center #f3f8fb }
.icon_email { background: url(../images/icon_email.png) no-repeat center #f3f8fb }
.icon_weixin { background: url(../images/icon_weixin.png) no-repeat center #f3f8fb; position: relative; cursor: pointer }
.contact_icon ul li i img { position: absolute; top: 36px; right: -54px; display: none; box-shadow: 0px 9px 24px rgb(0 0 0 / 5%); }
.icon_weixin:hover img { display: block; z-index: 9 }
.icon_qq:hover { background: url(../images/icon_qq_b.png) no-repeat center #012684 }
.icon_tel:hover { background: url(../images/icon_tel_b.png) no-repeat center #012684 }
.icon_email:hover { background: url(../images/icon_email_b.png) no-repeat center #012684 }
.icon_weixin:hover { background: url(../images/icon_weixin_b.png) no-repeat center #012684; }
/*nav*/
nav {line-height: 76px;height: 76px;padding-left: 50px;border-radius: 10px;margin-top: 20px;position: relative;background: #012684;background: linear-gradient(90deg, #012684 0%, #026b70 100%)}
#starlist li { position: relative; display: inline-block; font-size: 18px; text-align: center; font-weight: bold; }
...
3.JS
代码如下（节选示例）：
$(document).ready(function() {
//search
$(".is-search,.go-left").click(function() {
$(".search-page").toggle();
});
$('#tab li').hover(function(){
$(this).addClass('tab-current').siblings().removeClass('tab-current');
$('#tab-content>section:eq('+$(this).index()+')').show().siblings().hide();
});
//nav
$("#mnavh").click(function(){
$("#starlist").toggle();
$("#mnavh").toggleClass("open");
$(".sub").hide();
});
//nav menu
$(".menu").click(function(event) {
$(this).children('.sub').slideToggle();
$(this).siblings('.menu').children('.sub').slideUp('');
event.stopPropagation()
});
$(".menu a").click(function(event) {
event.stopPropagation();
});
$(".sub li").click(function(event) {
event.stopPropagation();
});
//scroll to top
var offset = 300,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $('.icon-top');
$(window).scroll(function () {
($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('cd-fade-out');
}
});
$back_to_top.on('click', function (event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration
);
});
...
六、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
