我是歌谣 放弃很容易 但是坚持一定很酷
1前言
作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课
本文内容纯属自己个人观点 欢迎一起交流吐槽
2网页基础版（div+css）
我第一次接触前端页面的时候做的网页就是一个div+css的布局 因为当时是在实习 网页的内容现在已经丢失 类似一个商品管理的页面 页面分出来给一个班的同学
几个人分为一个小组 进行共同开发 页面的跳转直接a标签进行跳转即可
2.1.1桥边菇凉页面预览
桥边菇凉小页面 写这个页面当时应该是这个音乐还挺好听的 我叫歌谣 喜欢听歌也是我生活的一部分 这个页面包含了太多的岁月沉淀了 现在2021年了 这个页面就是基础的div+css布局
2.1.2桥边菇凉代码
这个页面应该不是第一个 一看这个样式就是我模仿某页面进行一个开发的
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>qq音乐
</title>
-
<style>
-
*{
margin:
0;
padding:
0;}
-
img{
display:block;}
-
a{
text-decoration: none;}
-
#head{
height:
102px;
width:
100%;}
-
#head-left{
width:
798px;
height:
102px;
float:left}
-
#head-left>
img{
width:
192px;
height:
47px;
float: left;
padding-left:
141px;
padding-top:
27px;}
-
#head-left>
.username{
width:
304px;
height:
24px;
background:
url(
'./img/006.jpg') right center no-repeat ;
padding-top:
10px;
position: relative;
top:
30px;
float: right;}
-
#header{
height:
63px;
background:
rgb(
40,
50,
59);}
-
#last{
height:
102px;
background:
rgb(
41,
45,
54);}
-
#head-right{
width:
720px;
height:
102px;
float: left;}
-
#head-title{
width:
333px;
height:
27px;
position: relative;
top:
35px;
left:
105px;
float: left;
border-right:
rgb(
230,
230,
230)
3px solid;}
-
#head-title>
a{
margin-left:
20px;}
-
#head-right-right>
img{
width:
68px;
height:
37px;
position: relative;
top:
28px;
left:
150px;}
-
#header-left{
width:
798px;
height:
63px;
float:left}
-
#header-right{
width:
720px;
height:
63px;
float: left;}
-
#left{
width:
486px;
height:
39px;
position: relative;
left:
228px;
top:
15px;}
-
#left>
a{
color: white;
font-size:
20px;
padding-left:
20px;}
-
#right>
img{
width:
28px;
height:
20px;
float:right;
position: relative;
right:
225px;
bottom:
20px;}
-
#header-right{
width:
572px;
height:
31px;}
-
.geyao{
position: relative;
top:
15px;
left:
50px;}
-
.geyao>
img{
width:
20px;
height:
20px;
float: left;}
-
.geyao>
.right1{
position: relative;
top:
4px;
left:
8px;}
-
.geyao>
.right2{
position: relative;
top:
5px;
left:
8px;}
-
.geyao>
.right3{
position: relative;
top:
4px;
left:
8px;}
-
.geyao>
.right4{
position: relative;
top:
4px;
left:
8px;}
-
.geyao>
.right5{
position: relative;
top:
4px;
left:
8px;}
-
.geyao>
a{
font-size:
20px;
float: left;
color:
rgb(
160,
161,
163);
padding-left:
15px;}
-
#body{
height:
581px;
background:
rgb(
73,
86,
111);}
-
#body-left{
width:
798px;
height:
581px;
float: left;}
-
#body-left1{
width:
324px;
height:
324px;
margin:
0 auto;}
-
#body-left2{
width:
290px;
height:
66px;
border-radius:
30px;
border:
1px solid
rgb(
136,
143,
160);
-
margin:
30px auto;}
-
#body-left2>
span{
font-size:
40px;
font-family: 宋体;
display: block;
color:
rgb(
136,
143,
160);
-
position: relative;
left:
35px;
top:
10px;}
-
#body-left3{
position: relative;
left:
200px;}
-
#body-top{
width:
68px;
height:
68px;
border-radius:
34px;
background:
url(
'./img/15.jpg');
float: left;}
-
#body-bottom{
width:
301px;
height:
74px;
background:
url(
'./img/16.jpg');
float: left;}
-
#body-right{
width:
720px;
height:
531px;
float: left;}
-
#body-right1{
width:
503px;
height:
131px;}
-
#body-right1>
h1{
color:
rgb(
136,
143,
160);}
-
#body-right1>
img{
width:
32px;
height:
16px;
position: relative;
bottom:
30px;
left:
130px;}
-
#body-right3>
p{
display: block;
color:
rgb(
136,
143,
160);}
-
#body-right2{
width:
503px;
height:
300px;
overflow-y: scroll;}
-
#body-right2
::-webkit-scrollbar {
width:
4px;
/*height: 4px;*/}
-
#body-right2
::-webkit-scrollbar-thumb {
border-radius:
10px;
-webkit-box-shadow: inset
0
0
5px
rgba(
0,
0,
0,
0.2);
background:
rgba(
0,
0,
0,
0.2);}
-
#body-right2
::-webkit-scrollbar-track {
-webkit-box-shadow: inset
0
0
5px
rgba(
0,
0,
0,
0.2);
border-radius:
0;
background:
rgba(
0,
0,
0,
0.1);}
-
#last1{
width:
330px;
height:
100px;
float: left;}
-
#last1>
.im1{
float: left;
position: relative;
left:
100px ;
top:
20px;
width:
50px;
height:
50px;
padding-left:
10px;}
-
#last1>
.im2{
float: left;
position: relative;
left:
115px ;
top:
10px;
width:
60px;
height:
60px;
-
padding-left:
10px;}
-
#last1>
.im3{
float: left;
position: relative;
left:
140px ;
top:
25px;
width:
50px;
height:
50px;
-
padding-left:
10px;}
-
#last2{
width:
579px;
height:
79px;
float: left;}
-
#last2-left{
width:
57px;
height:
57px;
float: left;
position: relative;
left:
120px;
top:
10px;}
-
#last2-right{
width:
357px;
height:
57px;
float: left;
position: relative;
left:
140px;
top:
13px;}
-
#last3{
width:
131px;
height:
102px;
float: left;}
-
#last31{
width:
13px;
height:
33px;
float: left;
position: relative;
left:
160px;
top:
40px;}
-
#last32{
width:
13px;
height:
33px;
float: left;
position: relative;
left:
190px;
top:
40px;}
-
#last33{
width:
13px;
height:
33px;
float: left;
position: relative;
left:
220px;
top:
40px;}
-
#last34{
width:
13px;
height:
33px;
float: left;
position: relative;
left:
250px;
top:
40px;}
-
#last35{
width:
43px;
height:
33px;
float: left;
position: relative;
left:
300px;
top:
35px;}
-
</style>
-
</head>
-
<body>
-
<div id="head">
-
<div id="head-left">
-
<img src="./img/004.jpg" alt="">
-
<input type="text" class="username">
-
</div>
-
<div id="head-right">
-
<div id="head-title">
-
<a href="">客服中心
</a>
-
<a href="">招贤纳士
</a>
-
<a href="">会员中心
</a>
-
</div>
-
<div id="head-right-right">
-
<img src="./img/007.jpg">
-
</div>
-
</div>
-
</div>
-
<div id="header">
-
<div id="header-left">
-
<div id="left">
-
<a href="">首页
</a>
-
<a href="">榜单
</a>
-
<a href="">下载客户端
</a>
-
<a href="">更多
</a>
-
</div>
-
<div id="right">
-
<img src="./img/008.jpg">
-
</div>
-
</div>
-
<div id="header-right">
-
<div class="geyao">
-
<img class="right1" src="./img/1.jpg">
-
<a href="">音乐直播
</a>
-
</div>
-
<div class="geyao">
-
<img class="right2" src="./img/2.jpg">
-
<a href="">酷狗LIVE
</a>
-
</div>
-
<div class="geyao">
-
<img class="right3" src="./img/3.jpg">
-
<a href="">音乐人
</a>
-
</div>
-
<div class="geyao">
-
<img class="right4" src="./img/4.jpg">
-
<a href="">成为主播
</a>
-
</div>
-
<div class="geyao">
-
<img class="right5" src="./img/5.jpg">
-
<a href="">商城
</a>
-
</div>
-
</div>
-
</div>
-
</div>
-
<div id="body">
-
<div id="body-left">
-
<div id="body-left1">
-
<img src="./img/11.jpg">
-
</div>
-
<div id="body-left2">
-
<span>下载这首歌
</sapn>
-
</div>
-
<div id="body-left3">
-
<div id="body-top">
</div>
-
<div id="body-bottom">
</div>
-
</div>
-
</div>
-
<div id="body-right">
-
<div id="body-right1">
-
<h1>桥边姑娘
</h1>
-
<img src="./img/20.jpg">
-
<div id="body-right3">
-
<p>专辑:桥边姑娘
歌手:海伦
</p>
-
</div>
-
</div>
-
<div id="body-right2">
-
<p>桥边姑娘 - 海伦
</br>
-
词：海伦
</br>
-
曲：海伦
</br>
-
视觉：华玮轩
</br>
-
暖阳下 我迎芬芳 是谁家的姑娘
</br>
-
我走在了那座小桥上
</br>
-
你抚琴奏忧伤
</br>
-
桥边歌唱的小姑娘 你眼角在流淌
</br>
-
你说一个人在逞强 一个人念家乡
</br>
-
风华模样 你落落大方
</br>
-
坐在桥上 我听你歌唱
</br>
-
我说桥边姑娘 你的芬芳
</br>
-
我把你放心上 刻在了我心膛
</br>
-
桥边姑娘 你的忧伤
</br>
-
我把你放心房 不想让你流浪
</br>
-
暖阳下的桥头旁 有这样一姑娘
</br>
-
她有着长长的乌黑发 一双眼明亮
</br>
-
姑娘你让我心荡漾 小鹿在乱撞
</br>
-
你说无人在身旁 一个人在流浪
</br>
-
风华模样 你落落大方
</br>
-
坐在桥上 我听你歌唱
</br>
-
我说桥边姑娘 你的芬芳
</br>
-
我把你放心上 刻在了我心膛
</br>
-
桥边姑娘 你的忧伤
</br>
-
我把你放心房 不想让你流浪
</p>
-
</div>
-
</div>
-
</div>
-
<div id="last">
-
<div id="last1">
-
<div class="im1">
-
<img src="./img/22.jpg">
-
</div>
-
<div class="im2">
-
<img src="./img/23.jpg">
-
</div>
-
<div class="im3">
-
<img src="./img/25.jpg">
-
</div>
-
</div>
-
<div id="last2">
-
<div id="last2-left">
-
<img src="./img/28.jpg">
-
</div>
-
<div id="last2-right">
-
<img src="./img/29.jpg">
-
</div>
-
</div>
-
<div id="last3">
-
<div id="last31">
-
<img src="./img/31.jpg" alt="">
-
</div>
-
<div id="last32">
-
<img src="./img/32.jpg" alt="">
-
</div>
-
<div id="last33">
-
<img src="./img/33.jpg" alt="">
-
</div>
-
<div id="last34">
-
<img src="./img/34.jpg" alt="">
-
</div>
-
<div id="last35">
-
<img src="./img/35.jpg" alt="">
-
</div>
-
</div>
-
</div>
-
</body>
-
-
</body>
-
</html>
2.2.1博文尚美页面预览
这个页面的来源应该是来自于某学习平台 时间也是比较久远的
2.2.2博文尚美页面代码
这边也是一个简单的div+css的布局 页面不是简简单单的单页面开发了 居然多了公共样式 也是不会采用多余的布局 上面的桥边菇凉应该就是参照改布局进行布局的
index.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>博文尚美
</title>
-
<link rel="stylesheet" href="./css/common.css">
-
<style>
-
#banner{
position: relative;}
-
#banner
.banner_list{
width:
100%;
height:
469px;
position: relative;}
-
#banner
.banner_list
li{
background: center
0 no-repeat;
width:
100%;
height:
100%;
position: absolute;
left:
0;
top:
0;
opacity:
0;
z-index:
1;}
-
#banner
.banner_list
a{
display: block;
width:
100%;
height:
100%;}
-
#banner
.banner_list
li
.active{
opacity:
1;
z-index:
10;}
-
#banner
.banner_btn{
width:
100%;
position: absolute;
bottom:
19px;
font-size:
0;
text-align: center;
z-index:
20;}
-
#banner
.banner_btn
li{
display: inline-block;
width:
12px;
height:
12px;
border:
2px solid white ;
-
border-radius:
50%;
box-sizing: border-box;
margin:
0
6px;
cursor: pointer;}
-
#banner
.banner_btn
li
.active{
background: white;}
-
-
#service{
overflow: hidden;
min-height:
407px;}
-
#service
.area_title{
text-align: center;}
-
#service
.service_list{
text-align: center;
margin-top:
34px;}
-
#service
.service_list
li{
float: left;
width:
250px;
margin:
0
10px;}
-
#service
.service_list
div{
width:
102px;
height:
102px;
margin:
0 auto;}
-
#service
.service_list
li
:nth-of-type(1)
div{
background-image:
url(./images/web1.png);}
-
#service
.service_list
li
:nth-of-type(2)
div{
background-image:
url(./images/mail1.png);}
-
#service
.service_list
li
:nth-of-type(3)
div{
background-image:
url(./images/graphic1.png);}
-
#service
.service_list
li
:nth-of-type(4)
div{
background-image:
url(./images/e-bussiness1.png);}
-
#service
.service_list
h3{
font-size:
18-x;
color:
#434343;
line-height:
36px;}
-
#service
.service_list
p{
font-size:
14px;
color:
#6D6D6D;
line-height:
22px;}
-
-
#case{
background:
#f8f8f8;}
-
#case
.container{
min-height:
460px;
overflow: hidden;}
-
#case
.area_title{
margin-top:
55px;}
-
#case
.area_title
h2{
color:
#66c5B4;}
-
#case
.case_list{
margin-top:
28px;}
-
#case
.case_list
li{
float: left;
width:
340px;
margin:
0
10px;}
-
#case
.case_btn{
width:
176px;
height:
37px;
background:
#66C584;
margin:
0 auto;
-
border-radius:
25px;
line-height:
37px;
text-align: center;
color: white;
font-size:
14px;
margin-top:
36px;}
-
#case
.case_btn
a{
display: block;
width:
100%;
height:
100%;}
-
-
#news{
min-height:
450px;
overflow: hidden;}
-
#news
.area_title{
margin-top:
65px;}
-
#news
dl{
margin-top:
48px;}
-
#news
dt{
width:
234px;}
-
#news
dd{
width:
846px;}
-
#news
.news_list{
width:
100%;}
-
#news
.news_list
li{
width:
50%;
float: left;
margin-bottom:
48px;}
-
#news
.news_date{
width:
71px;
height:
70px;
border-right:
1px solid
#DCDCDC;
text-align: center;}
-
#news
.news_date
i{
color:
#66C584;
font-size:
39px;
display: block;
font-weight: bold;}
-
#news
.news_date
span{
color:
#999999;
font-size:
20px;
line-height:
36px;}
-
#news
.news_text{
width:
310px;
margin-left:
20px;}
-
#news
.news_text
h3{
font-size:
14px;}
-
#news
.news_text
h3
a{
color:
#3F3F3F}
-
#news
.news_text
p{
color:
#A4A4A4;
font-size:
12px;
line-height:
21px;
margin-top:
17px;}
-
</style>
-
</head>
-
<body>
-
<div id="head" class="container">
-
<div class="head_logo l">
-
<a href="#">
-
<img src="./images/logo.png" alt="" title="博文尚美">
-
</a>
-
</div>
-
<ul class="head_menu r">
-
<li>
-
<a href="#">HOME
</a>
-
</li>
-
<li>
-
<a href="#">ABOUT
</a>
-
</li>
-
<li>
-
<a href="#">PROTFOLIO
</a>
-
</li>
-
<li>
-
<a href="#">SERVICE
</a>
-
</li>
-
<li>
-
<a href="#">CONTACT
</a>
-
</li>
-
</ul>
-
</div>
-
<div id="banner" class="container-fluid">
-
<ul class="banner_list">
-
<li class="active" style="background-image: url(./images/banner.png);">
-
<a href="#">
</a>
-
</li>
-
<li style="background-image: url(./images/banner.png);">
-
<a href="#">
</a>
-
</li>
-
<li style="background-image: url(./images/banner.png);">
-
<a href="#">
</a>
-
</li>
-
<li style="background-image: url(./images/banner.png);">
-
<a href="#">
</a>
-
</li>
-
</ul>
-
<ol class="banner_btn">
-
<li class="active">
-
-
</li>
-
<li>
-
-
</li>
-
<li>
-
-
</li>
-
<li>
-
-
</li>
-
</ol>
-
</div>
-
<div id="service" class="container">
-
<div class="area_title">
-
<h2>服务范围
</h2>
-
<p>OUT SERVICES
</p>
-
</div>
-
<ul class="service_list">
-
<li>
-
<div>
</div>
-
<h3>1.web design
</h3>
-
<p>我是歌谣，我是最棒的
<br>我是歌谣，我是最棒的
</p>
-
</li>
-
<li>
-
<div>
</div>
-
<h3>2.graphic design
</h3>
-
<p>我是歌谣，我是最棒的
<br>我是歌谣，我是最棒的
</p>
-
</li>
-
<li>
-
<div>
</div>
-
<h3>3.e-business plan
</h3>
-
<p>我是歌谣，我是最棒的
<br>我是歌谣，我是最棒的
</p>
-
</li>
-
<li>
-
<div>
</div>
-
<h3>4.mailboxagents
</h3>
-
<p>我是歌谣，我是最棒的
<br>我是歌谣，我是最棒的
</p>
-
</li>
-
</ul>
-
</div>
-
<div id="case" class="container-fluid">
-
<div class="container">
-
<div class="area_title">
-
<h2>[客户案例]
</h2>
-
<p>with the bost professional technology,to design the best inn
</p>
-
</div>
-
<ul class="case_list clear">
-
<li>
-
<li>
<a href="#">
<img src="./images/20141121095528549.png" alt="">
</a>
</li>
-
</li>
-
<li>
-
<li>
<a href="#">
<img src="./images/20141121095528549.png" alt="">
</a>
</li>
-
</li>
-
<li>
-
<li>
<a href="#">
<img src="./images/20141121095528549.png" alt="">
</a>
</li>
-
</li>
-
</ul>
-
<div class="case_btn">
-
<a href="#">view movn
</a>
-
</div>
-
</div>
-
</div>
-
<div id="news" class="container">
-
<div class="area_title">
-
<h2>最新资讯
</h2>
-
<p>TEN LATEST NEWS
</p>
-
</div>
-
<dl>
-
<dt class="l">
-
<img src="./images/xs1.png">
-
</dt>
-
<dd class="l">
-
<ul class="news_list">
-
<li>
-
<div class="news_date l">
-
<i>09
</i>
-
<span>jan
</span>
-
</div>
-
<div class="news_text l">
-
<h3>
<a href="#">网站排名前三的技巧说明
</a>
</h3>
-
<p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣
</p>
-
</div>
-
</li>
-
<li>
-
<div class="news_date l">
-
<i>09
</i>
-
<span>jan
</span>
-
</div>
-
<div class="news_text l">
-
<h3>
<a href="#">网站排名前三的技巧说明
</a>
</h3>
-
<p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣
</p>
-
</div>
-
</li>
-
<li>
-
<div class="news_date l">
-
<i>09
</i>
-
<span>jan
</span>
-
</div>
-
<div class="news_text l">
-
<h3>
<a href="#">网站排名前三的技巧说明
</a>
</h3>
-
<p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣
</p>
-
</div>
-
</li>
-
<li>
-
<div class="news_date l">
-
<i>09
</i>
-
<span>jan
</span>
-
</div>
-
<div class="news_text l">
-
<h3>
<a href="#">网站排名前三的技巧说明
</a>
</h3>
-
<p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣
</p>
-
</div>
-
</li>
-
</ul>
-
</dd>
-
</dl>
-
</div>
-
</body>
-
</html>
common.css
-
*{
margin:
0;
padding:
0;}
-
ul,
ol{
list-style: none;}
-
img{
display: block;}
-
a{
text-decoration: none;
color:
#646464;}
-
h1,
h2,
h3{
font-size:
16px;}
-
body{
font-family: Arial, Helvetica, sans-serif;}
-
-
.l{
float: left;}
-
.r{
float: right;}
-
.clear
:after{
content:
"";
display: block;
clear: both;}
-
.container{
width:
1080px;
margin:
0 auto;
position: relative;}
-
.container-fluid{
width:
100%;}
-
/* 浮动元素不会出现传递操作 */
-
#head{
height:
81px;}
-
#head
.head_logo{
width:
162px;
height:
44px;
margin-top:
19px;}
-
#head
.head_menu{
font-size:
14px;
line-height:
81px;}
-
#head
.head_menu
li{
float: left;
margin-left:
54px;}
-
-
.area_title{
margin-top:
60px;
text-align: center;}
-
.area_title
h2{
height:
20px;
line-height:
20px;
font-size:
20px;
color:
#363636;
background:
url(../images/title_bg.png) no-repeat center
7px;
font-weight: bold;}
-
.area_title
p{
color:
#9F9F9F;
font-size:
14px;
line-height:
14px;}
2.3.1qq飞车页面预览
对于这种网页一看就不是网上学习所能够获得的 只能通过自己的慢慢手写 那时候还是有毅力的
2.3.2qq飞车页面代码
不断的多练 多写 对样式的理解 页面自然越来越熟悉 代码 这部分也多有了公共的样式编写
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>qq飞车首页
</title>
-
<link rel="stylesheet" href="./css1/common.css">
-
<style>
-
/* 导航栏块 */
-
/* 加入大块背景图 */
-
#main{
background:
url(./images1/bg20190104.jpg) no-repeat center
0;}
-
/* 两块背景图 */
-
#nav{
min-height:
236px;
background:
url(./images1/nav_down_re.png) repeat-x,
url(./images1/nav.png) no-repeat center
0;}
-
#nav
.container{
min-height:
236px;
overflow: hidden;}
-
/* 插入图片 解决margin传递的问题 */
-
#nav
.nav_logo{
width:
138px;
height:
112px;
margin:
15px auto;}
-
#nav
dl{
position: absolute;
top:
0;}
-
#nav
dt{
height:
66px;}
-
#nav
dt
a{
width:
100%;
height:
100%;
display: block;
text-indent:
9999px;
overflow: hidden;}
-
#nav
dd{
line-height:
27px;
font-size:
12px;
text-align: center;}
-
#nav
dd
a{
color:white;
position: relative;}
-
/* 实现a标签点击实现变颜色和出现下划线 */
-
#nav
dd
a
:hover{
color: red;
text-decoration: underline;}
-
/* 利用伪类添加小图标效果 */
-
#nav
dd
a
.hot
::after,
#nav
dd
a
.new
:after{
content:
"";
display: block;
width:
12px;
height:
12px;
background:
url(./images1/nav_tips.png) no-repeat;
position: absolute;
right: -
15px;
top:
0;}
-
#nav
dd
a
.hot
::after{
background-position:
0 -
12px;}
-
#nav
dd
a
.new
::after{
background-position:
0
0;}
-
#nav
.nav_index{
width:
65px;
left:
0;}
-
#nav
.nav_zl{
width:
69px;
left:
98px;}
-
#nav
.nav_ss{
width:
74px;
left:
203px;}
-
#nav
.nav_hd{
width:
68px;
left:
325px;}
-
-
#link{
height:
175px;}
-
#link
a{
width:
100%;
height:
100%;
display: block;
margin:
0 auto;}
-
-
#banner{
height:
276px;
background:
url(./images1/top.png) no-repeat;
margin-top:
20px;}
-
#banner
.banner_left{
width:
240px;
height:
310px;
background:
url(./images1/down_user_spr.png) no-repeat;
margin:-
20px
0
0
7px;}
-
-
#banner
.banner_download
p{
width:
91px;
height:
25px;
background:
url(./images1/down_user_spr.png) no-repeat -
253px
0;
margin:
0 auto;
text-indent: -
9999px;
overflow: hidden;}
-
#banner
.banner_download
p
:first-child{
background-position: -
253px
0;
margin-top:
44px;}
-
#banner
.banner_download
p
:last-child{
background-position: -
253px -
25px;}
-
/* css3简单的动画效果 */
-
#banner
.banner_download
:hover
p
:first-child{
animation:
1s upMove;}
-
@keyframes upMove{
-
0%{
transform:
translateY(-
40px);
opacity:
0;}
-
100%{
transform:
translateY(
0);
opacity:
1;}
-
}
-
#banner
.banner_download
:hover
p
:last-child{
animation:
1s downMove;}
-
@keyframes downMove{
-
0%{
transform:
translateY(
40px);
opacity:
0;}
-
100%{
transform:
translateY(
0);
opacity:
1;}
-
}
-
/* css3简单的动画效果 */
-
#banner
.banner_user
div{
width:
56px;
height:
56px;
border-radius:
50%;
margin:
85px auto
0 auto;
border:
2px solid
#283257;
-
box-sizing: border-box;
overflow: hidden;}
-
#banner
.banner_user
img{
width:
100%;
height:
100%;}
-
#banner
.banner_user
p{
text-align: center;
font-size:
12px;
color: white;
margin-top:
25px;}
-
#banner
.banner_user
a{
color: turquoise;}
-
-
#banner
.banner_list{
width:
497px;
height:
253px;
overflow: hidden;
margin:
13px
0
0
4px;
position: relative;}
-
#banner
.banner_list_ul{
width:
2000px;}
-
#banner
.banner_list_ul
li{
width:
497px;
height:
25px;
float: left;}
-
-
#banner
.banner_bottomline{
width:
100%;
height:
37px;
background:
rgba(
0,
0,
0, .
5);
border-top:
1px
#514b55 solid ;
position: absolute;
left:
0;
bottom:
0;}
-
#banner
.banner_bottomline_ul{
text-align: center;
margin-top:
11px;}
-
#banner
.banner_bottomline
ul
li{
display: inline-block;
width:
15px;
height:
15px;
background:
url(./images1/top.png) no-repeat -
603px -
299px;
cursor: pointer;}
-
#banner
.banner_bottomline
ul
li
.active{
background-position: -
581px -
299px;}
-
-
-
#banner
.banner_bottomline_leftbtn,
#banner
.banner_bottomline_rightbtn{
width:
12px;
height:
22px;
position: absolute;
top:
5px;
background:
url(./images1/top.png) no-repeat;
cursor: pointer;}
-
#banner
.banner_bottomline_leftbtn{
left:
5px;
background-position: -
542px -
296px;}
-
#banner
.banner_bottomline_rightbtn{
right:
5px;
background-position: -
554px -
296px;}
-
-
#banner
.banner_bottomline_leftbtn
:hover{
background-position:-
542px -
325px;}
-
#banner
.banner_bottomline_rightbtn
:hover{
background-position:-
554px -
325px;}
-
-
#banner
.banner_list_lt,
#banner
.banner_list_rt,
#banner
.banner_list_rb,
#banner
.banner_list_lb{
width:
12px;
height:
12px;
background:
url(./images1/top.png) no-repeat;
position: absolute;}
-
#banner
.banner_list_lt{
left:-
2px;
top:-
4px;
background-position: -
621px -
299px;}
-
#banner
.banner_list_rt{
right:-
2px;
top:-
4px;
background-position: -
634px -
299px;}
-
#banner
.banner_list_rb{
right:-
2px;
bottom:-
5px;
background-position: -
634px -
312px;}
-
#banner
.banner_list_lb{
left:-
2px;
bottom:-
5px;
background-position: -
621px -
312px;}
-
-
#banner
.banner_right{
width:
209px;
height:
255px;
position: relative;
margin:
12px
0
0
12px}
-
#banner
.banner_right_lt,
#banner
.banner_right_rt,
#banner
.banner_right_rb,
#banner
.banner_right_lb{
width:
15px;
height:
15px;
background:
url(./images1/top.png) no-repeat;
position: absolute;}
-
#banner
.banner_right_lt{
left:-
4px;
top:-
4px;
background-position: -
681px -
298px;}
-
#banner
.banner_right_rt{
right:-
4px;
top:-
4px;
background-position: -
696px -
298px;}
-
#banner
.banner_right_rb{
right:-
4px;
bottom:-
6px;
background-position: -
696px -
313px;}
-
#banner
.banner_right_lb{
left:-
4px;
bottom:-
6px;
background-position: -
681px -
313px;}
-
</style>
-
</head>
-
<body>
-
<!-- 通栏里面放个版心 三张图片 两张靠左 一张右边浮动 -->
-
<div id="head" class="container-fluid">
-
<div class="container">
-
<div class="head_logo l">
-
<a href="#">腾讯游戏
</a>
-
</div>
-
<div class="head_ad l">
-
<a href="#">
-
<img src="./images1/ad.jpg" alt="">
-
</a>
-
</div>
-
<div class="head_menu r">
-
<div class="head_menu_czsh l">
-
<a href="#">成长守护平台
</a>
-
</div>
-
<div class="head_menu_top l">
-
<a href="#">腾讯游戏排行版
</a>
-
</div>
-
</div>
-
</div>
-
</div>
-
<!-- 导航这一块 -->
-
<div id="main" class="container-fluid">
-
<div id="nav" class="container-fluid">
-
<div class="container">
-
<div class="nav_logo">
-
<a href="#">
-
<img src="./images1/inside_logo.png" alt="qq飞车" title="qq飞车">
-
</a>
-
</div>
-
<dl class="nav_index">
-
<dt>
-
<a href="#">首页
</a>
-
</dt>
-
</dl>
-
<dl class="nav_zl">
-
<dt>
</dt>
-
<dd>
<a href="">新手指引
</a>
</dd>
-
<dd>
<a class="hot" href="">官方漫画
</a>
</dd>
-
<dd>
<a class="new" href="">飞车手游
</a>
</dd>
-
<dd>
<a href="">精美壁纸
</a>
</dd>
-
<dd>
<a href="">游戏下载
</a>
</dd>
-
</dl>
-
<dl class="nav_zx">
-
<dt>
</dt>
-
<dd>
<a href="">ssc
</a>
</dd>
-
<dd>
<a href="">谁是车王
</a>
</dd>
-
<dd>
<a href="">全明争霸赛
</a>
</dd>
-
</dl>
-
<dl class="nav_ss">
-
<dt>
</dt>
-
<dd>
<a href="">ssc
</a>
</dd>
-
<dd>
<a href="">谁是车王
</a>
</dd>
-
<dd>
<a href="">全明争霸赛
</a>
</dd>
-
</dl>
-
<dl class="nav_hd">
-
<dt>
</dt>
-
<dd>
<a href="">版本专区
</a>
</dd>
-
<dd>
<a href="">合作专区
</a>
</dd>
-
<dd>
<a href="">CDK兑换
</a>
</dd>
-
</dl>
-
</div>
-
</div>
-
<div id="link" class="container">
-
<a href="#">
</a>
-
</div>
-
<div id="banner" class="container">
-
<div class="banner_left l">
-
<div class="banner_download">
-
<p>下载游戏
</p>
-
<p>DOWNLOAD
</p>
-
</div>
-
<div class="banner_user">
-
<div>
-
<img src="./images1/56x56.jpg" alt="">
-
</div>
-
<p>欢迎
<a href="#">首页
</a>登录，进入飞车世界
</p>
-
</div>
-
</div>
-
<div class="banner_center l">
-
<div class="banner_list">
-
<ul class="banner_list_ul">
-
<li>
-
<a href="" alt="">
<img src="http://ossweb-img.qq.com/upload/adw/image/20190510/6ae827443c667576e26fa4d48d93e199-80.jpg" alt="">
</a>
-
</li>
-
<li>
-
<a href="" alt="">
<img src="http://ossweb-img.qq.com/upload/adw/image/20190508/178c724ac47ee0f74e32b4a386dd5808-80.jpg" alt="">
</a>
-
</li>
-
<li>
-
<a href="" alt="">
<img src="http://ossweb-img.qq.com/upload/adw/image/20190513/f7aa08a33c9ee8f1d66d543b10cba86b-80.jpg" alt="">
</a>
-
</li>
-
</ul>
-
<div class="banner_bottomline">
-
<ul class="banner_bottomline_ul">
-
<li class="active">
</li>
-
<li>
</li>
-
<li>
</li>
-
</ul>
-
<div class="banner_bottomline_leftbtn">
</div>
-
<div class="banner_bottomline_rightbtn">
</div>
-
</div>
-
<i class="banner_list_lt">
</i>
-
<i class="banner_list_rt">
</i>
-
<i class="banner_list_rb">
</i>
-
<i class="banner_list_lb">
</i>
-
</div>
-
</div>
-
<diV class="banner_right l">
-
<a href="#">
<img src="./images1/bebae86c3d1f64d50a53434ed5458d22-80.jpg" alt="">
</a>
-
<i class="banner_right_lt">
</i>
-
<i class="banner_right_rt">
</i>
-
<i class="banner_right_rb">
</i>
-
<i class="banner_right_lb">
</i>
-
</diV>
-
-
</div>
-
-
</div>
-
-
</body>
-
</html>
common.css
-
/* 可复用样式全部放在这个css文件里面 */
-
/* 清除页面中的默认样式 */
-
*{
margin:
0;
padding:
0;}
-
/* 设置为块级标签 */
-
img{
display: block;}
-
/* 去除小圆点 */
-
ul,
ol{
list-style: none;}
-
/* 去除下划线 */
-
a{
text-decoration: none;
color:
#464646;}
-
/* 设置文字大小 */
-
h1,
h2,
h3{
font-size:
16px;}
-
/* 设置字体 */
-
body{
font-family: Arial,
'宋体';}
-
-
/* 左右浮动和清除浮动 */
-
/* 左浮动 */
-
.l{
float: left;}
-
/* 右浮动 */
-
.r{
float: right;}
-
/* 清除浮动 */
-
.clear
:after{
content:
"";
display: block;
clear: both;}
-
-
/* 设置通栏和版心 */
-
/* 版心 */
-
.container{
width:
980px;
margin:
0 auto;
position: relative;}
-
/* 通栏 */
-
.container-fluid{
width:
100%;}
-
-
/* 背景图片横向铺开 */
-
#head{
background:
url(
'../images1/head_bg.png') repeat-x;}
-
/* 设置版心的高度 */
-
#head
.container{
height:
41px;}
-
/* 插入logo图片 */
-
#head
.head_logo{
width:
220px;
height:
41px;
background:
url(../images1/ost-bg.png) no-repeat
0 -
38px;}
-
/* 通过a链接给整个图片加上一个小手 */
-
#head
.head_logo
a{
display: block;
width:
100%;
height:
100%;
text-indent: -
9999px;
overflow: hidden;}
-
/* 设置图片之间的间距 */
-
#head
.head_ad{
margin-left:
8px;}
-
/* 设置字体大小 */
-
#head
.head_menu{
font-size:
12px;}
-
/* 设置上边距 */
-
#head
.head_menu
div{
height:
18px;
margin-top:
13px;
background:
url(../images1/ost-bg.png) no-repeat;}
-
/* 插入小图标 */
-
#head
.head_menu
.head_menu_czsh{
margin-right:
26px;
padding-left:
20px;
background-position: left -
91px;}
-
/* 插入小图标 */
-
#head
.head_menu
.head_menu_top{
padding-right:
17px;
background-position: right -
91px;}
-
2.4.1站酷网页面预览
这些都是简单的div+css布局 不会使用组件库或者插件 页面也是不断的模仿加工 学习
2.4.2站酷网页面代码
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>站酷网
</title>
-
<link rel="stylesheet" href="./zhankucss/common.css">
-
<style>
-
-
-
.head{
width:
100%;
height:
71px;
background:
url(./zhankuimg/left.jpg) no-repeat
34px
20px,
url(./zhankuimg/jin.jpg) no-repeat
1189px
20px,
url(./zhankuimg/yun.jpg) no-repeat
1249px
20px,
url(./zhankuimg/head.jpg);}
-
.head
.left
-
.head
.left
img{
width:
141px;
height:
24px;}
-
-
.middle
ul{
width:
800px;
margin:
0 auto;}
-
.middle
ul
li{
float: left;
width:
100px;
height:
100%;
line-height:
71px;}
-
.right
dd{
width:
100px;
overflow: hidden;}
-
.right
dt{
float: left;
line-height:
71px;
margin-left:
20px;
position: relative;
left:
130px;}
-
-
.body{
margin-top:
20px;}
-
-
.section
.section1
li{
width:
85px;
height:
50px;
float: left;
line-height:
50px;}
-
.section
.section1
li
a{
color: black;}
-
-
.section2{
margin:
0 auto;
width:
400px;
height:
100px;}
-
.section2
li{
width:
85px;
height:
50px;
float: left;
line-height:
50px;
margin-left:
35px;
position: relative;}
-
.section2
li
.hot
::after{
content:
"";
display: block;
width:
30px;
height:
30px;
background:
url(./zhankuimg/title.jpg) no-repeat;
position: absolute;
left:
75px;
top:
15px;}
-
-
.footer{
width:
100%;}
-
.footer
ul
li
div{
width:
264px;
height:
360px;
float: left;
margin-top:
20px;
margin-left:
15px;}
-
.footer
ul
li
div
img{
width:
100%;}
-
.footer
ul
li
div
dl
dt{
font-size:
20px;
color:
rgb(
84,
51,
51);
background:
url(./zhankuimg/hot.jpg) no-repeat
240px
5px;}
-
.footer
ul
li
div
dl
dd{
font-size:
12px;
color:
rgb(
187,
187,
206);}
-
.footer
ul
li
div
dl
.dd1
span{
width:
50px;
height:
20px;
display: block;
float: left;
text-align: right;
line-height:
20px;}
-
.footer
ul
li
div
dl
.dd1
.span1{
background:
url(./zhankuimg/eye.jpg) no-repeat
5px;}
-
.footer
ul
li
div
dl
.dd1
.span2{
background:
url(./zhankuimg/eye.jpg) no-repeat
5px;}
-
.footer
ul
li
div
dl
.dd1
.span3{
background:
url(./zhankuimg/eye.jpg) no-repeat
5px;}
-
.footer
ul
li
div
dl
.dd2{
position: relative;
left: -
150px;}
-
-
/* .footer ul li div dl .dd1 .span2{width: 21px;height: 16px;background: url(./zhankuimg/eye.jpg) no-repeat;}
-
.footer ul li div dl .dd1 .span3{width: 21px;height: 16px;background: url(./zhankuimg/eye.jpg) no-repeat;} */
-
</style>
-
</head>
-
<body>
-
<div class="container_fluid">
-
<div class="head">
-
<div class="middle">
-
<ul>
-
<li>
<a href=""> 首页
</a>
</li>
-
<li>
<a href=""> 发现
</a>
</li>
-
<li>
<a href=""> 同城
</a>
</li>
-
<li>
<a href=""> 职位
</a>
</li>
-
<li>
<a href=""> 活动
</a>
</li>
-
<li>
<a href=""> 正版素材
</a>
</li>
-
<li>
<a href=""> 课程
</a>
</li>
-
<li>
<a href=""> ...
</a>
</li>
-
</ul>
-
</div>
-
<div class="right">
-
<dl>
-
<dd>
-
<dt>登录
</dt>
-
<dt>注册
</dt>
-
</dd>
-
</dl>
-
</div>
-
</div>
-
</div>
-
<div class="container">
-
<div class="body">
-
<img src="./zhankuimg/content.jpg">
-
</div>
-
</div>
-
<div class="container">
-
<div class="section">
-
<ul class="section1">
-
<li>
<a href="">全部
</a>
</li>
-
<li>
<a href="">平面
</a>
</li>
-
<li>
<a href="">UI
</a>
</li>
-
<li>
<a href="">网页
</a>
</li>
-
<li>
<a href="">插画
</a>
</li>
-
<li>
<a href="">动漫
</a>
</li>
-
<li>
<a href="">摄影
</a>
</li>
-
<li>
<a href="">空间
</a>
</li>
-
<li>
<a href="">工业/产品
</a>
</li>
-
<li>
<a href="">三维
</a>
</li>
-
<li>
<a href="">影视
</a>
</li>
-
<li>
<a href="">手工艺
</a>
</li>
-
<li>
<a href="">纯艺术
</a>
</li>
-
<li>
<a href="">服装
</a>
</li>
-
<li>
<a href="">其他
</a>
</li>
-
<li>
<a href="">自定义
</a>
</li>
-
</ul>
-
</div>
-
<ul class="section2">
-
<li class="hot">编辑精选
</li>
-
<li>最新发布
</li>
-
<li>上升最快
</li>
-
</ul>
-
</div>
-
<div class="container-fluid">
-
<div class="container">
-
<div class="footer">
-
<ul>
-
<li>
-
<div>
-
<img src="./zhankuimg/1.jpg">
-
<dl>
-
<dt>我是最萌的图片
-
</dt>
-
<dd>影视宣传片
</dd>
-
<dd class="dd1">
-
-
<span class="span1">59
</span>
-
<span class="span2">0
</span>
-
<span class="span3">1
</span>
</dd>
-
<br>
-
<dd class="dd2">麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/2.jpg">
-
<dl>
-
<dt>运维5G高效摄入法
</dt>
-
<dd>网页其他网页
</dd>
-
<dd class="dd1">
-
-
<span class="span1">59
</span>
-
<span class="span2">0
</span>
-
<span class="span3">1
</span>
</dd>
-
<br>
-
<dd class="dd2">麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/3.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
</dt>
-
<dd>热点内容
</dd>
-
<dd class="dd1">
-
-
<span class="span1">59
</span>
-
<span class="span2">0
</span>
-
<span class="span3">1
</span>
</dd>
-
<br>
-
<dd class="dd2">麻薯印象
</dd>
-
</dl>
-
</div>
-
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/4.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
-
-
</dt>
-
<dd>热点内容
</dd>
-
<dd class="dd1">
-
-
<span class="span1">59
</span>
-
<span class="span2">0
</span>
-
<span class="span3">1
</span>
</dd>
-
<br>
-
<dd class="dd2">麻薯印象
</dd>
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/5.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
</dt>
-
<dd>热点内容
</dd>
-
<dd class="dd1">
-
-
<span class="span1">59
</span>
-
<span class="span2">0
</span>
-
<span class="span3">1
</span>
</dd>
-
<br>
-
<dd class="dd2">麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
</ul>
-
<ul>
-
<li>
-
<div>
-
<img src="./zhankuimg/1.jpg">
-
<dl>
-
<dt>我是最萌的图片
</dt>
-
<dd>影视宣传片
</dd>
-
<dd>麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/2.jpg">
-
<dl>
-
<dt>运维5G高效摄入法
</dt>
-
<dd>网页其他网页
</dd>
-
<dd>麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/3.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
</dt>
-
<dd>热点内容
</dd>
-
<dd>麻薯印象
</dd>
-
</dl>
-
</div>
-
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/4.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
</dt>
-
<dd>热点内容
</dd>
-
<dd>麻薯印象
</dd>
-
</dl>
-
</div>
-
</li>
-
<li>
-
<div>
-
<img src="./zhankuimg/5.jpg">
-
<dl>
-
<dt>运营专题高效摄入法
</dt>
-
<dd>热点内容
</dd>
-
<dd>麻薯印象
</dd>
-
-
</dl>
-
</div>
-
</li>
-
</ul>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
common.css
-
*{
margin:
0;
padding:
0;}
-
img{
display: block;}
-
a{
text-decoration: none;}
-
ul,
ol{
list-style: none;}
-
h1,
h2,
h3{
font-size:
16px;}
-
body{
font-family: Arial, Helvetica, sans-serif;}
-
-
/* 左右浮动和清除浮动 */
-
/* 左浮动 */
-
.l{
float: left;}
-
/* 右浮动 */
-
.r{
float: right;}
-
/* 清除浮动 */
-
.clear
:after{
content:
"";
display: block;
clear: both;}
-
-
/* 设置通栏和版心 */
-
/* 版心 */
-
.container{
width:
1414px;
margin:
0 auto;
position: relative;}
-
/* 通栏 */
-
.container-fluid{
width:
100%;}
2.5.1后台静态管理页面预览
2.5.2后台静态管理页面页面代码
总归就是闲来无事做 就不如画画页面练练手 不断的进行一个输出和成长 代码有点多 后面叙述会节省一点 不能做到任何代码都贴在上面
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>正达管理后台
</title>
-
<link rel="stylesheet" href="./zhcss/common.css">
-
<link rel="stylesheet" href="./iconfont/iconfont.css">
-
<style>
-
#projectTitle
.projectTitle_text{
margin:
21px
0
0
22px;
color:
#333333;}
-
#projectTitle
.projectTitle_text
h2{
font-size:
24px;
line-height:
25px;}
-
#projectTitle
.projectTitle_text
p{
font-size:
14px;
line-height:
30px;
margin:
10px
0
13px
0;}
-
#projectTitle
.projectTitle_text
p
span{
color:
#999999;}
-
#projectTitle
.projectTitle_text
i{
font-size:
22px;
color:
#cccccc;
margin-left:
30px;}
-
#projectTitle
.projectTitle_img{
width:
200px;
height:
149px;
margin:
20px
20px
0
0;}
-
-
#projectList
.projectList_btns{
height:
54px;
background:
#f1f9fc;
border-top:
1px
#e0eaef solid;
-
border-bottom:
1px
#dbe7ed solid;}
-
#projectList
.projectList_btns
ul{
margin:
14px
0
0
20px;}
-
#projectList
.projectList_btns
li{
float: left;
width:
108px;
height:
39px;
border:
1px solid
#dbde7b;
-
border-bottom: none;
background:
#fbfeff;
color:
#666666;
text-align: center;
line-height:
39px;
margin-right:
12px;
-
border-radius:
5px
5px
0
0;
cursor: pointer;}
-
-
#projectList
.projectList_btns
li
.active{
color: white;
background:
#018ffb;
position: relative;}
-
#projectList
.projectList_btns
li
.active
::after{
content:
"";
display: block;
position: absolute;
-
width:
11px;
height:
6px;
background:
url(
"./zhimg/arrow.png") no-repeat;
bottom: -
6px;
left:
50%;
margin-left: -
6px;}
-
-
#projectList
.projectList_cons{
margin:
20px;}
-
#projectList
.projectList_cons>
div{
display: none;}
-
#projectList
.projectList_cons>
div
.show{
display: block;}
-
-
-
#projectList
.zl_upload1,
#projectList
.zl_upload2{
width:
110px;
height:
32px;
line-height:
32px;
-
text-align: center;
font-size:
14px;
color: white;
border-radius:
5px;}
-
#projectList
.zl_upload1
input,
#projectList
.zl_upload2
input{
display: none;}
-
#projectList
.zl_upload1
label,
#projectList
.zl_upload2
label{
cursor: pointer;}
-
#projectList
.zl_upload1{
background:
#5FD15C;}
-
#projectList
.zl_upload2{
background:
#34C1DA;
margin-left:
20px;}
-
#projectList
.iconshangchuan1{
font-size:
12px;
position: relative;
top: -
1px;}
-
#projectList
.iconshangchuan2{
font-size:
12px;}
-
#projectList
.zl_search{
width:
210px;
height:
30px;
border:
1px solid
#dbe7ed;
border-radius:
5px;
-
overflow: hidden;}
-
#projectList
.zl_search
input{
border: none;
width:
177px;
height:
100%;
color:
#999999;
font-size:
14px;
-
text-indent:
9px;
position: relative;
top: -
3px;
outline: none;}
-
#projectList
.zl_search
button{
width:
32px;
height:
32px;
border: none;
border-left:
1px
#dbe7ed solid;
-
background-image:
linear-gradient(#FCFDFD,#F1F9FC);}
-
#projectList
.zl_search
i{
font-size:
18px;
font-weight: bold;
color:
#A1C6D4;}
-
-
#projectList
.zl_table{
clear: both;
width:
100%;
border:
1px solid
#dbe7ed;
font-size:
12px;
-
border-collapse: collapse;
position: relative;
top:
20px;}
-
#projectList
.zl_table
tr{
height:
32px;
border-bottom:
1px solid
#e7eff3;}
-
#projectList
.zl_table
tr
.hover{
background:
#f1f9fc;}
-
#projectList
.zl_table
th{
border-right:
1px
#dbe7ed solid;
color:
#666666;
font-weight: normal;
text-align: left;
-
text-indent:
18px;
background:
#f1f9fc;}
-
#projectList
.zl_table
td{
text-indent:
12px;}
-
#projectList
.zl_table
th
:first-child,
#projectList
.zl_table
td
:first-child{
text-align: center;
text-indent:
0;}
-
#projectList
.zl_table
.iconword{
margin-right:
13px;
color:
#0173ca;}
-
#projectList
.zl_table
.iconxiazai{
color:
#3da2f0;}
-
#projectList
.zl_table
.iconshanchushaixuanxiang{
color:
#d94141;}
-
-
#projectList
.zl_footer{
height:
70px;
border:
1px solid
#dbde7b;
border-top: none;
margin-top:
20px;
overflow: hidden;}
-
#projectList
.zl_remove ,
#projectList
.zl_download{
width:
78px;
height:
24px;
border:
1px
#c9e4f1 solid;
-
border-radius:
3px;
background-image:
linear-gradient(#F7FCFF,#E4F4FA);
margin-top:
18px;
-
font-size:
12px;
color:
#1B84BA;
cursor: pointer;}
-
#projectList
.zl_remove{
margin-right:
15px;
margin-left:
22px;}
-
#projectList
.zl_page{
font-size:
12px;
line-height:
24px;
margin:
22px
18px
0
0;
font-size:
0;}
-
#projectList
.zl_page
a{
border:
1px solid
#e6e6e6;
padding:
6px
9px;
font-size:
12px;
margin-left:
10px;}
-
#projectList
.zl_page
a
.active{
border:
1px solid
#3797e0;
background:
#42adff;
color: white;}
-
</style>
-
</head>
-
<body>
-
<header id="header">
-
<hgroup class="header_logo l">
-
<h1 class="l">
-
<img src="./zhimg/logo.png">
-
</h1>
-
<h2 class="l">正达建筑内部管理平台
</h2>
-
</hgroup>
-
<ul class="header_nav r">
-
<li>
-
<i class="iconfont iconwode">
</i>欢迎你:歌谣 管理员
-
</li>
-
<li>
-
<i class="iconfont iconyuechi">
</i>
<a href="#">修改密码
</a>
-
</li>
-
<li>
-
<i class="iconfont iconshouye">
</i>
<a href="#">公司官网
</a>
-
</li>
-
<li>
-
<i class="iconfont iconplus-share">
</i>
<a href="#">退出
</a>
-
</li>
-
</ul>
-
</header>
-
<aside id="menu" class="l">
-
<ul>
-
<li class="active">
-
<a href="">
-
<i class="iconfont iconloukongguanli">
</i>
<p>项目管理
</p>
-
</a>
-
</li>
-
<li>
-
<a href="">
-
<i class="iconfont iconyonghuxinxi">
</i>
<p>用户管理
</p>
-
</a>
-
</li>
-
<li>
-
<a href="">
-
<i class="iconfont iconshezhi">
</i>
<p>系统设置
</p>
-
</a>
-
</li>
-
</ul>
-
</aside>
-
<main id="main">
-
<section class="main_container">
-
<section id="projectTitle" class="clear">
-
<div class="projectTitle_text l">
-
<h2>晴天高玩绿源一期，二期工程
<i class="iconfont iconbianji">
</i>
</h2>
-
<p>
-
项目编号:
<span>CN1111111
</span>
<br>
-
项目类型:
<span>在建工程
</span>
<br>
-
项目负责人:
<span>歌谣
</span>
<br>
-
手机号码:
<span>123413241542
</span>
<br>
-
</p>
-
</div>
-
<div class="projectTitle_img r">
-
<img src="./zhimg/prpject.jpg">
-
</div>
-
</section>
-
<section id="projectList">
-
<div class="projectList_btns">
-
<ul>
-
<li>视频监控
</li>
-
<li>考勤管理
</li>
-
<li>安全巡查
</li>
-
<li class="active">资料管理
</li>
-
</ul>
-
</div>
-
<div class="projectList_cons">
-
<div>视频监控1111
</div>
-
<div>考情管理2222
</div>
-
<div>我是歌谣3333
</div>
-
<div class="show">
-
<div class="zl_upload1 l">
-
<label>
-
<input type="file">
-
<i class="iconfont iconshangchuan1">
</i>
单个上传
-
</label>
-
</div>
-
<div class="zl_upload2 l">
-
<label>
-
<input type="file" multiple>
-
<i class="iconfiont iconshangchuan">
</i>
批量上传
-
</label>
-
</div>
-
<div class="zl_search r">
-
<input type="text" placeholder="请输入关键字">
<button>
-
<i class="iconfont iconsuosou">
</i>
-
</button>
-
</div>
-
<table class="zl_table">
-
<thead>
-
<tr>
-
<th width="49">
<input type="checkbox">
</th>
-
<th>文档名称
</th>
-
<th width="167">文档大小
</th>
-
<th width="148">上传者
</th>
-
<th width="168">上传时间
</th>
-
<th width="81">操作
</th>
-
</tr>
-
<tbody>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
<tr>
-
<td>
<input type="checkbox">
</td>
-
<td>
<i class="iconfont iconword">
</i>安全专项方案.doc
</td>
-
<td>21.3kb
</td>
-
<td>歌谣
</td>
-
<td>2016-03-14
</td>
-
<td>
-
<i class="iconfont iconxiazai">
</i>
-
<i class="iconfont iconshanchushaixuanxiang">
</i>
-
</td>
-
</tr>
-
</tbody>
-
</thead>
-
</table>
-
<div class="zl_footer">
-
<button class="zl_remove">批量删除
</button>
-
<button class="zl_download">批量下载
</button>
-
<div class="zl_page r">
-
<a href="#">共十二条
</a>
-
<a href="#">首页
</a>
-
<a href="#">上一页
</a>
-
<a href="#" class="active">1
</a>
-
<a href="#">2
</a>
-
<a href="#">3
</a>
-
<a href="#">下一页
</a>
-
<a href="#">尾页
</a>
-
</div>
-
</div>
-
</div>
-
</div>
-
</section>
-
</section>
-
</main>
-
<footer id="footer">
-
Copyright @ 2009 - 2016 阿里巴巴正达建筑工程有限公司 All rights reserved 技术支持:红点智能
-
</footer>
-
</body>
-
</html>
commom,css
-
*{
margin:
0;
padding:
0;}
-
ul{
list-style: none;}
-
img{
display: block;}
-
h1,
h2,
h3{
font-size:
16px;
font-weight: normal;}
-
a{
text-decoration: none;
color:
#333333;}
-
html,
body{
font-family: Arial, Helvetica, sans-serif;
height:
100%;
overflow-y: hidden;}
-
-
.l{
float: left;}
-
.r{
float: right;}
-
.clear
:after{
content:
"";
display: block;
clear: both;}
-
-
#header{
height:
80px;
background:
#018ffb;
border-top:
5px
#424147 solid;}
-
#header
.header_logo{}
-
#header
.header_logo
h1{
margin:
19px
14px
0
20px;}
-
#header
.header_logo
h2{
color: white;
font-size:
24px;
line-height:
25px;
margin-top:
28px;}
-
-
#header
.header_nav{
color: white;
font-size:
14px;
line-height:
14px;
margin-top:
33px;}
-
#header
.header_nav
li{
float: left;
margin-right:
25px;}
-
#header
.header_nav
i{
color: white;
margin-right:
8px;}
-
#header
.header_nav
a{
color: white;}
-
#header
.header_nav
i
.iconwode{
font-size:
24px;
position: relative;
top:
4px;
line-height:
8px;}
-
#header
.header_nav
i
.iconshouye{
font-size:
20px;
position: relative;
top:
2px;
line-height:
12px;}
-
-
#menu{
width:
200px;
background:
#424147;
height:
calc(
100% -
85px);}
-
#menu
ul{
color:
#9a999e;
text-align: center;}
-
#menu
li{
height:
140px;
border-bottom:
1px solid
#3a393e;
border-top:
1px solid
#49484e;}
-
#menu
li
.active{
color: white;
background:
#4e4d53;}
-
#menu
li
a{
color: inherit;
width:
100%;
height:
100%;
display: block;
padding-top:
35px;
box-sizing: border-box;}
-
#menu
li
i{
font-size:
40px;}
-
#menu
li
p{
margin-top:
15px;}
-
-
#main{
overflow: hidden;
height:
calc(
100% -
85px -
50px);}
-
#main
.main_container{
height:
100%;
overflow: auto;}
-
-
#footer{
height:
49px;
border-top:
1px solid
#dbe72d;
background:
#f1f9fc;
text-align: right;
font-size:
12px;
-
color:
#888888;
line-height:
49px;
margin-right:
20px;}
2.6.1移动端拉勾网页面预览
2.6.2移动端拉勾网页面代码
昨晚pc端的开发 当然也要开始做做移动端的开发
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<link rel="stylesheet" href="./iconfont1/">
-
<title>移动端
</title>
-
<link rel="stylesheet" href="./iconfont1/iconfont.css">
-
<style>
-
*{
margin:
0;
padding:
0;}
-
ul{
list-style: none;}
-
img{
display: block;}
-
a{
text-decoration: none;
color:
#333333;}
-
-
header{
height:
45px;
background:
#00b38a;
font-size:
20px;
color: white;
-
text-align: center;
line-height:
45px;}
-
-
.login{
height:
43px;
display: flex;
justify-content: space-between;
align-items: center;
-
font-size:
14px;}
-
.login
p{
margin-left:
16px;}
-
.login
div{
width:
84px;
height:
30px;
background:
#f5f5f5;
margin-right:
15px;
text-align: center;
-
line-height:
30px;
border-radius:
15px;}
-
.login
div
a{
display: block;
width:
100%;
height:
100%;}
-
-
.list{}
-
.list
li{
height:
90px;
border-top:
1px
#e8e8e8 solid;
display: flex;
align-items: center;}
-
.list
.list_img{
width:
60px;
margin:
0
10px
0
14px;}
-
.list
.list_img
img{
width:
100%;}
-
.list
.list_info{
flex:
1;}
-
.list
.list_info
h2{
font-size:
18px;}
-
.list
.list_info
p
:first-of-type{
font-size:
14px;
display: flex;
justify-content: space-between;}
-
.list
.list_info
p
:first-of-type
span
:last-of-type{
margin-right:
14px;
color:
#17b994;}
-
.list
.list_info
p
:last-of-type{
font-size:
12px;
color:
#888888;
margin-top:
8px;}
-
-
.more{
height:
50px;
background:
#fafafa;
border-top:
1px
#e8e8e8 solid;
text-align: center;
-
line-height:
50px;}
-
.more
a{
display: block;
width:
100%;
height:
100%;}
-
-
footer{
height:
115px;
text-align: center;
font-size:
12px;
line-height:
22px;
-
padding-top:
27px;
box-sizing: border-box;
margin-bottom:
45px;}
-
-
.tabber{
width:
100%;
height:
45px;
border-top:
1px
#e8e8e8 solid;
display: flex;
position: fixed;
-
bottom:
0;
background:
#f6f6f6;
font-size:
18px;
color:
#c2cfcc;}
-
.tabber
i{
font-size:
22px;
position: relative;
top:
2px;}
-
.tabber
div{
flex:
1;
text-align: center;
line-height:
45px;}
-
.tabber
.active{
background:
#e7f3f0;
color:
#00b38a;}
-
</style>
-
</head>
-
<body>
-
<header>拉勾网
</header>
-
<section class="login">
-
<p>十秒钟定制职位
</p>
-
<div>
<a href="#">去登陆
</a>
</div>
-
</section>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<ul class="list">
-
<li>
-
<div class="list_img">
-
<a href="#">
<img src="./lagou1.jpg">
</a>
-
</div>
-
<div class="list_info">
-
<h2>
<a href="">正大艾特
</a>
</h2>
-
<p>
-
<span>中级java工程师
</span>
-
<span>13k-20k
</span>
-
</p>
-
<p>今天11：16
</p>
-
</div>
-
</li>
-
</ul>
-
<section class="more">
-
<a href="">加载更多
</a>
-
</section>
-
<footer>
-
<p>@2019 lan.com,all right reserved
</p>
-
<p>
-
<a href="#">移动端
</a> !
<a href="#">移动端
</a> !
<a href="#">移动端
</a>
-
</p>
-
</footer>
-
<section class="tabber">
-
<div class="active">
<i class="iconfont icon-home">
</i> 职位
</div>
-
<div>
<i class="iconfont icon-sousuo-">
</i> 搜索
</div>
-
<div>
<i class="iconfont icon-wode">
</i> 我的
</div>
-
</section>
-
</body>
-
</html>
2.7.1移动贺卡开发预览
本段代码总共有三个页面 也包括了一些简单js逻辑
2.7.2移动贺卡开发预览
index.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,
-
maximum-scale=1,user-scalable=no">
-
<meta name="format-detection" content="telephone=no">
-
<meta http-equiv="X-UA-Compatible" content="chrome=1">
-
<title>新春贺卡
</title>
-
<link rel="stylesheet" type="text/css" href="./mooccss/style.css">
-
-
</head>
-
<body>
-
<div class="music">
-
<img src="./moocimg/music_pointer.png" alt="">
-
<img class="play" id="music" src="./moocimg/music_disc.png" alt="">
-
</div>
-
<div class="page" id="page1">
-
<div class="bg">
</div>
-
<div class="p1_lantern">点击屏幕
<br>开启好运2020
</div>
-
<div class="p1_imooc">
</div>
-
<div class="p1_words">2020年歌谣新年特写
</div>
-
</div>
-
<div class="page" id="page2">
-
<div class="p2_bg_loading">
</div>
-
<div class="bg">
</div>
-
<div class="p2_circle">
</div>
-
<div class="p2_2016">
</div>
-
</div>
-
<div class="page" id="page3">
-
<div class="bg">
</div>
-
<div class="p3_logo">
</div>
-
<div class="p3_title">
</div>
-
<div class="p3_second">
</div>
-
<div class="p3_first">
</div>
-
<div class="p3_blessing">
</div>
-
</div>
-
<audio autoplay="true">
-
<source src="./moocmusic/test.mp3" type="audio/mpeg">
-
</audio>
-
<script>
-
window.onclick =
function(){
-
var page1=
document.getElementById(
"page1");
-
var page2=
document.getElementById(
"page2");
-
var page3=
document.getElementById(
"page3");
-
-
var music =
document.getElementById(
"music");
-
var audio =
document.getElementsByTagName(
"audio")[
0];
-
-
// 音乐结束自动自动停止
-
audio.addEventListener(
"ended",
function(event){
-
music.setAttribute(
"class",
"");
-
},
false);
-
-
// music.onclick = function(){
-
// if(audio.paused){
-
// audio.play();
-
// this.setAttribute("class","play");
-
// // this.style.animationPlayState="running";
-
// // music.setAttribute("class","play");
-
// }else{
-
// audio.pause();
-
// this.setAttribute("class","");
-
// // music.setAttribute("class",""); this.style.animationPlayState="paused";
-
// };
-
// };
-
music.addEventListener(
"touchstart",
function(event){
-
if(audio.paused){
-
audio.play();
-
this.setAttribute(
"class",
"play");
-
// this.style.animationPlayState="running";
-
// music.setAttribute("class","play");
-
}
else{
-
audio.pause();
-
this.setAttribute(
"class",
"");
-
// music.setAttribute("class",""); this.style.animationPlayState="paused";
-
};
-
},
false);
-
-
-
// 页面翻页
-
page1.addEventListener(
"touchstart",
function(event){
-
page1.style.display=
"none";
-
page2.style.display=
"block";
-
page3.style.display=
"block";
-
page3.style.top=
"100%";
-
setTimeout(
function(){
-
page2.setAttribute(
"class",
"page fadeOut");
-
page3.setAttribute(
"class",
"page fadeIn");
-
},
5500);
-
},
false);
-
-
};
-
</script>
-
-
</body>
-
-
</html>
style.css
-
*{
margin:
0;
padding:
0;
border: none;
font-size:
1.5625vw;
font-family:
"Microsoft Yahei";}
-
html,
body{
height:
100%;
overflow: hidden;}
-
.music{
position: fixed;
top:
3vh;
right:
4vh;
width:
15vw;
height:
15vw;
border:
4px solid
#ef1639;
z-index:
5;
background:
#fff;
border-radius:
50%;}
-
-
.music >
img
:first-of-type{
position: absolute;
top:
24%;
right:
2.5%;
width:
28.421%;
z-index:
1;}
-
.music >
img
:last-of-type{
position: absolute;
top:
0;
right:
0;
bottom:
0;
left:
0;
margin: auto;
width:
79%;
z-index:
0;}
-
.music >
img
.play{
-
-webkit-animation: music_disc
4s linear infinite;
-
-o-animation: music_disc
4s linear infinite;
-
animation: music_disc
4s linear infinite;
-
}
-
@keyframes music_disc{
-
0%{
-
-
transform:
rotate(
0deg);
-
}
-
100%{
-
transform:
rotate(
360deg);
-
}
-
}
-
-
-
-
.page {
width:
100%;
height:
100%;
position: absolute;}
-
.page >
.bg {
position: absolute;
width:
100%;
height:
100%;
z-index: -
1;}
-
-
#page1{
display: block;}
-
#page1 >
.bg{
background:
url(
"../moocimg/p1_bg.jpg") no-repeat center center;
-
background-size:
100%;}
-
#page1 >
.p1_lantern{
position: absolute;
top: -
3.4%;
right:
0;
left:
0;
margin: auto;
width:
45vw;
height:
71.2vh;
background:
url(
"../moocimg/p1_lantern.png") no-repeat center bottom;
-
font-size:
3.506rem;
background-size:
100%;
padding-top:
31vh;
color:
#fff;
-
box-sizing: border-box;
text-align: center;
animation: p1_lantern .
5s infinite alternate;}
-
@keyframes p1_lantern{
-
0%{
opacity: .
5;
-
transform:
scale(.
8,.
8);
-
}
-
100%{
opacity:
1;}
-
}
-
-
#page1 >
.p1_lantern
::before{
position: absolute;
top:
0;
right:
0;
bottom:
0;
left:
0;
margin: auto;
width:
30vw;
height:
30vw;
background:
#d60b5b;
opacity: .
5;
box-shadow:
0
0
10vw
10vw
#d60b5b;
z-index: -
1;
content:
"";
border-radius:
50%;}
-
-
#page1 >
.p1_imooc{
position: absolute;
right:
0;
bottom:
9vh;
left:
0;
background:
url(
"../moocimg/p1_imooc.png") no-repeat center center;
background-size:
100%;
width:
27.656vw;
height:
18.63vh;
margin: auto;}
-
#page1 >
.p1_words{
font-size:
2.134rem;
position: absolute;
left:
0;
right:
0;
bottom:
48px;
text-align: center;
color:
#231815;}
-
-
#page2{
display: none;
transition: .
5s;}
-
#page2
.p2_bg_loading{
z-index:
4;
background:
#ef1639;
-
animation: p2_bg_loading
1s linear forwards;}
-
@keyframes p2_bg_loading{
-
0%{
opacity:
1;}
-
100%{
opacity:
0;}
-
}
-
#page2
.fadeOut{
opacity: .
3;
-
transform:
translate(
0.-
100%);}
-
#page2 >
.bg{
background:
url(
"../moocimg/p2_bg.jpg") no-repeat center center;
-
background-size:
100%;}
-
#page2 >
.p2_circle
::before{
position: absolute;
top:
0;
right:
0;
left:
0;
bottom:
0;
margin: auto;
content:
"";
background:
url(
"../moocimg/p2_circle_middle.png") no-repeat center center;
background-size:
100%;
width:
45.625vw;
height:
45.625vw;
border-radius:
50%;
-
animation: p2_circle_middle
1s linear
2s infinite;}
-
#page2 >
.p2_circle
::after{
position: absolute;
top:
0;
right:
0;
left:
0;
bottom:
0;
margin: auto;
content:
"";
background:
url(
"../moocimg/p2_circle_inner.png") no-repeat center center;
-
background-size:
100%;
width:
39.937vw;
height:
39.937vw;
border-radius:
50%;
-
animation: p2_circle_inner
1s linear
1s infinite;
-
}
-
@keyframes p2_circle_inner{
-
0%{
-
transform:
rotate(
0deg);
-
}
-
100%{
-
transform:
rotate(-
1080deg);
-
}
-
}
-
@keyframes p2_circle_middle{
-
0%{
-
transform:
rotate(
0deg);
-
}
-
100%{
-
transform:
rotate(-
720deg);
-
}
-
}
-
#page2 >
.p2_circle{
position: absolute;
top:
0;
right:
0;
left:
0;
bottom:
0;
margin: auto;
background:
url(
"../moocimg/p2_circle_outer.png") no-repeat center center;
background-size:
100%;
width:
59.375vw;
height:
59.375vw;
border-radius:
50%;
animation: p2_circle_outer
1s linear
3s infinite;}
-
@keyframes p2_circle_outer{
-
0%{
-
transform:
rotate(
0deg);
-
}
-
100%{
-
transform:
rotate(-
360deg);
-
}
-
}
-
#page2 >
.p2_2016{
position: absolute;
top:
0;
right:
0;
left:
0;
bottom:
0;
margin: auto;
background:
url(
"../moocimg/p2_2016.png") no-repeat center center;
background-size:
100%;
width:
27.5vw;
height:
6.24vh;}
-
-
#page3{
display: none;
transition: .
5s;}
-
#page3
.fadeIn{
transform:
translate(
0,-
100%);}
-
#page3 >
.bg{
background:
url(
"../moocimg/p3_bg.jpg") no-repeat center center;
-
background-size:
100%;}
-
#page3>
.p3_logo{
width:
34.6875vw;
height:
6.327vh;
position: absolute;
top:
7.82vh;
right:
0;
-
left:
0;
background:
url(
"../moocimg/p3_logo.png") no-repeat center center;
background-size:
100%;
margin: auto;}
-
#page3>
.p3_title{
width:
48.125vw;
height:
50vh;
position: absolute;
top:
21vh;
right:
0;
-
left:
0;
background:
url(
"../moocimg/p3_title.png") no-repeat center center;
background-size:
100%;
margin: auto;}
-
#page3>
.p3_second{
width:
22.8125vw;
height:
41.625vh;
position: absolute;
top:
25.48vh;
left:
3.75vw;
background:
url(
"../moocimg/p3_couplet_second.png") no-repeat center center;
background-size:
100%;
margin: auto;}
-
#page3>
.p3_first{
width:
22.8125vw;
height:
41.625vh;
position: absolute;
top:
25.48vh;
right:
3.75vw;
background:
url(
"../moocimg/p3_couplet_first.png") no-repeat center center;
background-size:
100%;
margin: auto;}
-
#page3>
.p3_blessing{
width:
32vw;
height:
32vw;
position: absolute;
bottom:
10vh;
right:
0;
-
left:
0;
background:
url(
"../moocimg/p3_blessing.png") no-repeat center center;
background-size:
100%;
border-radius:
50%;
margin: auto;
-
animation: p3_blessing
2s linear infinite;}
-
@keyframes p3_blessing{
-
0%{
-
transform:
rotate(
0deg);
-
}
-
100%{
-
transform:
rotate(
360deg);
-
}
-
}
-
-
/* 特效 */
-
-
-
-
2.8.1京东网页页面预览
书写页面怎么能不写京东淘宝等一些页面的实现呢 作为学习者 这些应该都是我们模仿的对象
2.8.2京东网页页面代码
由于本页面代码过多 分为头部中部尾部样式 分开来写 就不全部复制
-
<!
DOCTYPE
html>
-
<
html
lang="
en">
-
<
head>
-
<
meta
charset="
UTF-8">
-
<
meta
name="
viewport"
content="
width=
device-width,
initial-scale=1
.0">
-
<
meta
http-equiv="
X-UA-Compatible"
content="
ie=
edge">
-
<
title>京东
JD
.COM官网 多快好省 只为品质生活</
title>
-
<!
-- 引入京东小图标
-->
-
<
link
rel="
shortcut
icon"
href="
favicon
.ico"
type="
image/
x-icon">
-
<!
-- 重置样式
-->
-
<
link
rel="
stylesheet"
href="./
jingdongcss/
normalize
.css">
-
<!
-- 头部和尾部基本相同 公共样式
-->
-
<
link
rel="
stylesheet"
href="./
jingdongcss/
base
.css">
-
<
link
rel="
stylesheet"
href="./
jingdongfont/
ie7
.css">
-
<
link
rel="
stylesheet"
href="./
jingdongcss/
index
.css">
-
<
meta
name="
description"
content="京东
JD
.COM-专业综合网上购物商城，销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东
PLUS会员，免费体验30天！京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！"/>
-
<
meta
name="
keywords"
content="网上购物，网上商城，手机，笔记本，电脑，相机，数码，手表，存储卡，京东"/>
-
</
head>
-
<
body>
-
<!
-- 头部开始
-->
-
<
header>
-
<
div
class="
w">
-
<
a
href="">
-
<
img
src="./
jingdongimg/
header
.jpg"
alt="">
-
</
a>
-
</
div>
-
</
header>
-
<!
-- 头部结束
-->
-
<!
-- 快速导航栏
-->
-
<
div
class="
shortcut">
-
<
div
class="
w">
-
<
ul
class="
fl
city">
-
<
li><
i
class="
f10"></
i><
a
href="#">北京</
a></
li>
-
</
ul>
-
<
ul
class="
fr">
-
<
li>
-
<
a
href="#">你好，请登录</
a>
-
<
a
href="#"
class="
f10">免费注册</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">我的订单</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">我的京东</
a>
-
<
i></
i>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">京东会员</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">企业采购</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">客户服务</
a>
-
<
i></
i>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">网站导航</
a>
-
<
i></
i>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#"
class="
moblie">手机京东
-
<
img
src="./
jingdongimg/
mobile
.png"
alt="">
-
</
a>
-
</
li>
-
</
ul>
-
</
div>
-
</
div>
-
-
<!
-- 快速导航栏结束
-->
-
<!
-- 中间部分
-->
-
<
div
class="
w
middle">
-
<
div
class="
logo">
-
<!
-- 提高权重，提高搜索引擎优化
-->
-
<
h1>
-
<
a
href="#"></
a>
-
</
h1>
-
</
div>
-
<!
-- 搜索框
-->
-
<
div
class="
form">
-
<
input
type="
text"
placeholder="扫描仪">
-
<!
-- 按钮的意思，双标签
-->
-
<
button><
i></
i></
button>
-
</
div>
-
<!
-- 购物车
-->
-
<
div
class="
shopCar">
-
<
i></
i>
-
<
a
href="#"
class="
f10">我的购物车</
a><
span>0</
span>
-
</
div>
-
<!
-- 关键字
-->
-
<
div
class="
hotwords">
-
<
a
href="#"
class="
f10">199减100</
a>
-
<
a
href="#">鼠标试用</
a>
-
<
a
href="#">农资7折</
a>
-
<
a
href="#">低至29元</
a>
-
<
a
href="#">抽奖赢空调</
a>
-
<
a
href="#">记忆棉</
a>
-
<
a
href="#">坐垫</
a>
-
<
a
href="#">1分钱买油</
a>
-
<
a
href="#">智能手表</
a>
-
</
div>
-
<!
-- 小导航部分
-->
-
<
div
class="
navitems">
-
<
ul>
-
<
li>
-
<
a
href="#">秒杀</
a>
-
</
li>
-
<
li>
-
<
a
href="#">优惠券</
a>
-
</
li>
-
<
li>
-
<
a
href="#">闪购</
a>
-
</
li>
-
<
li>
-
<
a
href="#">拍卖</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">服装城</
a>
-
</
li>
-
<
li>
-
<
a
href="#">京东超市</
a>
-
</
li>
-
<
li>
-
<
a
href="#">生鲜</
a>
-
</
li>
-
<
li>
-
<
a
href="#">全球购</
a>
-
</
li>
-
<
li
class="
space"></
li>
-
<
li>
-
<
a
href="#">京东金融</
a>
-
</
li>
-
</
ul>
-
</
div>
-
</
div>
-
<!
-- 中间部分结束
-->
-
<!
-- 中间部分 开始
-->
-
<
div
class="
w
grid">
-
<
div
class="
grid-coll1
fl">
-
<
div
class="
ad">
-
<
img
src="./
jingdongimg/
ad-l
.png"
height="480"
width="250"
alt="">
-
-
<
img
src="./
jingdongimg/
ad-r
.jpg"
class="
ad-r">
-
-
</
div>
-
<
ul>
-
<
li><
a
href="#">家用电器</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">图像</
a>/<
a
href="#">音响</
a>/<
a
href="#">电子书</
a></
li>
-
<
li><
a
href="#">手机</
a>/<
a
href="#">运用商</
a>/<
a
href="#">数码</
a></
li>
-
<
li><
a
href="#">理财</
a>/<
a
href="#">众筹</
a>/<
a
href="#">白条</
a>/<
a
href="#">保险</
a></
li>
-
</
ul>
-
</
div>
-
<
div
class="
grid-coll2
fl">
-
<
div
class="
coll2-t">
-
<
a
href="#"><
img
src="./
jingdongimg/
banner
.jpg"
height="340"
width="790"
alt=""></
a>
-
<
a
href="#"
class="
arrow-l"><</
a>
-
<
a
href="#"
class="
arrow-r">></
a>
-
<
ul
class="
circle">
-
<
li></
li>
-
<
li></
li>
-
<
li></
li>
-
<
li
class="
current"></
li>
-
<
li></
li>
-
<
li></
li>
-
<
li></
li>
-
<
li></
li>
-
</
ul>
-
</
div>
-
<
div
class="
coll2-b">
-
<
div>
-
<
img
src="./
jingdongimg/
l
.jpg"
height="130"
width="390"
alt="">
-
</
div>
-
<
div>
-
<
img
src="./
jingdongimg/
r
.jpg"
height="130"
width="390"
alt="">
-
</
div>
-
</
div>
-
</
div>
-
<
div
class="
grid-coll3
fr">
-
<
div
class="
login">
-
<
div
class="
login-t">
-
Hi,欢迎来到京东<
br>
-
<
a
href="#">登录</
a>
-
<
a
href="#">注册</
a>
-
<
a
href="#"
class="
user-info">
-
<
img
src="./
jingdongimg/
no_login
.jpg"
alt="">
-
</
a>
-
</
div>
-
<
div
class="
login-b">
-
<
a
href="#">新人福利</
a>
-
<
a
href="#">
plus会员</
a>
-
</
div>
-
</
div>
-
<
div
class="
news">
-
<
div
class="
news-t">
-
<
a
href="#"
class="
cuxiao">促销</
a>
-
<
a
href="#"
class="
gg">公告</
a>
-
<
a
href="#"
class="
more">更多</
a>
-
<
div></
div>
-
</
div>
-
<
div
class="
news-b">
-
<
ul>
-
<
li><
a
href="">挑战三天不洗头</
a></
li>
-
<
li><
a
href="">挑战三天不洗头</
a></
li>
-
<
li><
a
href="">挑战三天不洗头</
a></
li>
-
<
li><
a
href="">挑战三天不洗头,我是歌</
a></
li>
-
</
ul>
-
</
div>
-
</
div>
-
<
div
class="
expand">
-
<
ul>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
<
li>
-
<
a
href="#">
-
<
i></
i>
-
<
span>话费</
span>
-
</
a>
-
</
li>
-
</
ul>
-
</
div>
-
</
div>
-
</
div>
-
<!
-- 中间部分 结束
-->
-
<!
-- 页面底部部分
-->
-
<
footer>
-
<
div
class="
service">
-
<
div
class="
w">
-
<
ul>
-
<
li>
-
<
h5>多</
h5>
-
<
p>品类齐全，轻松购物</
p>
-
</
li>
-
<
li>
-
<
h5>多</
h5>
-
<
p>品类齐全，轻松购物</
p>
-
</
li>
-
<
li>
-
<
h5>多</
h5>
-
<
p>品类齐全，轻松购物</
p>
-
</
li>
-
<
li>
-
<
h5>多</
h5>
-
<
p>品类齐全，轻松购物</
p>
-
</
li>
-
</
ul>
-
</
div>
-
</
div>
-
<!
-- 帮助模块
-->
-
<
div
class="
w
help">
-
<
div
class="
fl">
-
<
dl>
-
<
dt>购物指南</
dt>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">会员介绍</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
</
dl>
-
<
dl>
-
<
dt>购物指南</
dt>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">会员介绍</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
</
dl>
-
<
dl>
-
<
dt>购物指南</
dt>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">会员介绍</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
</
dl>
-
<
dl>
-
<
dt>购物指南</
dt>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">会员介绍</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
</
dl>
-
<
dl>
-
<
dt>购物指南</
dt>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">会员介绍</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
<
dd><
a
href="#">购物流程</
a></
dd>
-
</
dl>
-
</
div>
-
<
div
class="
fr
coverage">
-
<
h5>京东自营点歌谣小区</
h5>
-
<
p>京东开始向9999个社区进行自配营业服务,支持货到付款，各种方式支付和远程协助服务</
p>
-
<
a
href="#">查看详情</
a>
-
</
div>
-
</
div>
-
<!
-- 版权部分
-->
-
<
div
class="
w
copyright">
-
<
p><
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
<
a
href="#">关于我们</
a>
-
<
span> | </
span>
-
</
p>
-
<
div>
-
<
p>京公网安备 11000002000088号<
span>|</
span>京
ICP证070359号<
span>|</
span>互联网药品信息服务资格证编号(京)
-经营性
-2014-0008<
span>|</
span>新出发京零 字第大120007号</
p>
-
<
p>互联网出版许可证编号新出网证(京)字150号<
span>|</
span>出版物经营许可证<
span>|</
span>网络文化经营许可证京网文
[2014]2148
-348号<
span>|</
span>违法和不良信息举报电话：4006561155</
p>
-
<
p>
Copyright © 2004
- 2017 京东
JD
.com 版权所有|消费者维权热线：4006067733经营证照
-
京东旗下网站：京东支付|京东云</
p>
-
</
div>
-
<
p
class="
font-icon">
-
<
a
href="#"></
a>
-
<
a
href="#"></
a>
-
<
a
href="#"></
a>
-
<
a
href="#"></
a>
-
<
a
href="#"></
a>
-
<
a
href="#"></
a>
-
</
p>
-
</
div>
-
</
footer>
-
<!
-- 页面底部部分
-->
-
</
body>
-
</
html>
3网页进阶版（框架）
当你进入一个公司的时候 简单版的样式编写已经无法满足你得要求 你要参照原型图进行页面设计的开发和预览
3.1.1网上月经周期代码
这是pc端的代码 我所需要的是按照实际的业务需求给他转换为移动端代码
3.1.2网上月经周期重构
3.1.3网上月经周期页面代码
当你在工作中参照一些样式进行开发 并进行完美复原 那么你就开始在成长的路上了
axios+Vant+vue+jq重构jq月经周期计算器源代码（兼容移动端）
贴出一部分代码
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-
-
<!-- 引入样式文件 -->
-
<link rel="stylesheet" href="./css/index.css" />
-
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
-
<script src="./js/vue.js">
</script>
-
<script src="./js/vant.js">
</script>
-
<script type="text/javascript" src="./js/jquery-1.7.2.js">
</script>
-
<script src="./js/axios.js">
</script>
-
<script type="text/javascript" src="js/index.js">
</script>
-
-
<title>萌芽APP
</title>
-
<style>
-
body {
-
width:
100%;
-
}
-
-
.SetTime {
-
width:
100%;
-
height:
40px;
-
background:
#F6F7F9;
-
opacity:
1;
-
}
-
-
span {
-
margin-left:
12px;
-
width:
286px;
-
height:
37px;
-
font-size:
13px;
-
font-family: PingFang SC;
-
font-weight:
400;
-
line-height:
30px;
-
color:
#333333;
-
opacity:
1;
-
line-height:
40px;
-
}
-
-
.SetDate {
-
width:
100%;
-
display: block;
-
}
-
-
input
[type="date"] {
-
box-sizing: border-box;
-
text-align: center;
-
font-size:
1.4em;
-
height:
2.7em;
-
border-radius:
4px;
-
border:
1px solid
#c8cccf;
-
color:
#6a6f77;
-
-web-kit-appearance: none;
-
-moz-appearance: none;
-
display: block;
-
outline:
0;
-
padding:
0
1em;
-
text-decoration: none;
-
width:
100%;
-
}
-
-
input
[type="date"]
:focus {
-
border:
1px solid
#ff7496;
-
}
-
-
input
[type="number"] {
-
box-sizing: border-box;
-
text-align: center;
-
font-size:
1.4em;
-
height:
2.7em;
-
border-radius:
4px;
-
border:
1px solid
#c8cccf;
-
color:
#6a6f77;
-
-web-kit-appearance: none;
-
-moz-appearance: none;
-
display: block;
-
outline:
0;
-
padding:
0
1em;
-
text-decoration: none;
-
width:
100%;
-
}
-
-
input
[type="number"]
:focus {
-
border:
1px solid
#ff7496;
-
}
-
-
input
[type="button"] {
-
box-sizing: border-box;
-
text-align: center;
-
font-size:
1.4em;
-
height:
2.7em;
-
border-radius:
4px;
-
border:
1px solid
#c8cccf;
-
color:
#6a6f77;
-
-web-kit-appearance: none;
-
-moz-appearance: none;
-
display: block;
-
outline:
0;
-
padding:
0
1em;
-
text-decoration: none;
-
width:
100%;
-
}
-
-
.SetButton {
-
width:
50%;
-
left:
25%;
-
margin-top:
20px;
-
text-align: center;
-
}
-
.button{
-
-
bottom: -
100px;
-
display: block;
-
margin:
0 auto;
-
width:
140px;
-
height:
45px;
-
background:
#FFA9B5;
-
opacity:
1;
-
border-radius:
78px;
-
border: none;
-
font-size:
17px;
-
font-family: PingFang SC;
-
font-weight:
400;
-
line-height:
5px;
-
color:
#FFFFFF;
-
-
opacity:
1;
-
}
-
.van-picker-column{
-
font-size:
24px;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div id="app" style="position: relative">
-
<div class="SetTime">
-
<span>你最近来月经的日期是
</span>
-
</div>
-
<div class="SetDate">
-
<van-field @focus="SetTimeShow" ref="ScanTextBox" v-model="form.SetTime" placeholder="请输入日期" />
-
-
-
</div>
-
<van-popup position="bottom" style="width:100%" v-model="show">
-
<van-datetime-picker class="van-picker-column" v-model="currentDate" @confirm="DataSelect" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
-
</van-popup>
-
<div class="SetTime">
-
<span>月经持续天数(天)
</span>
-
</div>
-
<div class="SetDate">
-
<van-field @focus="SetDateShow" ref="ScanTextBox1" v-model="form.KeepTime" placeholder="请输入天数" />
-
-
</div>
-
<div class="SetTime">
-
<span>月经周期(天)
</span>
-
</div>
-
<div class="SetDate">
-
<van-field @focus="SetDateShow1" ref="ScanTextBox2" v-model="form.WeekTime" placeholder="请输入周期" />
-
</div>
-
<!-- <button class="button" @click="submit">确定</button>-->
-
<!-- <input type="button" style="display: block;width: 100px;height:100px;margin: 0 auto;border-radius: 50%;background: #E7659D;color: white;" value="确定" @click="submit" >-->
-
<button class="button" round class="SetButton" type="info" color="#ff7496" @click="submit">
-
确
定
-
</button>
-
<van-popup position="bottom" style="width:100%" v-model="show1">
-
<van-picker title="持续天数" show-toolbar class="van-picker-column" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" placeholder="请输入天数" />
-
</van-popup>
-
<van-popup position="bottom" style="width:100%;" v-model="show2">
-
<van-picker title="月经周期" class="van-picker-column" show-toolbar :columns="columns1" @confirm="onConfirm1" @cancel="onCancel" @change="onChange" placeholder="请输入天数" />
-
</van-popup>
-
<!-- <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button>-->
-
</div>
-
</body>
-
<script>
-
// 在 #app 标签下渲染一个按钮组件
-
new Vue({
-
el:
'#app',
-
-
data() {
-
return {
-
minDate:
new
Date(
2020,
0,
1),
-
maxDate:
new
Date(),
-
currentDate:
new
Date(),
-
/*定义日期的显示*/
-
show:
false,
-
/*定义月经周期的显示*/
-
show1:
false,
-
/*定义时间的显示*/
-
show2:
false,
-
form: {
-
KeepTime:
5,
-
WeekTime:
28,
-
SetTime:
new
Date()
-
-
},
-
bzDate:
'',
-
/*定于月经周期的选择框*/
-
columns1: []
-
/*定义时间周期的选择框*/,
-
columns: [],
-
-
};
-
-
},
-
watch: {
-
form: {
-
handler(newName, oldName) {
-
console.log(newName)
-
},
-
immediate:
true,
-
deep:
true
-
}
-
},
-
created(){
-
-
var d =
new
Date();
-
-
let dateYear = d.getFullYear();
//获取年
-
-
getAction(
"/menstrual/historyListByYear"+dateYear).then(
res=>{
-
console.log(res,
"res")
-
})
-
let dateMonth = d.getMonth() +
1 <
10 ?
'0' + (d.getMonth() +
1) : d.getMonth() +
1;
//获取月
-
let dateDate = d.getDate() <
10 ?
'0' + d.getDate() :
new
Date(d).getDate();
//获取当日
-
-
this.form.SetTime = dateYear +
"-" + dateMonth +
"-" + dateDate
-
this.columns=[]
-
this.columns1=[]
-
for(
var i=
1;i<=
90;i++){
-
-
this.columns.push(i)
-
}
-
-
console.log(
this.columns1,
"columns1")
-
for(
var i=
1;i<=
365;i++){
-
-
this.columns1.push(i)
-
}
-
},
-
methods: {
-
-
/* toChangeDate(date) {
-
console.log(new Date(date).getFullYear())
-
console.log(new Date(date).getMonth())
-
console.log(new Date(date).getDay())
-
let dateYear = new Date(date).getFullYear(); //获取年
-
let dateMonth = new Date(date).getMonth() + 1 < 10 ? '0' + new Date(e).getMonth() : new Date(e).getMonth(); //获取月
-
let dateDate = new Date(date).getDate() < 10 ? '0' + new Date(e).getDate() : new Date(e).getDate(); //获取当日
-
-
return dateYear + '-' + dateMonth + '-' +
-
dateDate
-
}, */
-
async submit() {
-
/* let SetTimeOut=new Date(this.form.SetTime)*/
-
await postAction(
"/menstrual/basicsAddOrUpdate?firstDate=" +
-
this.form.SetTime +
"&continuousDays=" +
this.form.KeepTime +
"&cycleNumber=" +
this.form.WeekTime
-
).then(
res => {
-
console.log(res)
-
var Request =
new
Object();
-
Request =
this.GetRequest();
-
let token=Request.token
-
if (
this.noNull(
this.form.SetTime) &&
this.noNull(
this.form.KeepTime) &&
this.noNull(
this.form.WeekTime)) {
-
/*http://114.215.149.84:8086/*/
-
window.location.href =
"./index.html?lastDate=" +
this.bzDate +
"&keepDate="
-
+
this.form.KeepTime +
"&weekDate=" +
this.form.WeekTime+
"&token="+token;
-
-
}
else {
-
this.$toast.success(
"当前所填项不能为空")
-
}
-
-
})
-
-
},
-
toNotify() {
-
-
},
-
/*点击确定之后触发的点击事件*/
-
GetRequest() {
-
var url = location.search;
//获取url中"?"符后的字串
-
var theRequest =
new
Object();
-
if (url.indexOf(
"?") !=
-1) {
-
var str = url.substr(
1);
-
strs = str.split(
"&");
-
for(
var i =
0; i < strs.length; i ++) {
-
theRequest[strs[i].split(
"=")[
0]] =
unescape(strs[i].split(
"=")[
1]);
-
}
-
}
-
return theRequest;
-
},
-
-
onConfirm(value, index) {
-
console.log(value)
-
this.form.KeepTime = value
-
this.show1 =
false
-
},
-
/*点击确定之后触发的点击事件*/
-
onConfirm1(value, index) {
-
console.log(value)
-
this.form.WeekTime = value
-
this.show2 =
false
-
},
-
onChange(picker, value, index) {
-
-
},
-
/*定义显示弹出框的方法*/
-
SetDateShow() {
-
this.$refs.ScanTextBox1.readonly=
'readonly';
-
setTimeout(
() => {
-
this.$refs.ScanTextBox1.readonly=
null;
-
},
200);
-
console.log(
11111)
-
this.show1 =
true
-
},
-
/*定于显示弹出框的方法*/
-
SetDateShow1() {
-
this.$refs.ScanTextBox2.readonly=
'readonly';
-
setTimeout(
() => {
-
this.$refs.ScanTextBox2.readonly=
null;
-
},
200);
-
-
this.show2 =
true
-
},
-
onCancel() {
-
this.show =
false
-
this.show1 =
false
-
this.show2 =
false
-
},
-
/*定于显示弹出框的方法*/
-
SetTimeShow() {
-
-
this.$refs.ScanTextBox.readonly=
'readonly';
-
setTimeout(
() => {
-
this.$refs.ScanTextBox.readonly=
null;
-
},
200);
-
this.show =
true
-
},
-
/* 执行日期的回调函数 处理日期的回调函数*/
-
DataSelect(e) {
-
var d =
new
Date(e);
-
var datetime = d.getFullYear() +
'-' + (d.getMonth() +
1) +
'-' + d.getDate();
-
/* console.log(e)
-
console.log(e.getFullYear()) */
-
let dateYear = e.getFullYear();
//获取年
-
let dateMonth = e.getMonth() +
1 <
10 ?
'0' + (e.getMonth() +
1) : e.getMonth() +
1;
//获取月
-
let dateDate = e.getDate() <
10 ?
'0' + e.getDate() :
new
Date(e).getDate();
//获取当日
-
-
-
this.form.SetTime = dateYear +
"-" + dateMonth +
"-" + dateDate
-
this.bzDate = e;
-
this.show =
false
-
},
-
noNull(x) {
-
if (x ===
"" || x ===
undefined || x ===
null) {
-
return
false;
-
}
-
return
true;
-
}
-
/* timestampToDate(timestamp) {
-
let data = new Date();
-
data.setTime(timestamp * 1000)
-
return data
-
} */
-
-
},
-
-
});
-
-
-
-
// 调用函数组件，弹出一个 Toast
-
-
-
// 通过 CDN 引入时不会自动注册 Lazyload 组件
-
// 可以通过下面的方式手动注册
-
/* Vue.use(DatetimePicker);
-
*/
-
/* let lastDate = document.getElementById("lastDate").value;
-
let keepDate = $("#keepDate").val()
-
let weekDate = $("#keepDate").val() */
-
-
/* function upperCase(x) {
-
var y = document.getElementById(x).value
-
lastDate = y;
-
}
-
-
function upperKeepDate(x) {
-
var y = document.getElementById(x).value
-
keepDate = y;
-
}
-
-
function upperWeepDate(x) {
-
var y = document.getElementById(x).value
-
weekDate = y;
-
}
-
$("#thisOk").click(function() {
-
console.log(1);
-
console.log(lastDate);
-
console.log(keepDate);
-
console.log(weekDate);
-
if (noNull(lastDate) && noNull(keepDate) && noNull(weekDate)) {
-
window.location.href = "../index.html?lastDate=" + lastDate + "&keepDate=" + keepDate + "&weekDate=" + weekDate;
-
} else {
-
alert("请输入正确得值")
-
}
-
});
-
-
function noNull(x) {
-
if (x === "" || x === undefined || x === null) {
-
return false;
-
}
-
return true;
-
}*/
-
</script>
-
-
</html>
3.2.1（SBS后台管理预览）
3.3.1（电商管理系统预览）
3.4.1（农贸管理系统预览）
3.6.1更多系统页面预览.....
4总结
我是歌谣 css和h5开发页面没有什么捷径 我们需要一步一个脚印 不断积累 或许当你的代码达到十万行的时候 则你对于一个好的页面布局会有一个新的认知 我是歌谣 欢迎一起交流前后端知识 需要相关代码者可以评论留言
欢迎和大家一起学习前后端知识 一起成长
转载：https://blog.csdn.net/weixin_43392489/article/details/116848586
查看评论