关闭边栏(ESC)打开边栏(ESC)
目 录
文本分散二端对齐：
text-align:justify;text-justify:inter-ideograph;
用box-shadow阴影外延值显示边框效果不影响网页布局。
.post-style-card:hover{box-shadow:0px 0px 0px 3px #38B7EA}
通过hover一个元素改变其它元素的CSS
定义一个父标签pic_0,二个子标签：pic_1与pic_2.鼠标经过Pic_0的时候，显示Pic_1,隐藏Pic_2,以达到切换图片的效果
#pic_1{display:none;}
#pic_0:hover #pic_1{display:block;}
#pic_0:hover #pic_2{display:none;}
解决CSS浮动塌陷方法
针对包裹的全是浮动元素的父级容器使用clearfix
.clearfix {zoom:1;}
.clearfix:after {content:”.”;display:block;visibility:hidden;height:0;clear:both;}
静态网页的三种布局
- 一列布局：页面内容区域box
{width:宽度数值;margin:0 auto;}
- 二列布局：一列固定宽度另一列自适应宽度
固定列容器：
{width:宽度数值;float:left/right;}
自适应列容器：
{margin-方向:数值=固定列宽;} - 三列布局：二边固定宽度，中间自适应，中间放置主体内容。
12345678910111213141516<style>*{margin:0;padding:0}html,body {height:100%;}/*先加载main主体内容，先全部浮动起来后再设置左，右边栏的位置*/.box-main,.box-left,.box-right {height:100%;float:left;}.box-left {width:200px;margin-left:-100%;}.box-right{width:300px;margin-left:-300px;}.box-main {box-sizing:border-box;padding-left:200px;padding-right:300px}</style></head><body><div class="box-main">主体内容</div><div class="box-left">左边栏</div><div class="box-right">右边栏</div></body>
运用伪对象选择符：frist-letter现实首字下沉的效果
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>E::first-letter_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="" /> <style> h1{font-size:16px;} p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;} p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:2;} </style> </head> <body> <h1>杂志常用的首字下沉效果</h1> <p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p> </body> </html> |
响应式栅格系统
.row{ box-sizing:border-box;}
[class^="col-"],[class*=" col-"]{box-sizing:border-box; float:left;min-height: 1px;position: relative;}
.col-1{width:8.33333%}
.col-2{width:16.66667%}
.col-3{width:25%}
.col-4{width:33.33333%}
.col-5{width:41.66667%}
.col-6{width:50%}
.col-7{width:58.33333%}
.col-8{width:66.66667%}
.col-9{width:75%}
.col-10{width:83.33333%}
.col-11{width:91.66667%}
.col-12{width:100%}
/*清楚浮动Name: style_clearfix
Example: class="clearfix|cl"
Explain: clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}
.cl,.clearfix{zoom:1}
文字单行溢出省略号
.text-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}