-
CSS3 box-sizing 属性http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。查看全部
-
如果在HTML5中没有写高度，默认块元素高度为0 ，而且由内容来撑开高度，要设置子元素高度100% 需要先设置html body 等父级高度 (background)背景的属性值必须有（height）尺寸 或者在html5中的background-size:100%; html, body{ height:100%; } /* page bg */ .page > .bg { position:absolute; width:100%; height:100%; } /* page1 */ #page1 > .bg { background: url（"图片位置"） no-repeat(不重复) center center； background-size:100%;//使内容上浮设置z-index为-1 } /* page2 */ #page2 > .bg { background: url（"图片位置"） no-repeat(不重复) center center； background-size:100%;//使内容上浮设置z-index为-1 } /* page3 */ #page3 > .bg { background: url（"图片位置"） no-repeat(不重复) center center； background-size:100%;//使内容上浮设置z-index为-1 }查看全部
-
/* all tag */ *{ //通配符 margin:0; padding:0; border:none; font-size:1.5625vw; font-family:"Microsoft Yahei"; } /* music */ #music{ position:fixed;//position:fixed用于生成绝对定位的元素,相对于浏览器窗口进行定位。 top:3vh; right:4vw; z-index:5; width: 15vw; height: 15vw; border: 4 px solid #ef1639; border-radius: 50%;//使其变成圆形 background: #fff;//白色 } #music >img:first-of-type{ position：absolute；//position:absolute是将div的位置固定的，也就是用浏览器的绝对位置的显示div top：24%； right：2.5%; width: 28.421%; } #music > img:last-of-type{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width: 79%; } 采用外部引用css样式文件<link rel=”stylesheet” type=”text/css” href=”default.css>，优点肯定就是代码比较简洁清晰查看全部
-
1、Zepto是为现代智能手机浏览器推出的Javascript 框架, 有和jQuery相似的语法, 和jQuery相比下来, 他有很多优点, 大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 功能很齐全, 多出来了一些触摸屏的事件,它对PC的浏览器就不是那么理想,尤其是万恶IE直接过滤不兼容, 用它来开发手机iPhone和Android网页是不错的选择. 2、jquery主要是用在PC的网页中了，jquery是目前最流行的javascript框架，以其兼容全部主流浏览器，插件丰富，代码简洁，最关键的是更新快，最好的dom选择器而被广泛被使用。而手机wap方面的话，jquery也推出jquery-mobile，也很好用。 zepto也属于js，只是是修改过的js查看全部
-
学习目标：如截图； 人永远是要学习的。死的时候，才是毕业的时候。查看全部
-
——引用连锁：百度百科（http://baike.baidu.com/link?url=giMdZQUnivzh4Tby6ZHypwM2Qczo5VnXVRmKCYlmPTAP4jieXYWzSQfhp_yCoANWxbIsqQVvImuzpuksUFKplL7d8liXyvYv0XWrtlpwXCK） 切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。<br> 切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，把图片切出来这个过程是叫切片。<br> 切图的目的：第一个是让网页稿有了交互性，实现你平时看到的各种各样的功能。<br> 第二个是体积，所以切图时候一定注意少用图片工具：主流是dreamweaver，也有公司自己开发平台进行制作的。<br> 采用div+css布局更能减小网页体积 是表现与内容分离。<br> <br> <br> 可以去osasy老师那里用ps学切图。查看全部
-
分析和设计查看全部
-
灯笼特效 scale()函数控制缩放(即闪烁) 代码如下： #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; -webkit-animation: p1_lantern .5s infinite alternate; animation: p1_lantern .5s infinite alternate; } @keyframes p1_lantern { 0% { opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100% { opacity: 1; } } @-webkit-keyframes p1_lantern { 0% { opacity: .5; -webkit-transform: scale(.8, .8); transform: scale(.8, .8); } 100% { opacity: 1; } }查看全部
-
在html页面中加入class="play"; 利用两个图像的z-index关系控制是否遮盖 代码如下 (省略-o -ms内核) #music > img.play { -webkit-animation: music_disc 4s linear infinite; animation: music_disc 4s linear infinite; } @keyframes music_disc { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes music_disc { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }查看全部
-
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%; }查看全部
-
第三步：性能优化 布局分析查看全部
-
清晰需求分析之后：第二步，开发所需的技术分析 html5+css3+javascript(原生)查看全部
-
美化css代码 建议装插件CSS Format，然后右键点compact查看全部
-
移动端页面对于触摸时间会有300毫秒的延迟。因此把onclick事件换成touchstart事件查看全部
-
『从设计师方面拿到设计稿，通过对PSD稿件的分析，来完成对网页的重构。<br> 『合理组合各种格式的图像素材。<br> 比如背景图用.jpg；小图片素材用.png；可以用语言描述的直接用语言描述，比如右上角的播放控件的白色背景和红色边框。之所以要做到这样，是为了在保证图像素材质量的条件下压缩素材体积。 『移动端要提高网页效率。对于小型网页，能采用原生Javascript开发的时候不要盲目选择框架。 『使用WampServer作为本地服务器测试网页很高效。查看全部
举报
0/150
提交
取消