一、什么是Web前端？
Web前端一般由多种开发技术制作，是给用户展示的网页页面，就是我们所说的网站的前台部分。
所谓的多种开发技术，其中包含：
HTML
CSS
JavaScript
jQuery
BT（Bootstrap）
1.什么是HTML?
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML的特点
简单灵活；
可扩展性，HTML采取子类元素的方式，为系统扩展带来保证；
平台无关性，HTML可以使用在广泛的平台上；
2.Web的工作原理：
HTTP协议
定义：HTTP（Hyper Text Transfer Protocol）超文本传输协议是万维网客户端与服务器端交互遵守的协议，是一个应用层的协议，使用TCP连接进行可靠的传输。
HTTP的基本思想：客户端给服务器发送请求，服务器向客户发送响应。HTTP事务有两种类型：请求和响应
一次HTTP操作称为一个事务，其工作过程可分为四步：
首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作就开始了。
建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接。
如果在以上过程中的某一步出现错误，那么产生错误的信息将返回到客户端，有显示屏输出。对于用户来说，这些过程是由HTTP自己完成的，用户只要用鼠标点击，等待信息显示就可以了。
3.Web开发基本概念
web服务器：提供web服务的计算机。
URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。
组成：协议、服务器地址、资源路径。
互联网发展：web1.0 web2.0 移动互联网
web开发过程：项目提出、需求分析、设计（UI设计、系统设计）、开发（前端开发、后台开发）、系统测试、发布维护。
网站类型：
(1)、按网站主体性质划分：政府网站、教育科研网站、企业网站、商业网站、个人网站
(2)、按网站功能划分：宣传展示型网站、营销型网站、电子商务、网上购物、门户网站
树形结构：有主页有分支有叶子。扁平结构：扁平结构可以理解为是一种特殊的树形结构， 只有主干和树叶，是当前流行的一种网站结构，对 搜索引擎特别友好。
页面分类：首页：也称主页，是一个网站的入口网页。
列表页：一般都是二级页面，是栏目的具体展示页。
内容页：一般就是具体内容的页面。
网站访问过程：
⑴ 通过输入网址（URL）指定要访问的网页。
⑵ 浏览器向服务器发送请求：请把XXX网页文件传送给我。
⑶ 服务器做出响应：把XXX网页文件传送给浏览器。
⑷ 浏览器解析网页文件，呈现出网页。
软件架构分类及各自特征：
B/S架构
无需安装特定客户端程序，通过URL访问
跨平台能力（Windows、Linux、Android、IOS…）
无缝升级，客户端免维护
不能直接使用客户端硬件资源，用户体验单一
学习Web开发的意义
掌握HTML、CSS语言
能够构建内容丰富、界面美观的Web页面
掌握相关开发、调试工具的使用方法
为后续Java、PHP等 课程打下基础
二、web的特点
1）一体性
Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。
（2）独立性
无论用户的系统平台是什么，你都可以通过Internet访问WWW，浏览WWW对系统平台没有什么限制。
（3）交互性
Web的交互性首先表现在它的超链接上，用户的浏览顺序和所到站点完全由他自己决定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息。
1
三、项目应用开发过程
我们小组制作的是民族服饰网站
我所负责的部分是网站的首页，网站首页的特点：视觉方面简洁优美，
内容上通俗易懂，
降低留存风险并让访问者快速了解网站内容和品牌形象。
1、使用Web知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用。
首页源码：
1.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style>
yy{
font-family:"华文宋体";
color: #0044cc;
}
</style>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="职等你来">
<title>Job</title>
<link href="../static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}">
<!-- Bootstrap
================================================== -->
<link rel="stylesheet" type="text/css" href="../static/css/common/bootstrap.css" th:href="@{/css/common/bootstrap.css}">
<link rel="stylesheet" type="text/css" href="../static/css/common/jasny-bootstrap.min.css" th:href="@{/css/common/jasny-bootstrap.min.css}">
<link rel="stylesheet" type="text/css" href="../static/css/common/animate.css" th:href="@{/css/common/animate.css}">
<!-- Slider
================================================== -->
<link type="text/css" href="../static/css/common/owl.carousel.css" rel="stylesheet" media="screen" th:href="@{/css/common/owl.carousel.css}">
<link type="text/css" href="../static/css/common/owl.theme.css" rel="stylesheet" media="screen" th:href="@{/css/common/owl.theme.css}">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="../static/css/index/style.css" th:href="@{/css/index/style.css}">
<link rel="stylesheet" type="text/css" href="../static/css/common/responsive.css" th:href="@{/css/common/responsive.css}">
<!-- Mine
================================================== -->
<link rel="stylesheet" href="../static/css/common/common.css" th:href="@{/css/common/common.css}">
<link rel="stylesheet" href="../static/css/index/index.css" th:href="@{/css/index/index.css}">
</head>
<body>
<header class="jobbridge-header has-transition">
<div class="header-box">
<a href="/" class="logo" style="background: url('../static/img/comlogo/jobbridge.png') no-repeat" th:style="'background:url(' + @{/img/comlogo/jobbridge.png} + ') no-repeat;'"></a>
<div class="header-right">
<div class="signIn">
<a href="/sign_in?originPage=index" class="signIn-button">
<span>登 录</span>
</a>
</div>
</div>
<ul class="main-menu">
<span class="menu-line" hidden = "hidden"></span>
<li class="main-menu-li">
<a href="/">
<span>主页</span>
</a>
</li>
<li class="main-menu-li">
<a href="/recruit/info">
<span>职位信息</span>
</a>
</li>
<li class="main-menu-li">
<a href="/connection/index">
<span>职场资讯</span>
</a>
</li>
<li class="main-menu-li">
<a id = "Entrance" href="/">
<span>个人信息</span>
</a>
</li>
</ul>
</div>
</header>
<div class="jobbridge-containter">
<div id="home">
<div class="container text-center">
<div class="content">
<h1>衣只等你</h1>
<hr>
<div class="header-text btn">
<h1><span id="head-title"></span></h1>
</div>
</div>
<a href="#meet-us" class="down-btn page-scroll">
<span class="fa fa-angle-down"></span>
</a>
</div>
</div>
<div class="jb-service">
<div class="module-title PAGE_WIDTH">
</div>
<!-- Meet Us Section -->
<div id="meet-us">
<div class="container">
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<div class="section-title">
<h2>衣只等你</h2>
<hr>
</div>
<p id="yy">衣只等你是一座连接世界游客与柳州民族服饰行业的桥梁</p>
<br>
<p>生活是自己的</p>
<br>
<p>尽情美丽，尽情装扮！！！</p>
<a href="#stu-entry" class="down-btn page-scroll">
<span class="fa fa-angle-down"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="jb-describe">
<!-- Call-to-Action Section -->
<div style="background: #e77c9a; padding: 4%">
<p style="text-align: center; font-size: 20px; color: #fff">你可以在衣只等你得到什么</p>
</div>
<!-- stu-entry Section -->
<div id="stu-entry">
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title">
<br>
<h2>用户</h2>
<hr>
</div>
</div>
</div>
<div class="space"></div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-file-pdf-o fa-3x"></span>
<h4>在线挑选</h4>
<p>我们网站可挑选专业化妆师，专业摄影师；在线挑选服装挑选心仪摄影师，在线选妆，一站式服务</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-newspaper-o fa-3x"></span>
<h4>服装信息</h4>
<p>海量服饰信息，覆盖各种类型；服装信息推送，让你目不暇接</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-check fa-3x"></span>
<h4>优质服务</h4>
<p>衣只等你平台将会提供优质的服务，请放心食用 </p>
</div>
</div>
</div>
<a href="#com-entry" class="down-btn page-scroll">
<span class="fa fa-angle-down"></span>
</a>
</div>
</div>
<!-- Call-to-Action Section -->
<div class="interlayer" style="background: #e77c9a; padding: 1%">
</div>
<!-- com-entry Section -->
<div id="com-entry">
<div class="container">
<div class="row text-center">
<div class="col-md-8 col-md-offset-2">
<div class="section-title">
<h2>店铺</h2>
<hr>
</div>
</div>
</div>
<div class="space"></div>
</div>
<div class="container text-center">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-users fa-3x"></span>
<h4>联合营销</h4>
<p>柳州相关民族服饰行业进行合作，共同开展营销活动，实现资源共享和互利共赢</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-tags fa-3x"></span>
<h4>易扩展</h4>
<p>无论你身在何处，只需点击一个按钮，就可添加啊几乎无限数量的产品到我们的网站</p>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="service">
<span class="fa fa-desktop fa-3x"></span>
<h4>平台系统支持</h4>
<p>我们平台拥有完善的系统支持，包括店铺管理、订单管理等功能。商家只需遵循我们平台的规则，使用我们平台系统管理店铺和商品即可</p>
</div>
</div>
</div>
</div>
<div class="space"></div>
<div class="text-center">
<br>
<a href="#clients" class="down-btn page-scroll"><span class="fa fa-angle-down"></span></a>
</div>
</div>
</div>
<div class="jb-chose">
<!-- Clients Section -->
<div id="clients">
<div class="overlay">
</div>
</div>
</div>
</div>
<div class="main-copyright">
<p>常信院 © 2021 职等你来 </p>
</div>
</footer>
<script type="text/javascript" src="../static/js/common/jquery-1.11.0.min.js" th:src="@{/js/common/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" src="../static/js/common/typed.js" th:src="@{/js/common/typed.js}"></script>
<script type="text/javascript" src="../static/js/common/bootstrap.js" th:src="@{/js/common/bootstrap.js}"></script>
<script type="text/javascript" src="../static/js/common/SmoothScroll.js" th:src="@{/js/common/SmoothScroll.js}"></script>
<script type="text/javascript" src="../static/js/common/jasny-bootstrap.min.js" th:src="@{/js/common/jasny-bootstrap.min.js}"></script>
<script type="text/javascript" src="../static/js/common/owl.carousel.js" th:src="@{/js/common/owl.carousel.js}"></script>
<script type="text/javascript" src="../static/js/common/index.js" th:src="@{js/common/index.js}"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.main-menu").mouseleave(
function () {
$("span.menu-line").attr("hidden","hidden")
$("span.menu-line").css({"opacity": "0", "width": "0"});
$("span.menu-line").removeClass("transition");
}
);
$("ul>li.main-menu-li").hover(
function(e) {
e.stopPropagation();
$(this).addClass("hover");
var left = $(this).offset().left;
var width = $(this).width();
if ($("span.menu-line").attr("hidden")) {
$("span.menu-line").removeAttr("hidden").offset({left:left}).css({"display":"inline", "opacity":"1"});
$("span.menu-line").animate({width:width},'fast');
} else {
$("span.menu-line").addClass("transition");
$("span.menu-line").css({"left": left, "width": width, "opacity": "1", "display": "inline"});
}
},
function(e) {
//e.stopPropagation();
$(this).removeClass("hover");
if(($("ul>li.main-menu-li").hasClass('hover'))) {
$("span.menu-line").css({"opacity": "0", "width": "0"});
$("span.menu-line").removeClass("transition");
}
}
);
$(function () {
$("#head-title").typed({
strings: ["入梦龙城^1000,着族之裳^1600,现娉婷之姿^2000!^800"],
typeSpeed: 100,
loop: true,
startDelay: 100
});
});
});
</script>
<script th:inline="javascript">
/*<![CDATA[*/
var loginUser = [[${loginUser}]];
console.log(loginUser);
if(loginUser!==null){
$("div.signIn").remove();
$("div.header-right").append("<div class='user'>\n" +
" <a href='javascript:;' class='user-info'>\n" +
" <span class='uinfo'>\n" +
" <span class='uname'>\n" +
" <i class=\"fa fa-user headshot\"></i>\n" +
" <b>" + loginUser.userName + "</b>\n" +
" </span>\n" +
" </span>\n" +
" </a>\n" +
" <div class='user-control'>\n" +
" <div class ='uc-menu'>\n" +
" <ul class='uc-menu-ul'>\n" +
" <li class='uc-menu-li'>\n" +
" <a href='/sign_out'>退出</a>\n" +
" </li>\n" +
" </ul>\n" +
" </div>\n" +
" </div>");
if(loginUser.identity === 's'){
$("#settings").attr("href","/student/info");
$("#Entrance").attr("href","/student/info");
}
else if(loginUser.identity === 'e'){
$("#settings").attr("href","/company/info");
$("#Entrance").attr("href","/company/info");
}
else{
$("#settings").attr("href","/admin/add_admin");
$("#Entrance").attr("href","/admin/add_admin");
}
}
</script>
</body>
</html>
2.css
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
body, html{
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
overflow-y: auto;
overflow-x: hidden;
font-family: 'Montserrat', sans-serif;
}
@media (min-width: 1200px){
.container {
width: 960px;
}
}
h1{
font-weight: 700;
font-size: 46px;
}
h2{
text-transform: uppercase;
font-size: 20px;
}
h3{
font-size: 14px;
font-style: italic;
font-weight: 100;
line-height: 26px;
}
h4{
text-transform: uppercase;
font-size: 16px;
word-spacing: 2px;
}
h5{
text-transform: uppercase;
font-size: 12px;
word-spacing: 2px;
}
h6{
text-transform: uppercase;
font-size: 10px;
word-spacing: 2px;
letter-spacing: 2px;
}
p{
font-weight: 400;
}
hr{
width: 50px;
border-color: #c59a6d;
}
a {color: #222222}
a:hover,
a:focus{
color: #c59a6d;
text-decoration: none;
}
.copyrights{
text-indent:-9999px;
height:0;
line-height:0;
font-size:0;
overflow:hidden;
}
#home{
background: url(../img/bg10.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: auto;
min-height: 710px;
padding-top: 60px;
color: #ffffff;
}
#home a.down-btn span.fa.fa-angle-down {
font-size: 26px;
border: 1px solid #c59a6d;
border-radius: 2px;
padding: 7px 5px;
position: relative;
margin-top: 100px;
color: #ffffff;
cursor: pointer;
}
.content{
padding-top: 16%;
}
.header-text.btn{
border: 1px solid #ffffff;
border-radius: 0;
padding: 10px 30px;
height: 100px;
}
.header-text.btn:hover{
color: inherit;
}
.header-text.btn:focus,
.header-text.btn:active:focus,
.header-text.btn.active:focus,
.header-text.btn.focus,
.header-text.btn:active.focus,
.header-text.btn.active.focus {
outline: thin dotted transparent;
outline: none;
outline-offset: -2px;
}
.typed-cursor {
opacity: 1;
padding: 10px 2px;
background: #ffffff;
margin: 10px;
-webkit-animation: blink 0.5s linear infinite;
-moz-animation: blink 0.5s linear infinite;
animation: blink 0.5s linear infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
span.typed-cursor {
top: -5px;
position: relative;
}
/*.header-text{
margin-top: 20px;
position: absolute;
border: 1px solid #ffffff;
left: 25%;
right: 25%;
}
.header-text h1{
padding: 20px;
position: relative;
margin: 0 auto;
}*/
nav#menu span.fa.fa-bars{
font-size: 30px;
position: fixed;
left: 120px;
color: #c0c0c0;
cursor: pointer;
z-index: 1;
}
.navmenu, .navbar-offcanvas {
width: 270px;
z-index: 10;
}
.navmenu-default,
.navbar-default .navbar-offcanvas {
background-color: #1E2429;
border-color: #1E2429;
border: 0;
}
.navmenu-default .navmenu-nav>li>a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav>li>a:hover,
.navmenu-default .navmenu-nav>li>a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav>li>a:focus {
color: #C59A6D;
background-color: transparent;
}
.nav > li {
position: relative;
display: block;
text-align: center;
}
.navmenu-default .navmenu-nav>li>a,
.navbar-default .navbar-offcanvas .navmenu-nav>li>a {
color: #ffffff;
text-transform: uppercase;
font-size: 12px;
line-height: 30px;
}
nav#menu span.fa.fa-bars:hover {
color: #C59A6D;
}
.navmenu-default .navmenu-nav>.active>a,
.navbar-default .navbar-offcanvas .navmenu-nav>.active>a,
.navmenu-default .navmenu-nav>.active>a:hover,
.navbar-default .navbar-offcanvas .navmenu-nav>.active>a:hover,
.navmenu-default .navmenu-nav>.active>a:focus,
.navbar-default .navbar-offcanvas .navmenu-nav>.active>a:focus {
color: #C59A6D;
background-color: transparent;
}
.close:hover{
background: #c59a6d;
color: #ffffff;
opacity: 1;
}
.close{
background: #fff;
padding: 10px 12px;
opacity: 1;
transition: all 0.3s;
}
.add-margin{
margin-top: 200px;
}
#meet-us,
#services,
#works,
#about-us{
padding: 60px 0;
}
a.down-btn span.fa.fa-angle-down {
font-size: 26px;
border: 1px solid #c59a6d;
border-radius: 2px;
padding: 7px 5px;
position: relative;
cursor: pointer;
color: #c59a6d;
margin-top: 30px;
}
#overview-video {
background: url(../img/bg26.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
text-align: center;
}
#overview-video .overlay{
background: rgba(34, 34, 34, 0.85);
height: auto;
min-height: 200px;
padding: 12% 0 ;
}
#overview-video a span.fa.fa-play {
font-size: 40px;
color: #fff;
text-align: center;
margin: auto 0;
}
.service{
border: 1px solid #222;
margin-top: 20px;
margin-bottom: 0px;
transition: all 0.3s;
position: relative;
padding: 60px 25px;
}
.service:hover>h4,
.service:hover>span.fa{
color: #c59a6d;
}
.service:hover{
border-color: #c59a6d;
margin-top: 0px;
margin-bottom: 0px;
cursor: pointer;
padding-top: 80px;
padding-bottom: 80px;
}
.service p{
font-size: 14px;
padding-top: 20px;
font-family: 'Lato', sans-serif;
}
.space{ padding-top: 40px; }
#cta{
background: #282f35;
padding: 4% 0;
}
a.btn.go-to-btn{
text-transform: uppercase;
border: 1px solid #c59a6d;
word-spacing: 2px;
padding: 7px 30px;
border-radius: 2px;
font-size: 12px;
color: #ffffff;
transition: all 0.5s;
}
a.btn.go-to-btn:hover{
background: #c59a6d;
color: #282f35;
}
.nopadding{
padding: 0;
margin: 0;
}
.portfolio-item .hover-bg{
height: 280px;
overflow: hidden;
position: relative;
}
.hover-bg .hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #ffffff;
background: rgba(0, 0, 0, 0.66);
padding: 30% 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
}
.hover-bg .hover-text>h5{
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
}
.hover-bg:hover .hover-text>h5{
opacity: 1;
-webkit-backface-visibility:hidden;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hover-bg .hover-text>.hline{
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: all 0.3s;
}
.hover-bg:hover .hover-text>.hline{
opacity: 1;
-webkit-backface-visibility:hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.hover-bg:hover .hover-text{
opacity: 1;
}
.hline{
height: 5px;
width: 30px;
border-top: 2px solid #f1f1f1;
margin: 0 auto
}
.hover-text p.lead{
color: #c59a6d;
}
a.btn.read-more-btn{
text-transform: uppercase;
background: #c59a6d;
color: #282f35;
word-spacing: 2px;
padding: 7px 30px;
border-radius: 2px;
font-size: 12px;
color: #ffffff;
transition: all 0.5s;
}
a.btn.read-more-btn:hover{
background: #222222;
color: #ffffff;
}
a.btn.send-btn{
text-transform: uppercase;
background: #c59a6d;
color: #282f35;
padding: 15px 35px;
border-radius: 0;
font-size: 12px;
color: #ffffff;
transition: all 0.5s;
}
a.btn.send-btn:hover{
background: transparent;
border: 1px solid #c59a6d;
color: #ffffff;
}
#clients {
background: url(../img/bg3.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
text-align: center;
}
#clients .overlay{
background: rgba(34, 34, 34, 0.85);
height: auto;
min-height: 200px;
padding: 8% 0 ;
color: #ffffff;
}
ul, ol{
padding: 0;
moz-padding: 0;
webkit-padding: 0;
}
ul.clients li{
display: inline-block;
padding: 20px 40px;
vertical-align: middle;
}
.team {
border: 1px solid #c3c3c3;
padding: 70px 20px;
text-align: center;
opacity: 0.7;
transition: all 0.8s;
max-height: 340px;
margin-bottom: 30px;
}
.team:hover.hire,
.team.hire{
height: 340px;
border-color: #c59a6d;
color: #c59a6d;
opacity: 1;
}
.team.hire>a{
color: #c59a6d;
}
.team hr{
border-width: 2px;
border-color: #dcc2a7;
}
.team:hover{
opacity: 1;
border: 1px solid #222;
}
.team img {
width: 80px;
margin: 0 auto;
}
#testimonials {
background: url(../img/bg4.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
text-align: center;
}
#testimonials .overlay{
background: rgba(34, 34, 34, 0.85);
height: auto;
min-height: 200px;
padding: 5% 0 ;
color: #ffffff;
}
.owl-theme .owl-controls .owl-page span {
display: block;
width: 10px;
height: 10px;
margin: 2px 5px;
filter: Alpha(Opacity=50);
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 0;
background: #C59A6D;
}
#contact{
background: #282f35;
padding: 100px 0;
color: #ffffff;
}
ul.social li{
display: inline-block;
margin-right: 20px;
margin-top: 30px;
}
ul.social li a{
color: #ffffff;
font-size: 16px;
}
address strong{
text-transform: uppercase;
font-style: normal;
font-family: 'Montserrat', sans-serif;
}
address:before{
content: "\f041";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #c59a6d;
vertical-align: middle;
margin-right: 15px;
margin-left: -30px;
}
address{
font-style: italic;
font-size: 14px;
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
}
#contact input.form-control,
#contact textarea.form-control {
margin-bottom: 30px;
}
#contact .form-control {
display: block;
width: 100%;
height: 40px;
padding: 7px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #1e2429;
background-image: none;
border: 0;
border-top: 2px solid transparent;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
transition: all 0.5s;
}
#contact .form-control:focus {
border-color: #C59A6D;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #222222;
font-family: 'Lato', sans-serif;
font-size: 13px;
letter-spacing: 1px;
font-style: italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #222222;
font-family: 'Lato', sans-serif;
font-size: 13px;
letter-spacing: 1px;
font-style: italic;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #222222;
font-family: 'Lato', sans-serif;
font-size: 13px;
letter-spacing: 1px;
font-style: italic;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #222222;
font-family: 'Lato', sans-serif;
font-size: 13px;
letter-spacing: 1px;
font-style: italic;
}
nav#footer{
background: #282f35;
padding: 40px 0;
color: #ffffff;
border-bottom: 5px solid #c59a6d;
}
#footer span.fa{
color: #c59a6d;
font-size: 26px;
margin-left: 10px;
}
#footer a{
color: #ffffff;
}
#footer a:hover{
color: #c59a6d;}
/*
* My class
* Author:Huang Zhenyang
*/
.header {
height: 0px;
background: rgba(0, 0, 0, 0.45);
}前端介绍：
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。
1.常见的浏览器兼容性问题:
1、网页居中问题。问题症状：IE6下常规设置无法使页面居中。
解决方案：body{text-align:center}
2、某些浏览器不支持某些属性。问题症状：IE6下不支持min-width、max-height等属性。
解决方案：具体情况具体分析
3、png透明图片支持问题。问题症状：IE6下不支持透明图片。
解决方案：js方法或css滤镜
4、不同浏览器的标签默认的外边距和内边距不同。问题症状：不加样式控制的情况下，各自的margin 、padding、p等差异较大。
解决方案：CSS里 *{margin:0; padding:0;}
5、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状：常见症状是IE6中后面的一块被顶到下一行。
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性；或使用hack方法
CSS Hack跨浏览器解决方案。
1、使用合适的文档声明（DOCTYPE）
2、对标准浏览器进行兼容
编写代码时，要了解客户群的浏览器使用情况。
编写代码时，以标准浏览器（Firefox/Chrome）为参考，暂时不考虑特殊浏览器行为（IE6类）。
一般情况下，先做一些通用设置，把兼容性问题扼杀在萌芽中。
3、标准的网页代码尽量使代码符合w3c标准
借助w3c提供的HTML验证器和CSS验证器对代码进行网上标准化验证
4、借助浏览器开发者工具调试IE条件注释。
2.系统测试
系统开发环境
本项目对电脑的硬件环境要求不高，目前大部分人所使用的笔记本电脑拥有基本配置即可进行操作，都能去设计并运行调试。
本系统的所采用的主要语言为：Java语言，在使用前需要进行必要的系统配置，否则无法使用。
在前端方面，网站页面使用的是HTML+CSS+JS和Thymeleaf模板引擎做数据渲染，在后端方面，项目使用的是SpringBoot整合JPA。其具体的各类开发环境如表所示。
| 名称 | 版本 | ||
| 软件环境 | 编程语言 | Java、JavaScript | |
| JDK 版本 | JDK | 1.8.0_221 | |
| 编程环境 | IntelliJ IDEA | 2019-06-R-win32-x86_64 | |
| Web 服务器 | Apache Tomcat | 9.0.24 | |
| 数据库 | MySQL | 8.0.12 | |
| 测试环境 | 谷歌浏览器 | 90.0.818.51 | |
| 硬件环境 | Windows版本 | Windows10 | |
| 处理器 | Intel(R)Core(TM)i7-8750H | ||
| 内存 | 8.00GB | ||
| 系统类型 | 64位操作系统，基于x64 |
柳州民族服饰千古情测试
| 测试类型 | 单元测试 集成测试 √系统测试 验收测试 | |||||
| 功能模块名称 | 测试用例 | |||||
| 输入 | 操作步骤 | 预期输出 | 测试结论 | |||
| 通过 | 不通过 | 不执行 | ||||
| 1.登入 | 1.输入相对应的账号密码 | 1.点击登入 2.输入相应的账号密码 3.点击登入 | 一.执行步骤3后登入成功，跳转至系统主页 | √ | ||
| 2.注册 | 1.选择注册 2.输入相对应的注册信息 | 1.点击登入 2.点击立即注册 3.输入相应的注册信息 4.立即注册 | 一.执行步骤4后注册成功，跳转至登入界面 | √ | ||
| 3.修改用户号信息 | 1.输入需要修改的用户信息 | 1.点击个人信息 2.选择我的信息 3.修改字段信息 4.点击保存 | 一.执行步骤4后保存成功 | √ | ||
| 4.查看服饰地区 | 1.点击服饰地区 | 1.点击个人信息 2.点击查看服饰地区 | 一.执行步骤2后展示实体店所投递过的服饰信息 | √ | ||
| 5.查看不同民族服饰 | 1.点击服饰信息 2.进入详情界面 3.点击喜欢服饰查看 | 1.点击服饰信息 2.进入详情界面 3.点击所需服饰 | 一.执行步骤3后选择服饰成功 | √ | ||
| 6.选择摄影师 | 1.输入相应摄影师信息 | 1.点击查看摄影师信息 2.选择喜欢的摄影师 3.预约拍照时间 | 一.执行步骤1后查找摄影师信息成功 二.执行步骤2后选择摄影师成功 三.执行步骤3后预约摄影师成功 | √ | ||
| 选择化妆师 | 1.输入化妆师信息 | 1.点击查看化妆师信息 2.选择喜欢的化妆师 3.预约化妆时间 | 一.执行步骤1后查找化妆师信息成功 二.执行步骤2后选择化妆师成功 三.执行步骤3后预约化妆师成功 | √ | ||
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
