随笔分类 -  CSS

CSS _text-align：justify；实现两端对齐
摘要：参考：https://segmentfault.com/q/1010000007136263 法一：text-align-last：justify； html css 由于text-align-last的兼容性问题：https://caniuse.com/#search=text-align-las 阅读全文
posted @ 2018-03-20 08:55 忍冬。 阅读(1312) 评论(0) 推荐(0)
Tips_信息列表（手风琴）效果的多种实现方法
摘要：效果图： 一.纯CSS实现 二.原生JS实现 三.使用JQ 阅读全文
posted @ 2017-10-30 11:40 忍冬。 阅读(704) 评论(1) 推荐(0)
Tips_利用padding实现高度可控的分隔线
摘要：一.实现分隔线的方法（未理解：不是说span元素垂直方向设置怕padding不影响吗？） html： css： 实现原理：打开chrome浏览器开发者工具进行盒子模型的查看。 图1：将span标签的margin-left设置为12px，对应效果如图1。 图2：为使分隔线左右两边空白对称，这里将spa 阅读全文
posted @ 2017-08-31 19:45 忍冬。 阅读(450) 评论(2) 推荐(0)
CSS_圣杯布局和双飞翼布局
摘要：参考： 圣杯布局的来历是2006年发在a list part上的这篇文章： http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED： http://www.imooc.com/wenda/detail/254035 博客：http://www. 阅读全文
posted @ 2017-08-31 16:09 忍冬。 阅读(353) 评论(0) 推荐(0)
Tips_一级菜单栏实现
摘要：1.纵向 实现效果： 注意： 解决方案： 2.横向（注意：把<a>标签设置为：display: block;） 实现效果： 3.圆角 实现效果： 4.向上增加高度 效果图： 5.水平增加宽度（JS） 6.水平增加宽度（JQ） 阅读全文
posted @ 2017-08-26 17:45 忍冬。 阅读(151) 评论(0) 推荐(0)
CSS_常见布局
摘要：1.一列布局——常用于网站首页。 html： css： 效果： 2.两列(固定宽度)，自适应布局 html： css： 效果图： 3.三列(固定宽度)，自适应布局 HTML： css： 效果图： 4.三列布局，中间自适应，两边固定宽度：position:absolute; HTML： css: 效果 阅读全文
posted @ 2017-08-05 09:48 忍冬。 阅读(1917) 评论(0) 推荐(0)
CSS_高级选择符
摘要：2016-11-07 《css入门经典》第八章 1.属性选择器 注意：IE（一直到5.5版）不支持属性选择器。 2.近亲选择器 同胞元素：具有相同的父代。 近亲元素：如果源代码中第二个直接出现在第一个之后，那么它们就是近亲。 如上，具有id html和java的<li>是近亲元素，java和css的 阅读全文
posted @ 2016-11-07 23:38 忍冬。 阅读(458) 评论(0) 推荐(0)
CSS_级联和继承
摘要：2016-11-06 《CSS入门经典》第七章 1.在HTML中使用CSS样式表的三种方式： （1）内联的样式表。 eg：<em style="background-white">LIN</em> （2）嵌入式样式表。 即在<head>标签内嵌入<style>标签及具体的样式设置内容。 （3）外部链 阅读全文
posted @ 2016-11-06 19:46 忍冬。 阅读(2661) 评论(0) 推荐(0)
CSS_选择符
摘要：2016-10-28 《CSS入门经典》第五章 以下提示注意事项： 1.如何选择使用id选择符还是class选择符：当确信id选择符在页面的唯一性时，就可以使用id选择符。 2.通用选择符在所有元素上设置样式，并不是只设置继承的默认值。 eg： 注意：使用通用选择符，<em>标签里的内容显示为绿色， 阅读全文
posted @ 2016-11-03 13:31 忍冬。 阅读(635) 评论(0) 推荐(0)
CSS_对齐
摘要：2016-10-25 《css入门经典》第15章 1.text-align属性： 块属性内部的文本对齐方式。该属性只对块盒子有意义，内联盒子的内容没有对齐方式。（注意：只是盒子内部的内容对齐，而不是块盒子本身。） center:内容居中； justify：文本两端对齐； left：内容左对齐； ri 阅读全文
posted @ 2016-10-25 11:45 忍冬。 阅读(1423) 评论(0) 推荐(0)
CSS_盒子模型
摘要：2016-10-22 《css入门经典》第6章 1.每个HTML元素对应于一个显示盒子，但不是所有的元素都显示在屏幕上。 2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。 3.元素类型： （1）块元素（block）：以新 阅读全文
posted @ 2016-10-22 16:21 忍冬。 阅读(721) 评论(0) 推荐(0)