在網站建設中,根據設計圖高效做成前端頁面,使用一些前端網頁布局的就很必要,不但可以能有效的縮小前端頁面制作的時間,還可以做得更美觀,代碼也可以更整潔。
1、單行、多行省略
單行省略
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
多行省略
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
text-overflow:ellipsis;
overflow:hidden;
2、清除select的默認樣式
3、修改input輸入框中placeholder默認字體樣式
4、CSS3實現文字漸變色,如下:
.title{
background-image:-webkit-gradient(linear,leftcenter,rightcenter,from(#4967fd),to(#58d6ff));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
}
5、text-shadow實現文字陰影,可以用text-shadow實現立體的文字效果。
.title{
font-family:arial;
color:#ffffff;
font-size:68px;
text-shadow:7px2px0px#e1af85;
}
6、margin:0auto;可以設置自動居中。
7、圖片的對齊,img沒有對齊的屬性,可以在父級標簽設置text-align,因為img屬于行內替換元素,直接設置text-align看不出效果,也可以直接在img中設置style,使用vertical-align。
8、圖文環繞
設置圖文環繞的時候,那float元素需要設置元素的寬度,因為有的瀏覽器在顯示沒有設置width的float元素會出錯,導致float元素失去作用。
9、css3實現背景顏色漸變,兼容瀏覽器的樣式如下:
background:-moz-linear-gradient(top,#ffffff0%,#e7edf4100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#ffffff),color-stop(100%,#e7edf4));
background:-webkit-linear-gradient(top,#ffffff0%,#e7edf4100%);
background:-o-linear-gradient(top,#ffffff0%,#e7edf4100%);
background:-ms-linear-gradient(top,#ffffff0%,#e7edf4100%);
background:linear-gradient(tobottom,#ffffff0%,#e7edf4100%);
10、css使用border屬性實現四個方向的三角形的制作方法:
(1)向上的角形:
.top_triangle{
width:0;
height:0;
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
border-bottom:12pxsolid#ffffff;
}
(2)向下的角形:
.down_triangle{
width:0;
height:0;
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
border-top:12pxsolid#ffffff;
}
(3)向左的角形:
.left_triangle{
width:0;
height:0;
border-top:8pxsolidtransparent;
border-right:12pxsolid#ffffff;
border-bottom:8pxsolidtransparent;
}
(4)向右的角形:
.right_triangle{
width:0;
height:0;
border-top:8pxsolidtransparent;
border-left:12pxsolid#ffffff;
border-bottom:8pxsolidtransparent;
}
11、li標簽的設置圖標的話,設置background-image和list-style-image,推薦設置background-image
12、表格table外框線,為表格合并為單一的邊框,樣式如下:
table{border-collapse:collapse;}
td{border:#000solid1px;}