随笔分类 - CSS
摘要：一、浏览器图片或者连接的默认操作 1.默认图片选中拖动 2.默认连接选中拖动 二、CSS pointer-events 取消选中和拖动，取消鼠标默认操作 加上pointer-events: none; 即可取消鼠标选中拖动操作。 <style> .block{ pointer-events: non
阅读全文
摘要：IOS浏览器 ul li 字体无效问题_iPhone的Safari的奇怪结果：OL LI A或UL LI A 说明： 在 Safari浏览器中，ul li a标签关联使用时候字体大小会出现异常，没起作用。 解决方案： ol, ul { -webkit-text-size-adjust: 100%;
阅读全文
摘要：一、CSS Div等比例缩放 1 百分比+fixed；占据屏幕的固定比例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
阅读全文
摘要：一、Css时间轴布局案例1，简单版 特点：内容项高度自适应。 Css+Html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
阅读全文
摘要：Css 左右循环动画_左右循环运动效果案例 方案1 animation+定时器、简单css定义动画，js错开运行时间 css定义 body { padding: 100px; } .block { background-color: aquamarine; width: 500px; height:
阅读全文
摘要：一、Css 禁止文字选中 CSS 语法 user-select: auto|none|text|all; 属性值 值描述 auto 默认。如果浏览器允许，则可以选择文本。 none 防止文本选取。 text 文本可被用户选取。 all 单击选取文本，而不是双击。 使用案例： body { -moz-
阅读全文
摘要：一、Css 优先级简介 什么是 Css： 1.CSS 指层叠样式表 （Cascading Style Sheets） 2.样式对应一如何显示HTML元素 3.解决内容与表现分离的问题，可以独立文件存储 4.多个样式定义可层叠为一个。 优先级基本规则： 后来者居上。 二、Css 优先级通用规则： 1.
阅读全文
摘要：一、Css 文字垂直方向居中整理 浏览器在渲染文字的时候，默认就是从左往右，从上往下的方式排列文字。Css提供了属性可以改变这种排列方式。 关于css块元素，垂直方向居中参考：CSS网页布局垂直居中整理 关于文字排列参考：CSS3网页布局之文字布局和文字超出处理 二、单行文字垂直方向居中，heigh
阅读全文
摘要：一、Css 标题效果常见整理（二）边线框系列，边线+文字 1. <div class="title-block"> <div class="title">新闻资讯</div> <div class="line"></div> </div> .title-block { position: relat
阅读全文
摘要：一、Css 标题效果常见整理背景+文字 1. 立体标题 <div class="title-block"> <div class="title">推荐标题</div> <div class="triangle"></div> </div> .title-block { display: inline
阅读全文
摘要：Css3 列表布局 两列或者多列布局整理 Css布局多列，宽度自适应 一、float + border-box + 宽度百分比处理 （推荐） 宽度百分比，自动换行到下一列。 此方式推荐，重点兼容性高。 案例1： css代码： .list { background: rgb(250, 213, 180
阅读全文
摘要：Css3 常用布局方式 一行两列&高度固定&某列宽度自适应 方案有很多种，根据自己的喜好和实际场景选择方式 一、float +margin 方式 （推荐） 此方式，使用度高，扩展强，兼容性好。 使用到垂直方向居中，参考：CSS网页布局垂直居中整理 示例1： css 代码 /* 一行两列，高度固定，某
阅读全文
摘要：一、 float+ margin 经典模式，兼容性好 原理：使用padding+margin扩大内容，使用 hidden隐藏超出部分。 注：垂直方向无法居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
阅读全文
摘要：一、Css 文本水平方向展示 direction样式 ltr：文本流从左到右。默认 rtl：文本流从右到左 .default { border: 1px solid blue; margin: 10px 0px; direction: ltr; /*默认，可以不需要设置*/ } .revert {
阅读全文
摘要：<style media="print">、<link media="print">的用法合理应用，media="print"是不被网页所显示的，只能在打印的效果上存在，可以设置出打印效果和在网页上所显示的不一样。 例：打印出来的字体和网页是不同的 // 设置显示器用字体尺寸 @media scre
阅读全文
摘要：一、使用CSS3处理垂直居中方式 1.使用Flex布局处理（推荐），简单好用 body,html{ width:100%; height:100%; } .out { width: 20%; height: 50%; border: 1px solid blue; display: flex; ju
阅读全文
摘要：一、ico/png 图片下载网站： 好图网 http://www.haotu.net/ PGN转Ico工具 http://www.easyicon.net/covert/ http://www.ico.la/ 二、Web字体下载管理工具iconfont： 阿里UX矢量图标库–最强大的矢量图标库（Ic
阅读全文
摘要：HTML代码： CSS 显示结果： 博客内容摘自：http://www.jb51.net/css/69093.html
阅读全文
摘要：一、实例1： 二、实例2： 三、实例3： 四、实例4： Clip属性简介：http://www.cnblogs.com/tianma3798/p/5862126.html
阅读全文
摘要：Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。 首先你要注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用
阅读全文