H5+C3
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
背景色渐变
线性重复渐变: background-image:-webkit-repeating-linear-gradient(43deg,red 0,red 10px);径向重复渐变: background:-webkit-repeating-radial-gradient(50%,#fff 0px,#fff 10px);原创 2018-06-19 10:21:32 · 344 阅读 · 0 评论 -
表单项 —【input的required属性】
<input type="text" required>此属性为让此文本框变成必选项,有些浏览器不能正常显示原创 2018-05-21 17:34:20 · 1756 阅读 · 0 评论 -
nth-child选择器
:nth-child(2)选取第几个标签,“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同.demo01 li:nth-child(n+4){background:#090}:nth-child(-n+4)选取小于等于4标签.demo01 li:...转载 2018-12-17 15:20:03 · 525 阅读 · 0 评论 -
细线表格
<table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;"> <tr> <td>1.1</td> <td>1.2</td> <...原创 2019-05-24 10:21:30 · 234 阅读 · 0 评论 -
异步适应屏幕宽度的正方形图片防抖设置
当一个正方形的图片,要适配各种手机的宽的的时候,由于是异步获取的图片,所以会存在抖动问题。css设置.image-header { position: relative; width: 100%; height: 0; padding-top: 100%; img { position: absolute;...原创 2019-06-06 16:17:12 · 144 阅读 · 0 评论 -
sticky footer布局
到页面内容铺不满页面时候,下方div始终定在下面;当页面内容多余一屏的时候,下方的div会被顶到下面去 <div id="main"> <div class="main_top clearfix"> <div class="main_top_content"> 发烧友和飞机开...原创 2019-05-16 10:59:20 · 208 阅读 · 0 评论 -
怎么在手机端是实现1px的边框
单边像素边.scale-1px { position: relative; border: none; } .scale-1px:after { content: ""; position: absolute; bottom: 0; /*这边的top、bottom、left、right是用来定义那个边的*/ background: #000; w...原创 2019-05-15 11:26:56 · 317 阅读 · 0 评论 -
纯c3实现动态省略号
<style> .loading { font-family: simsun; } :root .loading { display: inline-block; width: 1.5em; vertical-align: bottom; overflow: hidden; } @-...原创 2019-04-04 10:26:24 · 414 阅读 · 0 评论 -
css3—background
background-size(改变北京图片的尺寸)background-size: 宽 高;background-size:cover;/*让背景图按照盒子的最大值进行塞满*/background-size: contain;/*在盒子中必须显示完整的一张背景图*/background-origin (改变北京图的的定位区域)background-clip (同理不过只作用...原创 2018-09-14 16:37:13 · 129 阅读 · 0 评论 -
HTML5-视频音频播放
<video src="xxx"> <source src="xxxx"> <source src="xxxx"> <!--也可以使用多加载引入多个 --> this is not look MP4. <!--中间所写的内容是,不支持此标签下,才会显示的-->&原创 2018-09-14 14:45:10 · 361 阅读 · 0 评论 -
弹性布局-02
为其下的子元素设置的属性:order:定义项目的排列顺序,数值越小,排列越靠前,默认为0;flex-grow:项目的放大比例,默认为0;即如果存在剩余空间也不放大...原创 2018-06-19 16:49:23 · 142 阅读 · 0 评论 -
弹性布局-01
(1)任何一个盒子都可以指定为flex布局 display:flex;(2)行内元素也可以使用flex布局 display:inline-flex;(3)webkit内核的浏览器必须加上-webkit前缀 display:-webkit-flex;!!!注意!!!: 设置为flex布局以后,子元素的float、clear和vertical-align属性将失效, 采用...原创 2018-06-19 15:36:04 · 209 阅读 · 0 评论 -
过渡
.box { width: 100px; height: 100px; background: #aaa; transition: width 2s linear 1s;}/*鼠标滑上box盒子上1s后执行,在2秒内让其宽度从100px匀速变成300px*/.box:hover { width: 300px;}transition: property...原创 2018-06-19 11:58:03 · 248 阅读 · 0 评论 -
2D/3D的变化与转换
translate、rotate、scale原创 2018-06-19 11:29:57 · 1140 阅读 · 0 评论 -
弹性布局(flex)总结
父元素身上的属性1:flex-direction --控制子元素的排列方式flex-direction: row | row-reverse | column | column-reverse;/* row(从左到右) --默认 row-reverse(从右到左) column(从上到下) column-reverse(从下到上)*/2:flex-wrap --控制...原创 2019-06-27 15:36:55 · 570 阅读 · 0 评论