连云港网站建设培训,青岛网站建站公司,智慧团建电脑版登录,软件开发流程管理我是歌谣 放弃很容易 但是坚持一定很酷 1前言 作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课 本文内容纯属自己个人观点 欢迎一起交流吐槽 2网页基础版#xff08;divcss#xff09; 我第一次接触… 我是歌谣 放弃很容易 但是坚持一定很酷 1前言 作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课 本文内容纯属自己个人观点 欢迎一起交流吐槽 2网页基础版divcss 我第一次接触前端页面的时候做的网页就是一个divcss的布局 因为当时是在实习 网页的内容现在已经丢失 类似一个商品管理的页面 页面分出来给一个班的同学 几个人分为一个小组 进行共同开发 页面的跳转直接a标签进行跳转即可 2.1.1桥边菇凉页面预览 桥边菇凉小页面 写这个页面当时应该是这个音乐还挺好听的 我叫歌谣 喜欢听歌也是我生活的一部分 这个页面包含了太多的岁月沉淀了 现在2021年了 这个页面就是基础的divcss布局 2.1.2桥边菇凉代码 这个页面应该不是第一个 一看这个样式就是我模仿某页面进行一个开发的 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleqq音乐/titlestyle*{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-leftimg{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-titlea{margin-left: 20px;}#head-right-rightimg{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;}#lefta{color: white;font-size: 20px;padding-left: 20px;}#rightimg{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;}.geyaoimg{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;}.geyaoa{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-left2span{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-right1h1{color: rgb(136,143,160);}#body-right1img{width: 32px;height: 16px;position: relative;bottom: 30px;left: 130px;}#body-right3p{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
bodydiv idheaddiv idhead-leftimg src./img/004.jpg altinput typetext classusername/divdiv idhead-rightdiv idhead-titlea href客服中心/aa href招贤纳士/aa href会员中心/a/divdiv idhead-right-rightimg src./img/007.jpg/div/div/div div idheaderdiv idheader-leftdiv idlefta href首页/aa href榜单/aa href下载客户端/aa href更多/a/divdiv idrightimg src./img/008.jpg/div /divdiv idheader-rightdiv classgeyaoimg classright1 src./img/1.jpga href音乐直播/a/divdiv classgeyaoimg classright2 src./img/2.jpga href酷狗LIVE/a/divdiv classgeyaoimg classright3 src./img/3.jpga href音乐人/a/divdiv classgeyaoimg classright4 src./img/4.jpga href成为主播/a/divdiv classgeyaoimg classright5 src./img/5.jpga href商城/a/div/div/div /divdiv idbodydiv idbody-leftdiv idbody-left1img src./img/11.jpg/divdiv idbody-left2span下载这首歌/sapn/divdiv idbody-left3div idbody-top/divdiv idbody-bottom/div/div/divdiv idbody-rightdiv idbody-right1h1桥边姑娘/h1img src./img/20.jpgdiv idbody-right3p专辑:桥边姑娘nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;歌手:海伦/p/div/divdiv idbody-right2p桥边姑娘 - 海伦/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/divdiv idlastdiv idlast1div classim1img src./img/22.jpg/divdiv classim2img src./img/23.jpg/divdiv classim3img src./img/25.jpg/div/divdiv idlast2div idlast2-leftimg src./img/28.jpg/divdiv idlast2-rightimg src./img/29.jpg/div/divdiv idlast3div idlast31img src./img/31.jpg alt/divdiv idlast32img src./img/32.jpg alt/divdiv idlast33img src./img/33.jpg alt/divdiv idlast34img src./img/34.jpg alt/divdiv idlast35img src./img/35.jpg alt/div/div/div /body/body
/html
2.2.1博文尚美页面预览 这个页面的来源应该是来自于某学习平台 时间也是比较久远的 2.2.2博文尚美页面代码 这边也是一个简单的divcss的布局 页面不是简简单单的单页面开发了 居然多了公共样式 也是不会采用多余的布局 上面的桥边菇凉应该就是参照改布局进行布局的 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle博文尚美/titlelink relstylesheet href./css/common.cssstyle#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
bodydiv idhead classcontainerdiv classhead_logo la href#img src./images/logo.png alt title博文尚美/a/divul classhead_menu rlia href#HOME/a/lilia href#ABOUT/a/lilia href#PROTFOLIO/a/lilia href#SERVICE/a/lilia href#CONTACT/a/li/ul/divdiv idbanner classcontainer-fluidul classbanner_listli classactive stylebackground-image: url(./images/banner.png);a href#/a/lili stylebackground-image: url(./images/banner.png);a href#/a/lili stylebackground-image: url(./images/banner.png);a href#/a/lili stylebackground-image: url(./images/banner.png);a href#/a/li/ulol classbanner_btnli classactive/lili/lili/lili/li/ol/divdiv idservice classcontainerdiv classarea_titleh2服务范围/h2pOUT SERVICES/p/divul classservice_listlidiv/divh31.web design/h3p我是歌谣我是最棒的br我是歌谣我是最棒的/p/lilidiv/divh32.graphic design/h3p我是歌谣我是最棒的br我是歌谣我是最棒的/p/lilidiv/divh33.e-business plan/h3p我是歌谣我是最棒的br我是歌谣我是最棒的/p/lilidiv/divh34.mailboxagents/h3p我是歌谣我是最棒的br我是歌谣我是最棒的/p/li/ul /divdiv idcase classcontainer-fluiddiv classcontainerdiv classarea_titleh2[客户案例]/h2pwith the bost professional technology,to design the best inn/p/divul classcase_list clearlilia href#img src./images/20141121095528549.png alt/a/li/lililia href#img src./images/20141121095528549.png alt/a/li/lililia href#img src./images/20141121095528549.png alt/a/li/li/uldiv classcase_btna href#view movn/a/div/div/divdiv idnews classcontainerdiv classarea_titleh2最新资讯/h2pTEN LATEST NEWS/p/divdldt classlimg src./images/xs1.png/dtdd classlul classnews_listlidiv classnews_date li09/ispanjan/span/divdiv classnews_text lh3a href#网站排名前三的技巧说明/a/h3p我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣/p/div/lilidiv classnews_date li09/ispanjan/span/divdiv classnews_text lh3a href#网站排名前三的技巧说明/a/h3p我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣/p/div/lilidiv classnews_date li09/ispanjan/span/divdiv classnews_text lh3a href#网站排名前三的技巧说明/a/h3p我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣/p/div/lilidiv classnews_date li09/ispanjan/span/divdiv classnews_text lh3a href#网站排名前三的技巧说明/a/h3p我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣/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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleqq飞车首页/titlelink relstylesheet href./css1/common.cssstyle/* 导航栏块 *//* 加入大块背景图 */#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 idhead classcontainer-fluiddiv classcontainerdiv classhead_logo la href#腾讯游戏/a/divdiv classhead_ad la href#img src./images1/ad.jpg alt/a/divdiv classhead_menu rdiv classhead_menu_czsh la href#成长守护平台/a/divdiv classhead_menu_top la href#腾讯游戏排行版/a/div/div/div/div!-- 导航这一块 --div idmain classcontainer-fluiddiv idnav classcontainer-fluiddiv classcontainerdiv classnav_logoa href#img src./images1/inside_logo.png altqq飞车 titleqq飞车/a/divdl classnav_indexdta href#首页/a/dt/dldl classnav_zldt/dtdda href新手指引/a/dddda classhot href官方漫画/a/dddda classnew href飞车手游/a/dddda href精美壁纸/a/dddda href游戏下载/a/dd/dldl classnav_zxdt/dtdda hrefssc/a/dddda href谁是车王/a/dddda href全明争霸赛/a/dd/dldl classnav_ssdt/dtdda hrefssc/a/dddda href谁是车王/a/dddda href全明争霸赛/a/dd/dldl classnav_hddt/dtdda href版本专区/a/dddda href合作专区/a/dddda hrefCDK兑换/a/dd/dl/div/divdiv idlink classcontainera href#/a/divdiv idbanner classcontainerdiv classbanner_left ldiv classbanner_downloadp下载游戏/ppDOWNLOAD/p/divdiv classbanner_userdivimg src./images1/56x56.jpg alt/divp欢迎a href#首页/a登录进入飞车世界/p/div/divdiv classbanner_center ldiv classbanner_listul classbanner_list_ullia href altimg srchttp://ossweb-img.qq.com/upload/adw/image/20190510/6ae827443c667576e26fa4d48d93e199-80.jpg alt/a/lilia href altimg srchttp://ossweb-img.qq.com/upload/adw/image/20190508/178c724ac47ee0f74e32b4a386dd5808-80.jpg alt/a/lilia href altimg srchttp://ossweb-img.qq.com/upload/adw/image/20190513/f7aa08a33c9ee8f1d66d543b10cba86b-80.jpg alt/a/li/uldiv classbanner_bottomlineul classbanner_bottomline_ulli classactive/lili/lili/li/uldiv classbanner_bottomline_leftbtn/divdiv classbanner_bottomline_rightbtn/div/divi classbanner_list_lt/ii classbanner_list_rt/ii classbanner_list_rb/ii classbanner_list_lb/i/div/divdiV classbanner_right la href#img src./images1/bebae86c3d1f64d50a53434ed5458d22-80.jpg alt/ai classbanner_right_lt/ii classbanner_right_rt/ii classbanner_right_rb/ii classbanner_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站酷网页面预览 这些都是简单的divcss布局 不会使用组件库或者插件 页面也是不断的模仿加工 学习 2.4.2站酷网页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle站酷网/titlelink relstylesheet href./zhankucss/common.cssstyle.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
bodydiv classcontainer_fluiddiv classheaddiv classmiddleullia href 首页/a/lilia href 发现/a/lilia href 同城/a/lilia href 职位/a/lilia href 活动/a/lilia href 正版素材/a/lilia href 课程/a/lilia href .../a/li/ul/divdiv classrightdldddt登录/dtdt注册/dt/dd/dl/div/div/divdiv classcontainerdiv classbodyimg src./zhankuimg/content.jpg/div/divdiv classcontainerdiv classsectionul classsection1lia href全部/a/lilia href平面/a/lilia hrefUI/a/lilia href网页/a/lilia href插画/a/lilia href动漫/a/lilia href摄影/a/lilia href空间/a/lilia href工业/产品/a/lilia href三维/a/lilia href影视/a/lilia href手工艺/a/lilia href纯艺术/a/lilia href服装/a/lilia href其他/a/lilia href自定义/a/li/ul /divul classsection2li classhot编辑精选/lili最新发布/lili上升最快/li/ul
/div
div classcontainer-fluid
div classcontainerdiv classfooterullidivimg src./zhankuimg/1.jpgdldt我是最萌的图片/dtdd影视宣传片/dddd classdd1span classspan159/spanspan classspan20/spanspan classspan31/span /ddbrdd classdd2麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/2.jpgdldt运维5G高效摄入法/dtdd网页其他网页/dddd classdd1span classspan159/spanspan classspan20/spanspan classspan31/span /ddbrdd classdd2麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/3.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd classdd1span classspan159/spanspan classspan20/spanspan classspan31/span /ddbrdd classdd2麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/4.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd classdd1span classspan159/spanspan classspan20/spanspan classspan31/span /ddbrdd classdd2麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/5.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd classdd1span classspan159/spanspan classspan20/spanspan classspan31/span /ddbrdd classdd2麻薯印象/dd/dl/div/li/ulullidivimg src./zhankuimg/1.jpgdldt我是最萌的图片/dtdd影视宣传片/dddd麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/2.jpgdldt运维5G高效摄入法/dtdd网页其他网页/dddd麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/3.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/4.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd麻薯印象/dd/dl/div/lilidivimg src./zhankuimg/5.jpgdldt运营专题高效摄入法/dtdd热点内容/dddd麻薯印象/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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle正达管理后台/titlelink relstylesheet href./zhcss/common.csslink relstylesheet href./iconfont/iconfont.cssstyle#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_consdiv{display: none;}#projectList .projectList_consdiv.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
bodyheader idheaderhgroup classheader_logo lh1 classlimg src./zhimg/logo.png/h1h2 classl正达建筑内部管理平台/h2/hgroupul classheader_nav rlii classiconfont iconwode/i欢迎你:歌谣 管理员/lilii classiconfont iconyuechi/ia href#修改密码/a/lilii classiconfont iconshouye/ia href#公司官网/a/lilii classiconfont iconplus-share/ia href#退出/a/li/ul/headeraside idmenu classlulli classactivea hrefi classiconfont iconloukongguanli/ip项目管理/p/a/lilia hrefi classiconfont iconyonghuxinxi/ip用户管理/p/a/lilia hrefi classiconfont iconshezhi/ip系统设置/p/a/li/ul/asidemain idmainsection classmain_containersection idprojectTitle classcleardiv classprojectTitle_text lh2晴天高玩绿源一期二期工程i classiconfont iconbianji/i/h2p项目编号:spanCN1111111/spanbr项目类型:span在建工程/spanbr项目负责人:span歌谣/spanbr手机号码:span123413241542/spanbr/p/divdiv classprojectTitle_img rimg src./zhimg/prpject.jpg/div/sectionsection idprojectListdiv classprojectList_btnsulli视频监控/lili考勤管理/lili安全巡查/lili classactive资料管理/li/ul/divdiv classprojectList_consdiv视频监控1111/divdiv考情管理2222/divdiv我是歌谣3333/divdiv classshowdiv classzl_upload1 llabelinput typefilei classiconfont iconshangchuan1/inbsp;nbsp;nbsp;单个上传/label/divdiv classzl_upload2 llabelinput typefile multiplei classiconfiont iconshangchuan/inbsp;nbsp;nbsp;批量上传/label/divdiv classzl_search rinput typetext placeholder请输入关键字buttoni classiconfont iconsuosou/i/button/divtable classzl_tabletheadtrth width49input typecheckbox/thth文档名称/thth width167文档大小/thth width148上传者/thth width168上传时间/thth width81操作/th/trtbodytrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/trtrtdinput typecheckbox/tdtdi classiconfont iconword/i安全专项方案.doc/tdtd21.3kb/tdtd歌谣/tdtd2016-03-14/tdtdi classiconfont iconxiazai/inbsp;nbsp;nbsp;i classiconfont iconshanchushaixuanxiang/i/td/tr/tbody/thead/tablediv classzl_footerbutton classzl_remove批量删除/buttonbutton classzl_download批量下载/buttondiv classzl_page ra href#共十二条/aa href#首页/aa href#上一页/aa href# classactive1/aa href#2/aa href#3/aa href#下一页/aa href#尾页/a/div/div/div/div/section/section/mainfooter idfooterCopyright 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgelink relstylesheet href./iconfont1/title移动端/titlelink relstylesheet href./iconfont1/iconfont.cssstyle*{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
bodyheader拉勾网/headersection classloginp十秒钟定制职位/pdiva href#去登陆/a/div/sectionul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulul classlistlidiv classlist_imga href#img src./lagou1.jpg /a/divdiv classlist_infoh2a href正大艾特/a/h2pspan中级java工程师/spanspan13k-20k/span/pp今天1116/p/div/li/ulsection classmorea href加载更多/a/sectionfooterp2019 lan.com,all right reserved/ppa href#移动端/a ! a href#移动端/a ! a href#移动端/a/p/footersection classtabberdiv classactivei classiconfont icon-home/i 职位/divdivi classiconfont icon-sousuo-/i 搜索/divdivi classiconfont icon-wode/i 我的/div/section
/body
/html
2.7.1移动贺卡开发预览 本段代码总共有三个页面 也包括了一些简单js逻辑 2.7.2移动贺卡开发预览
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0,minimum-scale1,maximum-scale1,user-scalablenometa nameformat-detection contenttelephonenometa http-equivX-UA-Compatible contentchrome1title新春贺卡/titlelink relstylesheet typetext/css href./mooccss/style.css/head
bodydiv classmusicimg src./moocimg/music_pointer.png altimg classplay idmusic src./moocimg/music_disc.png alt/divdiv classpage idpage1div classbg/divdiv classp1_lantern点击屏幕br开启好运2020/divdiv classp1_imooc/divdiv classp1_words2020年歌谣新年特写/div/divdiv classpage idpage2div classp2_bg_loading/divdiv classbg/divdiv classp2_circle/divdiv classp2_2016/div/divdiv classpage idpage3div classbg/divdiv classp3_logo/divdiv classp3_title/divdiv classp3_second/divdiv classp3_first/divdiv classp3_blessing/div/divaudio autoplaytruesource src./moocmusic/test.mp3 typeaudio/mpeg/audioscriptwindow.onclick function(){var page1document.getElementById(page1);var page2document.getElementById(page2);var page3document.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.animationPlayStaterunning;// // music.setAttribute(class,play); // }else{// audio.pause();// this.setAttribute(class,);// // music.setAttribute(class,); this.style.animationPlayStatepaused;// };// };music.addEventListener(touchstart,function(event){if(audio.paused){audio.play();this.setAttribute(class,play);// this.style.animationPlayStaterunning;// music.setAttribute(class,play); }else{audio.pause();this.setAttribute(class,);// music.setAttribute(class,); this.style.animationPlayStatepaused;};},false);// 页面翻页
page1.addEventListener(touchstart,function(event){page1.style.displaynone;page2.style.displayblock;page3.style.displayblock;page3.style.top100%;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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle京东JD.COM官网 多快好省 只为品质生活/title!-- 引入京东小图标 --link relshortcut icon hreffavicon.ico typeimage/x-icon!-- 重置样式 --link relstylesheet href./jingdongcss/normalize.css!-- 头部和尾部基本相同 公共样式 --link relstylesheet href./jingdongcss/base.csslink relstylesheet href./jingdongfont/ie7.csslink relstylesheet href./jingdongcss/index.cssmeta namedescription content京东JD.COM-专业综合网上购物商城销售超数万品牌4020万种商品囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员免费体验30天京东秉承客户为先 100正品行货保障提供全国联保机打发票专业配送售后服务/meta namekeywords content网上购物网上商城手机笔记本电脑相机数码手表存储卡京东/
/head
body!-- 头部开始 --headerdiv classwa hrefimg src./jingdongimg/header.jpg alt/a/div/header!-- 头部结束 --!-- 快速导航栏 --div classshortcutdiv classwul classfl citylii classf10/ia href#北京/a/li/ulul classfrlia href#你好请登录/aa href# classf10免费注册/a/lili classspace/lilia href#我的订单/a/lili classspace/lilia href#我的京东/ai/i/lili classspace/lilia href#京东会员/a/lili classspace/lilia href#企业采购/a/lili classspace/lilia href#客户服务/ai/i/lili classspace/lilia href#网站导航/ai/i/lili classspace/lilia href# classmoblie手机京东img src./jingdongimg/mobile.png alt/a/li/ul/div/div!-- 快速导航栏结束 --!-- 中间部分 --div classw middlediv classlogo!-- 提高权重提高搜索引擎优化 --h1a href#/a/h1/div!-- 搜索框 --div classforminput typetext placeholder扫描仪!-- 按钮的意思双标签 --buttoni/i/button/div!-- 购物车 --div classshopCari/ia href# classf10我的购物车/aspan0/span/div!-- 关键字 --div classhotwordsa href# classf10199减100/aa href#鼠标试用/aa href#农资7折/aa href#低至29元/aa href#抽奖赢空调/aa href#记忆棉/aa href#坐垫/aa href#1分钱买油/aa href#智能手表/a/div!-- 小导航部分 --div classnavitemsullia href#秒杀/a/lilia href#优惠券/a/lilia href#闪购/a/lilia href#拍卖/a/lili classspace/lilia href#服装城/a/lilia href#京东超市/a/lilia href#生鲜/a/lilia href#全球购/a/lili classspace/lilia href#京东金融/a/li/ul/div/div!-- 中间部分结束 --!-- 中间部分 开始 --div classw griddiv classgrid-coll1 fldiv classadimg src./jingdongimg/ad-l.png height480 width250 altimg src./jingdongimg/ad-r.jpg classad-r/divullia href#家用电器/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#图像/a/a href#音响/a/a href#电子书/a/lilia href#手机/a/a href#运用商/a/a href#数码/a/lilia href#理财/a/a href#众筹/a/a href#白条/a/a href#保险/a/li/ul/divdiv classgrid-coll2 fldiv classcoll2-ta href#img src./jingdongimg/banner.jpg height340 width790 alt/aa href# classarrow-l/aa href# classarrow-r/aul classcircleli/lili/lili/lili classcurrent/lili/lili/lili/lili/li/ul/divdiv classcoll2-bdivimg src./jingdongimg/l.jpg height130 width390 alt/divdivimg src./jingdongimg/r.jpg height130 width390 alt/div/div/divdiv classgrid-coll3 frdiv classlogindiv classlogin-tHi,欢迎来到京东bra href#登录/aa href#注册/aa href# classuser-infoimg src./jingdongimg/no_login.jpg alt/a/divdiv classlogin-ba href#新人福利/aa href#plus会员/a/div/divdiv classnewsdiv classnews-ta href# classcuxiao促销/aa href# classgg公告/aa href# classmore更多/adiv/div/divdiv classnews-bullia href挑战三天不洗头/a/lilia href挑战三天不洗头/a/lilia href挑战三天不洗头/a/lilia href挑战三天不洗头,我是歌/a/li/ul/div/divdiv classexpandullia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/lilia href#i/ispan话费/span/a/li/ul/div/div/div!-- 中间部分 结束 --!-- 页面底部部分 --footerdiv classservicediv classwullih5多/h5p品类齐全轻松购物/p/lilih5多/h5p品类齐全轻松购物/p/lilih5多/h5p品类齐全轻松购物/p/lilih5多/h5p品类齐全轻松购物/p/li/ul/div/div!-- 帮助模块 --div classw helpdiv classfldldt购物指南/dtdda href#购物流程/a/dddda href#会员介绍/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dddda href#购物流程/a/dd /dldldt购物指南/dtdda href#购物流程/a/dddda href#会员介绍/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dddda href#购物流程/a/dd /dldldt购物指南/dtdda href#购物流程/a/dddda href#会员介绍/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dddda href#购物流程/a/dd /dldldt购物指南/dtdda href#购物流程/a/dddda href#会员介绍/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dddda href#购物流程/a/dd /dldldt购物指南/dtdda href#购物流程/a/dddda href#会员介绍/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dd dda href#购物流程/a/dddda href#购物流程/a/dd /dl/divdiv classfr coverageh5京东自营点歌谣小区/h5p京东开始向9999个社区进行自配营业服务,支持货到付款各种方式支付和远程协助服务/pa href#查看详情/a/div/div!-- 版权部分 --div classw copyrightpa href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /spana href#关于我们/aspan | /span/pdivp京公网安备 11000002000088号span|/span京ICP证070359号span|/span互联网药品信息服务资格证编号(京)-经营性-2014-0008span|/span新出发京零 字第大120007号/pp互联网出版许可证编号新出网证(京)字150号span|/span出版物经营许可证span|/span网络文化经营许可证京网文[2014]2148-348号span|/span违法和不良信息举报电话4006561155/ppCopyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线4006067733经营证照京东旗下网站京东支付|京东云/p/divp classfont-icona href#/aa href#/aa href#/aa href#/aa href#/aa href#/a/p/div/footer!-- 页面底部部分 --
/body
/html
3网页进阶版框架 当你进入一个公司的时候 简单版的样式编写已经无法满足你得要求 你要参照原型图进行页面设计的开发和预览 3.1.1网上月经周期代码 这是pc端的代码 我所需要的是按照实际的业务需求给他转换为移动端代码 3.1.2网上月经周期重构 3.1.3网上月经周期页面代码 当你在工作中参照一些样式进行开发 并进行完美复原 那么你就开始在成长的路上了 axiosVantvuejq重构jq月经周期计算器源代码兼容移动端
贴出一部分代码
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0!-- 引入样式文件 --link relstylesheet href./css/index.css /!-- 引入 Vue 和 Vant 的 JS 文件 --script src./js/vue.js/scriptscript src./js/vant.js/scriptscript typetext/javascript src./js/jquery-1.7.2.js/scriptscript src./js/axios.js/scriptscript typetext/javascript srcjs/index.js/scripttitle萌芽APP/titlestylebody {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[typedate] {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[typedate]:focus {border: 1px solid #ff7496;}input[typenumber] {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[typenumber]:focus {border: 1px solid #ff7496;}input[typebutton] {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
/headbodydiv idapp styleposition: relativediv classSetTimespan你最近来月经的日期是/span/divdiv classSetDatevan-field focusSetTimeShow refScanTextBox v-modelform.SetTime placeholder请输入日期 //divvan-popup positionbottom stylewidth:100% v-modelshowvan-datetime-picker classvan-picker-column v-modelcurrentDate confirmDataSelect typedate title选择年月日 :min-dateminDate :max-datemaxDate //van-popupdiv classSetTimespan月经持续天数(天)/span/divdiv classSetDatevan-field focusSetDateShow refScanTextBox1 v-modelform.KeepTime placeholder请输入天数 //divdiv classSetTimespan月经周期(天)/span/divdiv classSetDatevan-field focusSetDateShow1 refScanTextBox2 v-modelform.WeekTime placeholder请输入周期 //div!-- button classbutton clicksubmit确定/button--!-- input typebutton styledisplay: block;width: 100px;height:100px;margin: 0 auto;border-radius: 50%;background: #E7659D;color: white; value确定 clicksubmit --button classbutton round classSetButton typeinfo color#ff7496 clicksubmit确nbsp;nbsp;定/buttonvan-popup positionbottom stylewidth:100% v-modelshow1van-picker title持续天数 show-toolbar classvan-picker-column :columnscolumns confirmonConfirm cancelonCancel changeonChange placeholder请输入天数 //van-popupvan-popup positionbottom stylewidth:100%; v-modelshow2van-picker title月经周期 classvan-picker-column show-toolbar :columnscolumns1 confirmonConfirm1 cancelonCancel changeonChange placeholder请输入天数 //van-popup!-- van-button typeprimary clicktoNotify classbtn顶部通知/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/historyListByYeardateYear).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 - dateDatethis.columns[]this.columns1[]for(var i1;i90;i){this.columns.push(i)}console.log(this.columns1,columns1)for(var i1;i365;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 SetTimeOutnew 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 tokenRequest.tokenif (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.WeekTimetokentoken;} 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 valuethis.show1 false},/*点击确定之后触发的点击事件*/onConfirm1(value, index) {console.log(value)this.form.WeekTime valuethis.show2 false},onChange(picker, value, index) {},/*定义显示弹出框的方法*/SetDateShow() {this.$refs.ScanTextBox1.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox1.readonlynull;}, 200);console.log(11111)this.show1 true},/*定于显示弹出框的方法*/SetDateShow1() {this.$refs.ScanTextBox2.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox2.readonlynull;}, 200);this.show2 true},onCancel() {this.show falsethis.show1 falsethis.show2 false},/*定于显示弹出框的方法*/SetTimeShow() {this.$refs.ScanTextBox.readonlyreadonly;setTimeout(() {this.$refs.ScanTextBox.readonlynull;}, 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 - dateDatethis.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).valuelastDate y;}function upperKeepDate(x) {var y document.getElementById(x).valuekeepDate y;}function upperWeepDate(x) {var y document.getElementById(x).valueweekDate 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/html3.2.1SBS后台管理预览 3.3.1电商管理系统预览 3.4.1农贸管理系统预览 3.6.1更多系统页面预览.....
4总结 我是歌谣 css和h5开发页面没有什么捷径 我们需要一步一个脚印 不断积累 或许当你的代码达到十万行的时候 则你对于一个好的页面布局会有一个新的认知 我是歌谣 欢迎一起交流前后端知识 需要相关代码者可以评论留言 欢迎和大家一起学习前后端知识 一起成长
