-
整个页面布局大同小异 最主要是位置的裁量 代码： #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%; }查看全部
-
课程介绍及内容查看全部
-
代码(续) #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; }查看全部
-
需要先设置display:block / none; 属性 使当前设置页面显示或不显示。 在整个page的div中设置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; }查看全部
-
由于三个page的背景重叠，分别为page1和page设置隐藏 display：none；page2设置显示 display:block查看全部
-
代码：续 #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; /* 自动识别位置 */ -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 旋转查看全部
-
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) eg .test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; } 实际宽度为：200 内容宽度为:200-10*2-15*2查看全部
-
切图--重构--前端--优化查看全部
-
防止文字被背景覆盖，为背景设置z-index 属性设置元素的堆叠顺序，z-index: -1;查看全部
-
html5+css3贺卡项目：2.表示层（music） *{margin:0;padding:0;border:none;font-size:1.5625vw;font-family:"Microsoft Yahei";}通用查看全部
-
块状元素（html也是），默认高度是0查看全部
-
bg 代码： html,body { height: 100%; /* 盒模型 需要定义高度 否则由内容撑开*/ } /*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>，优点肯定就是代码比较简洁清晰查看全部
举报
0/150
提交
取消