css常用的布局效果

2021-10-03 11:34:58 字數 2307 閱讀 3893

去掉 li 的點：

list-style: none;

絕對布局，定住導航欄:

position:


fixed;/


/生成絕對定位的元素，相對於瀏覽器視窗進行定位。


top:0;


z-index:


999;
設定寬度包含 padding border content :
box-sizing:


content-box;/


/width


=width


box-sizing:


border-box;/


/width


=padding


+border


+content


,
input 去掉藍色線:
outline:none


;
在大圖中用一小塊圖：
background:url


('../img/search.png'


)no-repeat-20


-20;
去掉框樣式：
border:


0;
行高30,文字大小18：
font:


18px/30


px;
下劃線：
text-decoration:


none;/


/去掉text-decoration:


underline;/


/顯示下劃線
浮動:
float:


left


;

清除浮動：

.


clear-fix::after
設定高度，行高，並且據中：
height:


34px


;line-height:


34px


;
底部有一條線：
border-bottom:1px


solid


#e5e5e5


;
行內塊級：
display:


inline-block


;
彈性布局（css3）：
display:


flex


;flex-direction:


row;


方向
兒子：
:first-child


:nth-child(2


):last-child
將段落縮排:
text-indent:


24px


;
內容居中：
text-align:


center


;
顯示省略號來隱藏一行文字
white-space:


nowrap;/


/不換行


text-overflow:


ellipsis;/


/顯示省略號


overflow:


hidden;/


/隱藏
偽類製作邊框線 +
&


:after


&:nth-child(2


n)}
對齊，一行
vertical-align:1px


;
進度條
資料繫結方式：傳入值


product


.progress


<


article


>


<


divclass


=>//


外邊框<


divclass


="inner"


:style=""


/>


//內邊框條


<


/div


>


<


p>}%


>//


百分比<


/article


>..


inner
線性漸變顏色：
background-image:


linear-gradient


(270


deg,


#f551%


,#ff9c31


100%


);

常用CSS效果

div水平居中margin 0px auto 在ie下可能不能正常顯示，原因dtd說明未正確使用 圍繞div內文字居中 lineheight的高度和div的高度相同 注意，文字不能換行 ie6 div內文字居中 多行文字居中顯示，使用display table cell vertical align...

常用的CSS動畫效果

在實際運用中，經常需要用到旋轉 放大等動畫效果。以下列舉了一些常見的動畫效果的css實現。所有的動畫都需要設定過渡transition rotateimg,scaleimg,rotateandscale,translateimg然後根據不同的動畫需要，修改css樣式 1 旋轉 rotateimg h...

css的常用效果總結

1.模糊遮罩效率，模糊濾鏡效果 webkit filter blur 3px moz filter blur 3px o filter blur 3px ms filter blur 3px filter blur 3px 2.漸變 background moz linear gradient le...