html,css 相关知识
标签样式,炫酷动效!
微微暖风
这个作者很懒,什么都没留下…
展开
-
28个纯css3 加载loading动画特效
<!DOCTYPE html><head><meta charset="utf-8"> <title>28个纯css3 加载loading动画特效</title> <style type="text/css">html, body { padding: 0; margin:转载 2018-04-23 10:08:20 · 1286 阅读 · 0 评论 -
滚动条 默认样式修改 (css)
// html结构class="box"> class="boxItem"> "height:300px;">第一级1111 "height:500px;">第一级2222 第一级3333 // css 样式.box{ width: 280px; height: 600px;原创 2018-01-31 14:49:21 · 1282 阅读 · 0 评论 -
Web开发者不容错过的20段CSS代码
1、CSS Resets 网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。//css 代码html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p...转载 2018-05-18 10:01:21 · 272 阅读 · 0 评论 -
Web前段单词大全(html+css+js+vue)
style 修饰width 宽度height 高度title 想说明的text-align 水平对齐方式center 居中 left 居左 right 居右line-height 垂直对齐方式/行高 当行高等于高度时候垂直居中background 背景image 引入背景图片(url)background-position: 背景定位(x轴,y轴;)background-rep...原创 2018-04-26 09:55:36 · 2806 阅读 · 0 评论 -
css sprite 精灵图 使用
1 、什么是css sprite css sprite很多人叫css精灵,一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。当访问页面时,载入的图片就不会一张一张的慢慢显示出来了。2、css sprite原理 css sprite其实就是把网页中一些背景图片整合到一张图片文件中,再利用css的background-image,background-rep原创 2016-08-26 20:04:33 · 493 阅读 · 0 评论 -
css 使用小技巧
1、混合模式不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式,但是在Chrome和Opera浏览器中需要添加前缀。举个栗子:// 你也可以尝试不同的样式.blend { background: #fff;}.blend img { mix-blend-mode: darken; }2、渐变边框现在,你甚至可以在边框中使用渐...原创 2018-12-13 14:06:21 · 152 阅读 · 0 评论 -
单行、多行出现省略号
1、单行出现省略号代码<div style = 'width:400px; height:40px; border:1px solid red;'> <p style= 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'>原创 2017-11-08 14:46:04 · 290 阅读 · 0 评论 -
css高级技巧汇总
1、彩色照片显示黑白照片img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%);}2、:not伪类的使用.n原创 2017-12-02 22:09:18 · 193 阅读 · 0 评论 -
H5 常见问题汇总及解决方法
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面1.HTML页面结构<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />// width 设置viewport宽度,转载 2017-09-01 10:11:05 · 2820 阅读 · 0 评论 -
前端 双飞翼布局和圣杯布局
说明:圣杯布局和双飞翼布局,它们的都是要求三栏布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,二双飞翼布局是对圣杯布局的一种改良。1.圣杯布局: 用到浮动,负边距,相对定位,不添加额外标签。html部分: <div class = "header"> header </div> <div class = "bd"> <div cl原创 2016-09-08 19:28:39 · 216 阅读 · 0 评论 -
电脑pc、移动端、平板不同客户端,调用不同页面或者样式
js代码如下/ 判断是否为移动端运行环境// wukong.name 20130716if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|So原创 2017-12-14 14:37:54 · 2507 阅读 · 0 评论 -
img 图片 下边距 解决办法
在不同浏览器下图片下面会出现莫名的下边距,经测算在FF中 下边距大概是多出了3像素左右,而IE6更多,在IE8中展示却是完好的,以往的做法只需要将img定义为块状级就解决了问题;但其原理是:图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关 的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size ...原创 2020-03-09 10:41:20 · 703 阅读 · 0 评论 -
flex布局 兼容国内浏览器的双核模式
flex布局不支持低版本ie内核是确定了,没办法的改变的事实,但是国产浏览器采用哪一个内核打开你的页面,这个是你可以控制的。在html的<head>标签中加入如下代码:<meta name="renderer" content="webkit">然后浏览器打开你的页面时,会默认采用chrome内核来渲染页面,这是360浏览器的功能,其他国产浏览器也支持。但是用户非...原创 2018-06-13 14:07:38 · 470 阅读 · 0 评论 -
css3 的各种渐变总结
css3的渐变分为:线性渐变,在分为重复线性渐变;径向渐变,再分为圆形径向渐变,椭圆形径向渐变,重复径向渐变 (A.宽高相等就是圆形重复径向渐变) (B.宽高不相等就是椭圆形重复径向渐变)// div{ width:800px; height:400px; color:white;}.item1{ background-image:linear-gra原创 2017-12-05 09:59:18 · 681 阅读 · 0 评论 -
CSS之px自动转rem插件CSSREM 的sublime的安装流程
CSS之px自动转rem插件CSSREM 的sublime的安装流程一、安装: 1.下载本项目,比如:git clone https://github.com/flashlizi/cssrem 2.进入packages目录:Sublime Text -> Preferences -> Browse Packages… 3.复制下载的css原创 2016-10-17 17:21:22 · 189 阅读 · 0 评论 -
前端 布局方式 及 实例
1、右列定宽,左列自适应html布局: <div class ="parent"> <div class ="left"> </div> <div class ="right"> </div> </div>样式设置; 1.使用float+margin实现。 .parent{ background: red;原创 2016-09-07 13:19:35 · 197 阅读 · 0 评论