随笔分类 -  CSS

前端样式css
文本溢出显示省略号
摘要：一、单行文 本溢出显示省略号 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } https://www.cnblogs.com/jyybeam/p/6564453.html 阅读全文
posted @ 2018-03-29 10:46 白纱茗-度C 阅读(177) 评论(0) 推荐(0)
css3 计算属性 calc()
摘要：.elm { width: calc(expression); } 注意事项： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)" 阅读全文
posted @ 2018-03-29 10:45 白纱茗-度C 阅读(19107) 评论(1) 推荐(2)
让一个图片在div中居中（4种方法）
摘要：第一种： <div class="title"> <div class="flag"></div> <div class="content"> <img src="img_p1_title.png"> </div> </div> css: .title { width: 100%; font-siz 阅读全文
posted @ 2018-03-29 10:43 白纱茗-度C 阅读(618) 评论(0) 推荐(0)
css3 圆形、圆环、半圆、四分之一圆、扇形
摘要：border-radius: 50%; { width: 40px; height: 40px; border: 70px solid red; border-radius: 90px; } 3. 半圆 { width: 180px; height: 90px; border-radius: 90p 阅读全文
posted @ 2018-03-29 10:37 白纱茗-度C 阅读(7453) 评论(0) 推荐(0)
媒体查询
摘要：一、css方式 1、media screen and (max-width: 600px){ } 2、media screen and (max-width: 900px){ } 3、media screen and (max-width: 1200px){ } 二、link方式 <link rel 阅读全文
posted @ 2018-03-29 10:35 白纱茗-度C 阅读(147) 评论(0) 推荐(0)
base.css默认公共样式
摘要：html,body,h1,h2,h3,h4,h5,h6,div,p,ul,li,ol,p { margin: 0; padding: 0; } input { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 0; border: ... 阅读全文
posted @ 2018-03-29 10:34 白纱茗-度C 阅读(316) 评论(0) 推荐(0)
CSS 清除默认样式
摘要：CSS 清除默认样式 通常有以下几句就够了： *{ margin:0; padding:0 } li{ list-style:none } img{ vertical-align:top; border:none } 如果你想写全也可以： /* 清除内外边距 */ body, h1, h2, h3, 阅读全文
posted @ 2018-03-28 21:55 白纱茗-度C 阅读(2865) 评论(0) 推荐(0)
CSS篇之4---样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验
摘要：http://blog.csdn.net/zengyonglan/article/details/53337879 阅读全文
posted @ 2018-03-28 21:53 白纱茗-度C 阅读(2499) 评论(0) 推荐(0)
CSS篇之3---position 和 display 的取值和各自的意思和用法
摘要：http://blog.csdn.net/zengyonglan/article/details/53337843 http://blog.csdn.net/splendid_can/article/details/53351393 阅读全文
posted @ 2018-03-28 21:52 白纱茗-度C 阅读(181) 评论(0) 推荐(0)
CSS篇之2---如何保持浮层水平垂直居中
摘要：如何保持浮层水平垂直居中.notehttp://www.cnblogs.com/yaliu/p/5190957.html （一）利用绝对定位与transform <div class="parent"> <div class="children"></div> </div> 将父元素定位，子元素如下 阅读全文
posted @ 2018-03-28 21:51 白纱茗-度C 阅读(391) 评论(0) 推荐(0)
CSS篇之1---清除浮动
摘要：<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div></div> 【补充】：使用空标签清除浮动. 2. 方 阅读全文
posted @ 2018-03-28 21:47 白纱茗-度C 阅读(141) 评论(0) 推荐(0)
CSS的类名交集复合选择器
摘要： 阅读全文
posted @ 2018-03-28 21:46 白纱茗-度C 阅读(138) 评论(0) 推荐(0)
CSS3 不定宽高水平垂直居中
摘要：【在父元素上添加上面3句，即可实现子元素水平垂直居中】 阅读全文
posted @ 2018-03-28 21:45 白纱茗-度C 阅读(115) 评论(0) 推荐(0)
css 标题三条横线
摘要：HTML: <div class="rule-title"> <div class="menu-icon"><div> 活动*规则 <div class="menu-icon"><div> </div> CSS: .rule-title { font-weight: bold; margin: 30 阅读全文
posted @ 2018-03-28 21:42 白纱茗-度C 阅读(1190) 评论(0) 推荐(0)