随笔分类 - css3
some about css3
摘要:<style type="text/css"> @keyframes shineRed { from {box-shadow: 0 0 5px #bbb; } 50% {box-shadow: 0 0 10px red; } to {box-shadow: 0 0 5px #bbb; } } @-w
阅读全文
摘要:代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq
阅读全文
摘要:0. 场景: 当需要加载内容过多,一次下滑需要滑动距离增大时 1.代码 body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;} 2.相关文章 深入研究-webkit-overflow-scrolling:touch及io
阅读全文
摘要:html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3制作3D图片立方体旋转特效</title> <link rel="stylesheet" href="3d.css"> </head> <body> <div c
阅读全文
摘要:代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px solid red; } /*向上淡入*/ .wrap { width: 800px; height: 200px; position: relative; } .
阅读全文
摘要:1.demo <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>demo</title> <link rel="stylesheet" href="http://cdn.dowebok.com/98/cs
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要:1. 用户登录页面模板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录页面模板</title> <meta content="width=device-width,initial-scale=1.0,maximum-s
阅读全文
摘要:1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸 (相对于父元素的字体大小的单位,那如果你要设置一个元素的宽度,高度,那么就得去看
阅读全文
摘要:box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
阅读全文
摘要:1.代码 html ccss *, *:after, *:before, html { box-sizing: border-box } body, h1 { margin: 0; padding: 0; font-style: normal; font-family: 'Sacramento',
阅读全文
摘要:/*手机*/ @media screen and (max-width:600px){ #header,#content,#footer{width:400px;} .right,.center{margin-top:10px;} .left,.right{height:100px;} .center{height:200px;} } /*平板...
阅读全文
摘要:固定宽度前提下: white-space: normal; word-break:normal; 默认属性,超出容器保持原宽度 word-break:break-all; (宽度不够截断) 只对英文起作用,以字母作为换行依据 word-wrap:break-word; 只对英文起作用,以单词作为换行
阅读全文
摘要:1. html <div id="wrapper"> <section> <p class="shake freez shake-hard">shake-hard</p> </section> <img class="shake shake-hard" src="img/1.png" alt="mu
阅读全文
摘要:1. css3 html <div class="container"> <div class="progress"> <div class="progress-bar"> <div class="progress-shadow"></div> </div> </div> </div> css bo
阅读全文