在
網(wǎng)站建設(shè)中,根據(jù)設(shè)計(jì)圖高效做成前端頁面,使用一些前端網(wǎng)頁布局的就很必要,不但可以能有效的縮小前端頁面制作的時(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, left center, right center, 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: 7px 2px 0px #e1af85;
}
6、margin:0 auto ; 可以設(shè)置自動(dòng)居中。
7、圖片的對(duì)齊,img沒有對(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覽器在顯示沒有設(shè)置width的float元素會(huì)出錯(cuò),導(dǎo)致float元素失去作用。
9、css3實(shí)現(xiàn)背景顏色漸變,兼容瀏覽器的樣式如下:
background: -moz-linear-gradient(top, #ffffff 0%, #e7edf4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e7edf4));
background: -webkit-linear-gradient(top, #ffffff 0%, #e7edf4 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e7edf4 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e7edf4 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e7edf4 100%);
10、css使用border屬性實(shí)現(xiàn)四個(gè)方向的三角形的制作方法:
(1)向上的小三角形:
.top_triangle{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid #ffffff;
}
(2)向下的小三角形:
.down_triangle{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #ffffff;
}
(3)向左的小三角形:
.left_triangle{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 12px solid #ffffff;
border-bottom: 8px solid transparent;
}
(4)向右的小三角形:
.right_triangle{
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 12px solid #ffffff;
border-bottom: 8px solid transparent;
}
11、li標(biāo)簽的設(shè)置圖標(biāo)的話,設(shè)置background-image和list-style-image, 推薦設(shè)置background-image
12、表格table外框線,為表格合并為單一的邊框,樣式如下:
table{border-collapse:collapse;}
分享名稱:網(wǎng)站前端頁面布局小技巧
文章轉(zhuǎn)載:http://m.rwnh.cn/news17/235867.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、定制開發(fā)、網(wǎng)站營(yíng)銷、Google、ChatGPT
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)