web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 精靈圖
- 為什么需要精靈圖？
- 精靈圖的使用
- 精靈圖課堂案例
- 用精靈圖拼出自己的名字
- 字體圖標
- 字體圖標的下載
- 字體圖標的引入
- 字體圖標的追加
- css三角（用邊框border制作）
- 案例：京東三角
- css用戶界面樣式
- 更改用戶鼠標樣式cursor
- 取消表單輪廓線input{outline:none;} textarea{outline:none;}
- 取消文本框拖拽textarea{resize:none;}
- vertical-align垂直對齊屬性（垂直居中：vertical-align:middle;）
- 解決圖片底部默認空白縫隙問題
- 溢出文字省略號顯示
- 單行文本溢出省略號顯示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
- 多行文本溢出省略號顯示
- 布局技巧
- margin負值的巧妙運用（消除重合的邊框）
- 如何讓鼠標經過盒子時顯示邊框
- 文字環繞浮動圖片簡化布局
- 行內塊的巧妙運用（制作頁面/頁號跳轉）
- 三角形強化（案例：京東秒殺三角）
- css初始化（重新設置瀏覽器樣式）（復制粘貼一坨代碼）
精靈圖
為什么需要精靈圖？
精靈圖的使用
精靈圖課堂案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>精靈圖使用</title><style>.box1 {width: 60px;height: 60px;margin: 100px auto;background: url(sprites.png) no-repeat -182px 0;}.box2 {width: 27px;height: 25px;/* background-color: pink; */margin: 200px;background: url(sprites.png) no-repeat -155px -106px;}</style> </head><body><div class="box1"></div><div class="box2"></div> </body></html>用精靈圖拼出自己的名字
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用精靈圖拼出自己名字</title><style>span {display: inline-block;background: url(images/abcd.jpg) no-repeat;}.p {width: 100px;height: 112px;/* background-color: pink; */background-position: -493px -276px;}.i {width: 60px;height: 108px;/* background-color: pink; */background-position: -327px -142px;}.n {width: 108px;height: 109px;/* background-color: pink; */background-position: -215px -141px;}.k {width: 105px;height: 114px;/* background-color: pink; */background-position: -495px -142px;}</style> </head> <body><span class="p">p</span><span class="i">i</span><span class="n">n</span><span class="k">k</span> </body> </html>字體圖標
字體圖標的下載
字體圖標的引入
注意：字體圖標也可不用復制右邊那個，用反斜杠“\”加那上面的代碼就能有同樣效果，如“\e947”
字體圖標的追加
css三角（用邊框border制作）
案例：京東三角
代碼在上面
css用戶界面樣式
更改用戶鼠標樣式cursor
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用戶界面樣式-鼠標樣式</title> </head> <body><ul><li style="cursor: default;">我是默認的小白鼠標樣式</li><li style="cursor: pointer;">我是鼠標小手樣式</li><li style="cursor: move;">我是鼠標移動樣式</li><li style="cursor: text;">我是鼠標文本樣式</li><li style="cursor: not-allowed;">我是鼠標禁止樣式</li></ul> </body> </html>
取消表單輪廓線input{outline:none;} textarea{outline:none;}
代碼，下面
取消文本框拖拽textarea{resize:none;}
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用戶界面樣式-表單輪廓和防止拖拽文本域</title><style>input, textarea {/* 取消表單輪廓 */outline: none;}textarea {/* 防止拖拽文本域 */resize: none;}</style> </head> <body><!-- 1. 取消表單輪廓 --><input type="text"><!-- 2. 防止拖拽文本域 --><textarea name="" id="" cols="30" rows="10"></textarea></body> </html>vertical-align垂直對齊屬性（垂直居中：vertical-align:middle;）
解決圖片底部默認空白縫隙問題
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圖片底側空白縫隙解決方案</title><style>div {border: 2px solid red;}img {/* vertical-align: middle; */display: block;}</style> </head><body><div><img src="蜥蜴女仆.gif" alt=""></div> </body></html>溢出文字省略號顯示
單行文本溢出省略號顯示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>單行文本溢出顯示省略號</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 這個單詞的意思是如果文字顯示不開自動換行 *//* white-space: normal; *//* 1.這個單詞的意思是如果文字顯示不開也必須強制一行內顯示 */white-space: nowrap;/* 2.溢出的部分隱藏起來 */overflow: hidden;/* 3. 文字溢出的時候用省略號來顯示 */text-overflow: ellipsis;}</style> </head> <body><div>啥也不說，此處省略一萬字</div> </body> </html>多行文本溢出省略號顯示
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>單行文本溢出顯示省略號</title><style>div {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 彈性伸縮盒子模型顯示 */display: -webkit-box;/* 限制在一個塊元素顯示的文本的行數 */-webkit-line-clamp: 3;/* 設置或檢索伸縮盒對象的子元素的排列方式 */-webkit-box-orient: vertical;}</style> </head><body><div>啥也不說，此處省略一萬字,啥也不說，此處省略一萬字此處省略一萬字</div> </body></html>布局技巧
margin負值的巧妙運用（消除重合的邊框）
如何讓鼠標經過盒子時顯示邊框
代碼見上
文字環繞浮動圖片簡化布局
圖片浮動，文字標準流即可（因為浮動最初設計出來就是為了做文字環繞效果的）
行內塊的巧妙運用（制作頁面/頁號跳轉）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行內塊的巧妙運用</title><style>* {margin: 0;padding: 0;}.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style> </head> <body><div class="box"><a href="#" class="prev"><<上一頁</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">>>下一頁</a>到第 <input type="text">頁<button>確定</button></div> </body> </html>三角形強化（案例：京東秒殺三角）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS三角強化的巧妙運用</title><style>.box1 {width: 0;height: 0;/* 把上邊框寬度調大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左邊和下邊的邊框寬度設置為0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右邊的邊框有顏色 */border-color: transparent red transparent transparent;/* 2. 樣式都是solid */border-style: solid;/* 3. 上邊框寬度要大， 右邊框 寬度稍小， 其余的邊框該為 0 */border-width: 100px 50px 0 0 ;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color:red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style> </head> <body><div class="box1"></div><div class="price"><span class="miaosha">￥1650<i></i></span><span class="origin">￥5650</span></div> </body> </html>css初始化（重新設置瀏覽器樣式）（復制粘貼一坨代碼）
京東初始化代碼：
使用時直接粘貼到style文件頭部即可
style.css
/* 把我們所有標簽的內外邊距清零 */ * {margin: 0;padding: 0 } /* em 和 i 斜體的文字不傾斜 */ em, i {font-style: normal } /* 去掉li 的小圓點 */ li {list-style: none }img {/* border 0 照顧低版本瀏覽器 如果 圖片外面包含了鏈接會有邊框的問題 */border: 0;/* 取消圖片底側有空白縫隙的問題 */vertical-align: middle }button {/* 當我們鼠標經過button 按鈕的時候，鼠標變成小手 */cursor: pointer }a {color: #666;text-decoration: none }a:hover {color: #c81623 }button, input {/* "\5B8B\4F53" 就是宋體的意思 這樣瀏覽器兼容性比較好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif }body {/* CSS3 抗鋸齒形 讓文字顯示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666 }.hide, .none {display: none } /* 清除浮動 */ .clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0 }.clearfix {*zoom: 1 }總結
以上是生活随笔為你收集整理的web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flask流式响应
- 下一篇： web前端入门学习 css（9）广义的h