随笔分类 -  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 阅读全文
posted @ 2023-12-17 21:08 justSmile2 阅读(7) 评论(0) 推荐(0) 编辑
摘要:代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq 阅读全文
posted @ 2019-07-02 22:18 justSmile2 阅读(139) 评论(0) 推荐(0) 编辑
摘要:0. 场景: 当需要加载内容过多,一次下滑需要滑动距离增大时 1.代码 body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;} 2.相关文章 深入研究-webkit-overflow-scrolling:touch及io 阅读全文
posted @ 2019-05-14 11:06 justSmile2 阅读(430) 评论(0) 推荐(0) 编辑
摘要:html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3制作3D图片立方体旋转特效</title> <link rel="stylesheet" href="3d.css"> </head> <body> <div c 阅读全文
posted @ 2019-04-25 14:01 justSmile2 阅读(203) 评论(0) 推荐(0) 编辑
摘要:代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px solid red; } /*向上淡入*/ .wrap { width: 800px; height: 200px; position: relative; } . 阅读全文
posted @ 2019-04-25 11:15 justSmile2 阅读(959) 评论(0) 推荐(0) 编辑
该文被密码保护。
posted @ 2019-04-19 19:28 justSmile2 阅读(12) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2019-04-19 19:21 justSmile2 阅读(123) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2019-04-16 17:45 justSmile2 阅读(177) 评论(0) 推荐(0) 编辑
该文被密码保护。
posted @ 2019-04-16 16:27 justSmile2 阅读(5) 评论(0) 推荐(0) 编辑
摘要:1. 用户登录页面模板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录页面模板</title> <meta content="width=device-width,initial-scale=1.0,maximum-s 阅读全文
posted @ 2019-03-25 19:57 justSmile2 阅读(1515) 评论(0) 推荐(0) 编辑
摘要:17素材 阅读全文
posted @ 2019-03-21 19:56 justSmile2 阅读(175) 评论(0) 推荐(0) 编辑
该文被密码保护。
posted @ 2019-02-28 19:10 justSmile2 阅读(27) 评论(0) 推荐(0) 编辑
摘要:1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸 (相对于父元素的字体大小的单位,那如果你要设置一个元素的宽度,高度,那么就得去看 阅读全文
posted @ 2019-01-14 16:40 justSmile2 阅读(987) 评论(0) 推荐(0) 编辑
摘要:box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 阅读全文
posted @ 2019-01-07 19:09 justSmile2 阅读(91) 评论(0) 推荐(0) 编辑
摘要:1.代码 html ccss *, *:after, *:before, html { box-sizing: border-box } body, h1 { margin: 0; padding: 0; font-style: normal; font-family: 'Sacramento', 阅读全文
posted @ 2018-12-21 11:44 justSmile2 阅读(262) 评论(0) 推荐(0) 编辑
摘要:Document ... 阅读全文
posted @ 2018-11-28 19:11 justSmile2 阅读(200) 评论(0) 推荐(0) 编辑
摘要:/*手机*/ @media screen and (max-width:600px){ #header,#content,#footer{width:400px;} .right,.center{margin-top:10px;} .left,.right{height:100px;} .center{height:200px;} } /*平板... 阅读全文
posted @ 2018-10-30 10:43 justSmile2 阅读(467) 评论(0) 推荐(0) 编辑
摘要:固定宽度前提下: white-space: normal; word-break:normal; 默认属性,超出容器保持原宽度 word-break:break-all; (宽度不够截断) 只对英文起作用,以字母作为换行依据 word-wrap:break-word; 只对英文起作用,以单词作为换行 阅读全文
posted @ 2018-10-27 18:59 justSmile2 阅读(152) 评论(0) 推荐(0) 编辑
摘要: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 阅读全文
posted @ 2018-10-26 16:56 justSmile2 阅读(551) 评论(0) 推荐(0) 编辑
摘要:1. css3 html <div class="container"> <div class="progress"> <div class="progress-bar"> <div class="progress-shadow"></div> </div> </div> </div> css bo 阅读全文
posted @ 2018-10-24 15:06 justSmile2 阅读(170) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示