随笔分类 -  CSS

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