在網(wǎng)站建設(shè)中，根據(jù)設(shè)計(jì)圖高效做成前端頁(yè)面，使用一些前端網(wǎng)頁(yè)布局的就很必要，不但可以能有效的縮小前端頁(yè)面制作的時(shí)間，還可以做得更美觀，代碼也可以更整潔。

　　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的默認(rèn)樣式

　　3、修改input輸入框中placeholder默認(rèn)字體樣式

　　4、CSS3實(shí)現(xiàn)文字漸變色，如下：

　　.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實(shí)現(xiàn)文字陰影，可以用text-shadow實(shí)現(xiàn)立體的文字效果。

　　.title{

　　font-family：arial;

　　color：#ffffff;

　　font-size：68px;

　　text-shadow：7px2px0px#e1af85;

　　}

　　6、margin：0auto;可以設(shè)置自動(dòng)居中。

　　7、圖片的對(duì)齊，img沒(méi)有對(duì)齊的屬性，可以在父級(jí)標(biāo)簽設(shè)置text-align，因?yàn)閕mg屬于行內(nèi)替換元素，直接設(shè)置text-align看不出效果，也可以直接在img中設(shè)置style，使用vertical-align。

　　8、圖文環(huán)繞

　　設(shè)置圖文環(huán)繞的時(shí)候，那float元素需要設(shè)置元素的寬度，因?yàn)橛械臑g覽器在顯示沒(méi)有設(shè)置width的float元素會(huì)出錯(cuò)，導(dǎo)致float元素失去作用。

　　9、css3實(shí)現(xiàn)背景顏色漸變，兼容瀏覽器的樣式如下：

　　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屬性實(shí)現(xiàn)四個(gè)方向的三角形的制作方法：

　?。?）向上的角形：

　　.top_triangle{

　　width：0;

　　height：0;

　　border-left：8pxsolidtransparent;

　　border-right：8pxsolidtransparent;

　　border-bottom：12pxsolid#ffffff;

　　}

　?。?）向下的角形：

　　.down_triangle{

　　width：0;

　　height：0;

　　border-left：8pxsolidtransparent;

　　border-right：8pxsolidtransparent;

　　border-top：12pxsolid#ffffff;

　　}

　?。?）向左的角形：

　　.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標(biāo)簽的設(shè)置圖標(biāo)的話，設(shè)置background-image和list-style-image，推薦設(shè)置background-image

　　12、表格table外框線，為表格合并為單一的邊框，樣式如下：

　　table{border-collapse：collapse;}

　　td{border：#000solid1px;}