674.大学生HTML期末大作业 —【大气的建筑装饰设计公司网页(10页)】 Web前端网页制作 html5+css3+js
目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页简介
本实例应用html5+css3+js： 导航菜单、图片轮翻、三级页面、无缝滚动插件、鼠标滑动特效、等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" /
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.theme.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body class="bg01">
<div class="mobile_header hidden-md hidden-lg">
<a href="index.html" class="logo">
<img src="images/logo.png.png"/>
</a>
<span class="menu_icon"></span>
<ul class="menu">
<li class="on"><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="cplist.html">陌森案例</a></li>
<li><a href="newslist.html">家装知识</a></li>
<li><a href="message.html">联系我们</a></li>
</ul>
</div>
<div class="header hidden-xs hidden-sm clearfix">
<div class="container">
<a href="index.html" class="logo">
<img src="images/png.png"/ style=" height: auto;">
</a>
<div class="nav">
<ul>
<li class="on"><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li ><a href="cplist.html">陌森案例</a></li>
<li ><a href="newslist.html">家装知识</a></li>
<li><a href="message.html">联系我们</a></li>
</ul>
</div>
</div>
</div>
<div id="slideBox" class="slideBox">
<div class="bd">
<ul>
<li>
<a class="pic" href="#"><img src="images/banner1.jpg" /></a>
</li>
<li>
<a class="pic" href="#"><img src="images/banner2.jpg" /></a>
</li>
</ul>
</div>
<span class="prev hidden-xs hidden-sm"></span>
<span class="next hidden-xs hidden-sm"></span>
<ul class="hd">
<li></li>
<li></li>
</ul>
</div>
<div class="index_section sec01">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="column_figure">
<img src="images/1.jpg"/>
</div>
<div class="column_content">
<div class="column_title text-center">
关于我们
</div>
<div class="column_con">
陌森装饰设计有限公司是一家集家居、别墅、办公及商业空间装饰设计、施工、建材销售为一体的集成型企业,三级资质,中国室内装饰协会会员，昆山建筑装饰协会会员，昆山市消费者协会认证“售后服务信得”单位，北京市首批“服务承诺宣言”装饰企业。
</div>
<div class="column_btn text-center">
<a href="关于我们.html">MORE</a>
</div>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* 去除iPhone中默认的input样式 */
input[type="submit"],
input[type="reset"],
input[type="button"],
input,
button {
/* -webkit-appearance:none; */
resize: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
button{
border: none;
}
/* 设置HTML5元素为块 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 图片自适应 */
img {
/*max-width: 100%;*/
height: auto;
width: auto\9;
/* ie8 */
-ms-interpolation-mode: bicubic;
/*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
border: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*取消链接高亮*/
}
body {
font-family: Microsoft YaHei, simhei, Tahoma, Arial, sans-serif;
color: #333333;
background-color: #FFFFFF;
}
em,
i {
font-style: normal;
}
strong {
font-weight: normal;
}
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
...
3.JS
代码如下（节选示例）：
$(function(){
var time = 7; //进度条时间，以秒为单位，越小越快
var $progressBar, $bar, $elem, isPause, tick, percentTime;
$('#owl-demo').owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
afterInit: progressBar,
afterMove: moved,
startDragging: pauseOnDragging
});
function progressBar(elem){
$elem = elem;
buildProgressBar();
start();
}
function buildProgressBar(){
$progressBar = $('<div>',{
id:'progressBar'
});
$bar = $('<div>',{
id:'bar'
});
$progressBar.append($bar).insertAfter($elem.children().eq(0));
}
function start(){
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
function interval(){
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+'%'
});
if(percentTime >= 100){
$elem.trigger('http://www.17sucai.com/preview/511164/2016-08-05/%E8%AE%BE%E8%AE%A1%E5%85%AC%E5%8F%B8/js/owl.next')
}
}
}
function pauseOnDragging(){
isPause = true;
}
function moved(){
clearTimeout(tick);
start();
}
//$elem.on('mouseover',function(){
// isPause = true;
// })
// $elem.on('mouseout',function(){
// isPause = false;
// });
});
$(function(){
$('#owl-demo5,#owl-demo6,#owl-demo2').owlCarousel({
items:4
});
});
$(function(){
$('#owl-demo2').owlCarousel({
items:3
});
});
$(function(){
$('#owl-demo2').owlCarousel({
items: 4,
autoPlay: 2000,
autoHeight: true,
transitionStyle: 'fade'
});
});
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
更多推荐
22
0- 0
已为社区贡献24条内容
所有评论(0)