463.宽屏的网络技术科技公司网站大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

于 2024-08-29 15:00:01 发布

阅读量730

点赞数 12

分类专栏： Web网页设计实例科技文章标签：前端 html css javascript jquery html5 css3

本文链接：https://blog.csdn.net/A240307/article/details/141678870

版权

Web网页设计实例同时被 2 个专栏收录

458 篇文章 24 订阅

订阅专栏

科技

8 篇文章 1 订阅

订阅专栏

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

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

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

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

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

一、网页概述

本实例应用html5+css+js：导航菜单、图片轮翻、无缝滚动插件、鼠标滑动特效、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含7个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta name="full-screen" content="yes">
<link rel="stylesheet" href="css/cui.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/less.css" />
</head>
<body>
<div id="hd">
<div class="wp">
<div class="logo"><a href="index1"><img src="images/logo.png" alt=""></a></div>
<div id="nav">
<ul>
<li><a href="index.html" style="color:#e4392a; border-bottom:3px solid #e4392a;">首页</a></li>
<li><a href="about.html" >关于思恩</a></li>
<li><a href="service.html" >思恩服务</a></li>
<li><a href="case.html" >思恩案例</a></li>
<li><a href="news.html" >思恩动态</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="tel">400-008-0408</div>
</div>
</div>
<div class="c"></div>
<div id="m-hd">
<a href="index1" class="m-logo"><img src="images/logo.png" alt=""></a>
<div class="m-trigger"></div>
<ul class="m-nav">
<li><a href="index.html" class="v1">首页 </a></li>
<li><a href="about.html" class="v1">关于思恩</a></li>
<li><a href="service.html" class="v1">思恩服务</a></li>
<li><a href="case.html" class="v1">思恩案例</a></li>
<li><a href="news.html" class="v1">思恩动态</a></li>
<li><a href="contact.html" class="v1">联系我们</a></li>
</ul>
</div>
<div class="c"></div> <div id="bd">
<div id="banner">
<div class="banner-bg"></div>
<div class="flexslider">
<ul class="slides">
<li class="s1">
<img src="images/banner1.jpg">
<div class="ban-txt">
<h5 data-animate="fadeInDown" class="animated">innovating for you</h5>
<h2 data-animate="fadeInRight" class="animated">用整合的思想做互动</h2>
<h3 data-animate="fadeInUp" class="animated">不只是建站，更提供有价值的思路和整体服务</h3>
</div>
</li>
<li class="s2">
<img src="images/banner2.jpg">
<div class="ban-txt">
<h2 data-animate="fadeInRight" class="animated">9年资深网站建设经验</h2>
<h3 data-animate="fadeInDown" class="animated">WEBSITE DESIGN</h3>
<h4 data-animate="fadeInUp" class="animated">我们专注于品质化高端网站构建，企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。</h4>
<h6 data-animate="fadeInUp" class="animated">www.sien.com.cn</h6>
</div>
</li>
<li class="s3">
<img src="images/banner3.jpg">
<div class="ban-txt">
<h2 data-animate="fadeInDown" class="animated">高端定制品牌设计</h2>
<h3 data-animate="fadeInRight" class="animated">Corporate website</h3>
<h4 data-animate="fadeInUp" class="animated">思恩致力于为客户提供最具有竞争力的网站，将每个案例都做成经典。</h4>
</div>
</li>
</ul>
</div>
</div>

<div class="row1 fix">
<div class="wp">
<div class="tit-i">
<h3>思恩服务</h3>
<h5>WEBTHINK <span>SERVICE</span></h5>
</div>
<ul class="ul-icon-i">
<li class="li1">
<div class="pad">
<a href="">
<span></span>
<h3>高端网站建设</h3>
<em></em>
<p>根据用户的需求、市场状况、企业情况提供专业化的网站策划、交互设计、技术和营销解决方案。</p>
<div class="pic">
<img src="images/m1.png" alt="">
<img src="images/m2.png" alt="" class="pic-icon">
</div>
</a>
</div>
</li>
<li class="li2">
<div class="pad">
<a href="">
<span></span>
<h3>手机网站建设</h3>
<em></em>
<p>在移动互联时代，我们得出“简单使用，精彩体验”的移动应用开发理念，创造属于无线时代的精彩互联。</p>
<div class="pic">
<img src="images/m3.png" alt="">
<img src="images/m4.png" alt="" class="pic-icon">
</div>
</a>
</div>
</li>
<li class="li3">
<div class="pad">
<a href="">
<span></span>
<h3>微信应用开发</h3>
<em></em>
<p>为客户提供全方位的移动端营销服务，微信公众平台开发，微站设计。</p>
<div class="pic">
<img src="images/m5.png" alt="">
<img src="images/m6.png" alt="" class="pic-icon">
</div>
</a>
</div>
</li>
<li class="li4">
<div class="pad">
<a href="">
<span></span>
<h3>手机APP开发</h3>
<em></em>
<p>按客户意图来定制开发app系统，IOS 安卓任您挑选，持续为企业无线创造新价值。</p>
<div class="pic">
<img src="images/m7.png" alt="">
<img src="images/m8.png" alt="" class="pic-icon">
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row2 fix">
<div class="wp">
<div class="tit-i">
<h3>思恩案例</h3>
<h5><span>case</span> of webthink</h5>
</div>
<div class="case-i">

<div class="case-i-r" style="width: 100%;">
<ul class="ul-case-i">
<li>
<a href="case_info_4_110.html">
<div class="pic"><img src="images/14429937588106.jpg"></div>
<div class="hover">
<b></b>
<div class="txt">
<img src="images/logo_small.png" alt="">
<h3>LMP品牌站官网</h3>
</div>
</div>
</a>
</li>
<li>
<a href="case_info_4_54.html">
<div class="pic"><img src="images/14425590613750.jpg"></div>
<div class="hover">
<b></b>
<div class="txt">
<img src="images/logo_small.png" alt="">
<h3>连洋鞋业网站</h3>
</div>
</div>
</a>
</li>
<li>
<a href="case_info_4_52.html">
<div class="pic"><img src="images/14423045107241.jpg"></div>
<div class="hover">
<b></b>
<div class="txt">
<img src="images/logo_small.png" alt="">
<h3>礼悦利达</h3>
</div>
</div>
</a>
</li>
<li>

...

2.CSS

代码如下（节选示例）：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.trans{
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
hr{border: none;outline: none;}
h1,h2,h3,h3,h4,h5,h6{font-weight: normal;}
img{
max-width: 100%;
}

body{
   font-family:"微软雅黑","Microsoft Yahei";
}
.wp{
   width: 100%;
   max-width: 1170px;
   margin: 0 auto;
}
a{
   color: #333;
}
a:hover{
   color: #e4392a;
}

/*头部*/
#bd{
   padding-top: 90px;
}
#hd{
   /*height: 101px;*/
   height: 90px;
   background: #fff;
   box-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
   position: fixed;
   width: 100%;
   left: 0;
   top: 0;
   z-index:9999;
   -o-transition:.3s;
   -ms-transition:.3s;
   -moz-transition:.3s;
   -webkit-transition:.3s;
   transition:.3s;
}
.fixed{
top: -101px !important;
}

#hd .logo{
   float: left;
   margin-right: 65px;
   /*height: 101px;*/
   height: 90px;
}
#hd .logo a{
   display: block;
   height: 100%;
   /*line-height: 101px;*/
   line-height: 90px;
}
#hd .logo a img{
   display: inline-block;
   vertical-align: middle;
}

#nav ul li{
   float: left;
   line-height: 90px;
   width: 100px;
   margin-right: 10px;
}
#nav ul li a{
   display: inline-block;
   width: 100%;
   text-align: center;
   font-size: 16px;
   border-bottom: 3px solid #fff;
   height: 90px;
}
#nav ul li a:hover{
   border-bottom: 3px solid #e4392a;
}

...

3.JS

代码如下（节选示例）：

//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.482565,39.912019),17);//116.483349,39.912975
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
var markers = [
{content:"",title:"",imageOffset: {width:-46,height:-21},position:{lat:39.912588,lng:116.46682}}
];
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
})});
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
marker.setLabel(label);
addClickHandler(marker,infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,type:0});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

仙女网页制作

关注

12
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
463.宽屏的网络技术科技公司网站大学生期末大作业 Web前端网页制作 html5+css+js

本实例应用html5+css+js：导航菜单、图片轮翻、无缝滚动插件、鼠标滑动特效、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
复制链接

扫一扫