随笔分类 -  css

css相关的问题
bootstrap栅格化布局
摘要：这几天研究了bootstrap响应式布局，其实现原理如下 ： 首先用@media查询当前屏幕的大小，然后根据屏幕大小显示不同样式，样式都是用%定义的。 自己模仿也实现了类似的布局，代码如下： 阅读全文
posted @ 2016-04-09 21:06 summer323 阅读(1172) 评论(0) 推荐(0)
css绘制三角形的技巧
摘要：博客地址：http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html 这个大牛还有很多前端分享！ 阅读全文
posted @ 2016-03-26 20:01 summer323 阅读(183) 评论(0) 推荐(0)
css各种情况下居中的方法
摘要：推荐博客： https://css-tricks.com/centering-css-complete-guide/ http://howtocenterincss.com/#contentType=div&horizontal=center&vertical=middle&browser.IE=6 阅读全文
posted @ 2016-03-24 11:30 summer323 阅读(178) 评论(0) 推荐(0)
css清除浮动方法
摘要：浮动会让元素塌陷，即被浮动元素的父元素(不设置height)不具有高度。例如一个父元素包含了浮动元素，它将塌陷具有零高度，解决方法：1.在浮动元素后面定义一个div，并设置clear:both；清除浮动，同时为了解决IE6中div有高度的问题可以增加属性 height:0;overflow:hidd 阅读全文
posted @ 2016-03-24 10:34 summer323 阅读(236) 评论(0) 推荐(0)
三栏式布局(下)
摘要：以下两种方式分别用float和position:absolute 实现，中间的自适应宽度都是用margin实现的，事实证明margin真的很方便！ 方法1(position)： 方法二（float): 完整代码地址：https://github.com/summer323/my-way-to-Fro 阅读全文
posted @ 2016-03-22 17:12 summer323 阅读(171) 评论(0) 推荐(0)
定位对宽度的影响
摘要：float 和 绝对定位都是根据内容的宽度而定； 相对定位和块状元素，如果不设置宽度，默认是100%（父元素） 阅读全文
posted @ 2016-03-22 14:23 summer323 阅读(291) 评论(0) 推荐(0)
三栏式布局(上)
摘要：设置一个三栏式布局，要求：左右宽度固定，中间自适应占满剩余空间，并且随屏幕调整大小。父元素的高度取决于三列最高高度(效果图如上)； 第一次尝试： 出现的问题：1.父元素高度并不是三列最高，而是自动加了滚动条。2.中间content并没有填满剩余空间，而且不随窗口伸缩！ 原因如下：right是最高栏， 阅读全文
posted @ 2016-03-22 10:59 summer323 阅读(326) 评论(0) 推荐(0)
css布局博客推荐
摘要：学了很久的css，但是对布局一直是很捉急~ 今天看到这两篇博客，真是茅塞顿开！ http://zh.learnlayout.com/toc.html http://www.barelyfitz.com/screencast/html-training/css/positioning/ 阅读全文
posted @ 2016-03-21 17:35 summer323 阅读(175) 评论(0) 推荐(0)
css设置div始终居中
摘要：前提是div在父元素中占位； 详见博客地址：http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html 阅读全文
posted @ 2016-03-16 10:18 summer323 阅读(706) 评论(0) 推荐(0)
css Position定位属性
摘要：详见博客：http://www.cnblogs.com/polk6/p/3214847.html 阅读全文
posted @ 2016-03-16 10:00 summer323 阅读(103) 评论(0) 推荐(0)
css3画实心圆
摘要：设置border-radius的值为width和height的1/2； 例子如下： 可以用border属性设置边框样式 例如： 阅读全文
posted @ 2016-03-15 17:05 summer323 阅读(527) 评论(0) 推荐(0)
解决ul里最后一个li的margin问题
摘要：1、运用css3的nth-child(3n)   2.使用负margin   阅读全文
posted @ 2016-03-15 16:21 summer323 阅读(1946) 评论(0) 推荐(0)
（转载）用ul做横向导航
摘要：/* ul li以横排显示 *//* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内... 阅读全文
posted @ 2015-09-10 21:17 summer323 阅读(266) 评论(0) 推荐(0)
css3制作立体导航菜单
摘要：1.效果图如下：2.css实现 下面代码中红色和绿色是两种实现方法，选一即可。 CSS制作立体导航 Home About Me Portfolio Blog Resources ... 阅读全文
posted @ 2015-08-14 17:05 summer323 阅读(250) 评论(0) 推荐(0)
CSS属性-伪类和伪元素的区别
摘要：一直都感觉分不清，今天看到一个博客终于理解了~ 博客地址：http://segmentfault.com/a/1190000000484493 阅读全文
posted @ 2015-08-14 16:27 summer323 阅读(149) 评论(0) 推荐(0)