目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片滚动、账号密码登录、非空验证、3D立体相册等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含9个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 欢迎进入 </title>
</head>
<body >
<div id="top">
<div id="wel">
<img src="images/wel-img.png" >
</div>
<ul>
<!-- <li><a href=""></a></li>
<li><a href=""></a></li> -->
<li><a href="registe.html">注册点我</a></li>
<li style="float: right; list-style: none;"><a href="data.html">点我看日期</a></li>
</ul>
</div>
<div id="clear">
</div>
<div id="main">
<!-- 显示数据要尽量分开 -->
<div id="wrap">
<div id="header">
<!-- 菜单 -->
<!-- ul#menu>li.menu-item{网站首页}*15 -->
<ul id="menu">
<li class="menu-item">
<a href="index.html">网站首页</a>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="#">用户功能</a>
<ul>
<li> <a href="login.html">登录</a></li>
<li><a href="registe.html">注册</a></li>
</ul>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="index.html#mes">新闻动态</a>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="index.html#info">场馆信息</a>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="feiyang.html">冬奥会火炬</a>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="bindundun.html">冰墩墩</a>
</li>
<li class="menu-fenge"></li>
<li class="menu-item">
<a href="chaoliu.html">全球潮流</a>
</li>
</ul>
</div>
</div>
<div id="lunbo">
<iframe src="lunbo.html" width="100%" height="600px" frameborder="0" scrolling="no"></iframe>
</div>
<div id="mes">
<a href="#mes">
<h2 style="margin-top: -80px; text-align: center; font-family: "隶书"; font-size: 20px;">
<img src="images/新闻.png" style="width: 30px; height: 30px;">
最新新闻信息</h2>
</a>
<div id="mes-left">
<img src="images/hj.jpeg" >
<div id="title">
<a href="feiyang.html">北京2022年冬奥会火炬</a>
</div>
<div id="mes-cen">
<img src="images/dun.png" >
<div id="title">
<a href="bindundun.html">冰墩墩（Bing Dwen Dwen）</a>
</div>
<div id="mes-right">
<img src="images/xin.png" >
<div id="title">
<a href="chaoliu.html">全球冬季运动新的时代</a>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
*{
/* 全局设定 */
padding: 0; /* 内边距 0px */
margin: 0; /* 外边距0px */
background-color: #BCEDFF;
}
#top{
width: 100%;
height: 60px;
margin-top: 5px;
line-height: 50px;
/* border: 1px solid red; */
border-bottom:solid 3px #0000FF ;
position: absolute;
}
#top ul li{
/* width: 100px; */
float: left;
/* margin-right: 100px; */
/* margin-left: 200px; */
margin-top: -100px;
/* font-family: "隶书"; */
font-size: 15px;
font-weight: bold;
list-style: square;
}
#top ul li a{
text-decoration: none;
color: #152b3c;
padding:15px 30px;
}
#top ul li a:hover{
border: 1px solid white;
border-radius:5%;
color: red;
}
#top #wel{
margin: -30px auto;
/* border: solid 1px red; */
width: 500px;
height: 70px;
}
#top #wel>img{
margin-top:-28px ;
width: 600px;
height: 100px;
margin-left: -50px;
}
#main #lunbo{
margin-top:100px ;
/* position: relative; */
}
#mes{
margin-top:-5px ;
/* border: 2px solid red; */
margin: -10px 160px;
/* float: left; */
}
#mes-left{
float: left;
width: 350px;
height: 500px;
/* border: 2px solid red; */
margin: 20px;
}
#mes-left a:hover{
border: 1px solid white;
border-radius:5%;
color: red;
}
#mes-left>img{
margin: 20px;
width: 300px;
height: 300px;
}
#mes-left #title{
background-color: #DDDDDD;
margin: 20px;
font-size: 30px;
text-decoration: none;
font-weight: bold;
font-family: "隶书";
text-align: center;
}
...
3.js
var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
var month_name = ["January","Febrary","March","April","May","June","July","Auguest","September","October","November","December"];
var holder = document.getElementById("days");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var ctitle = document.getElementById("calendar-title");
var cyear = document.getElementById("calendar-year");
var my_date = new Date();
var my_year = my_date.getFullYear();
var my_month = my_date.getMonth();
var my_day = my_date.getDate();
//获取某年某月第一天是星期几
function dayStart(month, year) {
var tmpDate = new Date(year, month, 1);
return (tmpDate.getDay());
}
//计算某年是不是闰年，通过求年份除以4的余数即可
function daysMonth(month, year) {
var tmp = year % 4;
if (tmp == 0) {
return (month_olympic[month]);
} else {
return (month_normal[month]);
}
}
function refreshDate(){
var str = "";
var totalDay = daysMonth(my_month, my_year); //获取该月总天数
var firstDay = dayStart(my_month, my_year); //获取该月第一天是星期几
var myclass;
for(var i=1; i<firstDay; i++){
str += "<li></li>"; //为起始日之前的日期创建空白节点
}
for(var i=1; i<=totalDay; i++){
if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){
myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
}else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){
myclass = " class='green greenbox'"; //当天日期以绿色背景突出显示
}else{
myclass = " class='darkgrey'"; //当该日期在今天之后时，以深灰字体显示
}
str += "<li"+myclass+">"+i+"</li>"; //创建日期节点
}
holder.innerHTML = str; //设置日期显示
ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
cyear.innerHTML = my_year; //设置年份显示
}
refreshDate(); //执行该函数
prev.onclick = function(e){
e.preventDefault();
my_month--;
if(my_month<0){
my_year--;
my_month = 11;
}
refreshDate();
}
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有兴趣的添加以下微信交流
标签：css3,网页,margin,31,month,var,冬奥会,my From： https://blog.csdn.net/A240307/article/details/144678705