-
整個(gè)頁(yè)面布局大同小異 最主要是位置的裁量 代碼： #page3 > .p3_logo { width: 34.6875vw; height: 6.327vh; position: absolute; top: 7.82vh; right: 0; left: 0; margin: auto; background: url("../images/p3_logo.png") no-repeat center center; background-size: 100%; } #page3 > .p3_title { width: 48.125vw; height: 50vh; position: absolute; top: 21vh; right: 0; left: 0; margin: auto; background: url("../images/p3_title.png") no-repeat center center; background-size: 100%; }查看全部
-
課程介紹及內(nèi)容查看全部
-
代碼(續(xù)) #page2 > .p2_circle:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; content: ""; background: url("../images/p2_circle_inner.png") no-repeat center center; background-size: 100%; width: 39.9375vw; height: 39.9375vh; } #page2 > .p2_2016 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url("../images/p2_2016.png") no-repeat center center; background-size: 100%; width: 27.5vw; height: 6.24vh; }查看全部
-
需要先設(shè)置display:block / none; 屬性 使當(dāng)前設(shè)置頁(yè)面顯示或不顯示。 在整個(gè)page的div中設(shè)置position:absolute; 以及width:100%; 代碼如下： #page2 > .p2_circle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; background: url("../images/p2_circle_outer.png") no-repeat center center; background-size: 100%; width: 59.375vw; height: 59.375vh; } #page2 > .p2_circle:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; content: ""; background: url("../images/p2_circle_middle.png") no-repeat center center; background-size: 100%; width: 45.625vw; height: 45.625vh; }查看全部
-
由于三個(gè)page的背景重疊，分別為page1和page設(shè)置隱藏 display：none；page2設(shè)置顯示 display:block查看全部
-
代碼：續(xù) #page1 > .p1_imooc { position: absolute; right: 0; bottom: 9vh; left: 0; background: url("../images/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; right: 0; bottom: 48px; left: 0; text-align: center; color: #231815; }查看全部
-
代碼如下： #page1 > .p1_lantern { position: absolute; top: -3.4%; right: 0; left: 0; margin: auto; background: url("../images/p1_lantern.png") no-repeat center bottom; width: 45vw; height: 71.2vh; font-size: 3.506rem; padding-top: 31vh; text-align: center; -webkit-box-sizing:border-box; /* 自動(dòng)識(shí)別位置 */ -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } #page1 > .p1_lantern:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ""; margin: auto; width: 30vw; height: 30vw; background: #d60b3b; opacity: .5; border-radius: 50%; -webkit-box-shadow: 0 0 10vw 10vw #d60b3b; -moz-box-shadow: 0 0 10vw 10vw #d60b3b; -ms-box-shadow: 0 0 10vw 10vw #d60b3b; -o-box-shadow: 0 0 10vw 10vw #d60b3b; -box-shadow: 0 0 10vw 10vw #d60b3b; }查看全部
-
transform-rotate 旋轉(zhuǎn)查看全部
-
border-box： padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width ) eg .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; } 實(shí)際寬度為：200 內(nèi)容寬度為:200-10*2-15*2查看全部
-
切圖--重構(gòu)--前端--優(yōu)化查看全部
-
防止文字被背景覆蓋，為背景設(shè)置z-index 屬性設(shè)置元素的堆疊順序，z-index: -1;查看全部
-
html5+css3賀卡項(xiàng)目：2.表示層（music） *{margin:0;padding:0;border:none;font-size:1.5625vw;font-family:"Microsoft Yahei";}通用查看全部
-
塊狀元素（html也是），默認(rèn)高度是0查看全部
-
bg 代碼： html,body { height: 100%; /* 盒模型 需要定義高度 否則由內(nèi)容撐開*/ } /*page bg*/ .page { height: 100%; } .page > .bg { position: absolute; z-index: -1; width: 100%; height: 100%; } /* page1 */ #page1 > .bg { background: url("../images/p1_bg.jpg") no-repeat center; background-size: 100%; } /* page2 */ #page2 > .bg { background: url("../images/p2_bg.jpg") no-repeat center; background-size: 100%; } /* page3 */ #page3 > .bg { background: url("../images/p3_bg.jpg") no-repeat center; background-size: 100%; }查看全部
-
采用外部引用css樣式文件<link rel=”stylesheet” type=”text/css” href=”default.css>，優(yōu)點(diǎn)肯定就是代碼比較簡(jiǎn)潔清晰查看全部
舉報(bào)
0/150
提交
取消