CSS 內容總結(五)高階技巧
阿新 • • 發佈：2021-02-16
技術標籤：css
CSS 內容總結
1.精靈圖
-
為了有效地減少伺服器接收和傳送請求的次數，提高頁面的載入速度出現了CSS精靈技術
-
核心原理：將網頁中的一些小背景影象整合到一張大圖中，這樣伺服器只需要一次請求就可以了
- 使用
2.字型圖示
-
輕量級
-
靈活性
-
相容性
-
字型圖示下載
- icomoon字型檔 http://icomoon.io
- 阿里iconfont字型檔 http://www.iconfont.cn/
-
使用
-
fonts複製到專案根目錄
-
引入（引入程式碼百度）
-
去生成頁面複製用到的框框
-
css中 font-family ：’icommon‘；
-
-
追加
- import icons
- 選中 select.json-》yes
- 選中下載
3.CSS三角
<style>
.box1 {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: red;
border-right-color 
4.CSS使用者介面樣式
-
滑鼠樣式 cursor
屬性值 描述 default 小白 預設 pointer 小手 move 移動 十字架 text 文字 not-allowed 禁止 -
輪廓線 outline：none
-
防止文字域拖拽 resize：none
5.vertical-align
-
垂直對齊 （行內元素 行內塊元素）
top：頂部
middle：中線
base：基線
bottom：底線
-
解決圖片低部預設空白縫隙問題
1.給圖片新增vertical-align：top頂部/middle中線/bottom底線
2.給圖片轉為塊元素
6.溢位的文字省略號顯示
- 單行文字溢位
- white-space：nowrap
- overflow：hidden
- text-overflow：ellipsis
- 多行文字溢位
- overflow：hidden
- text-overflow：ellipsis
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
7.常見的佈局技巧
-
margin負值的應用
<style> li { list-style: none; float: left; width: 200px; height: 200px; border: 1px solid slateblue; margin-left: -1px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>加 ：margin-left: -1px;前
加 ：margin-left: -1px;後
-
文字圍繞浮動元素
<style> .box { width: 300px; height: 70px; background-color: slateblue; } .box div { width: 120px; height: 60px; float: left; } .box div img { width: 100%; height: 100%; } </style> </head> <body> <div class="box"> <div><img src="img/QQ截圖20210203221100.png"></div> <p>發覺時空裂縫好看的活佛阿爾方洪偉</p> </div> </body>
- 行內塊的巧妙運用
<style>
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
background-color: #f7f7f7;
border: 1px #ccc solid;
line-height: 36px;
text-decoration: none;
/* 去掉下劃線 */
}
.box .prev {
width: 85px;
}
.box .te {
background-color: transparent;
border: none;
}
.box input {
width: 36px;
height: 36px;
border: 1px #ccc solid;
outline: none;
}
.box button {
width: 85px;
height: 36px;
border: 1px #ccc solid;
background-color: #f7f7f7;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一頁</a>
<a href="#" class="te">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="te">. . .</a>
<a href="#" class="prev">>>下一頁</a>
<label>到第<input>頁</label>
<button>確定</button>
</div>
</body>
- css三角強化
<style>
.bo {
width: 400px;
height: 150px;
background-color: blue;
}
.box {
width: 200px;
height: 150px;
background-color: red;
float: left;
}
.box1 {
float: left;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/* border: 50px solid transparent;
border-left: 50px solid red;
border-right: 50px solid transparent;
border-top: 0px solid green;
border-bottom: 150px solid transparent; */
border-color: green transparent transparent red;
border-style: solid;
border-width: 0px 50px 150px 50px;
}
</style>
</head>
<body>
<div class="bo">
<div class="box"></div>
<div class="box1"></div>
</div>
</body>
<style>
.bo {
width: 400px;
height: 150px;
background-color: blue;
text-align: center;
line-height: 150px;
font-size: 50px;
}
.box {
position: relative;
width: 250px;
height: 150px;
background-color: red;
float: left;
font-weight: 700;
}
.box1 {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/* border: 50px solid transparent;
border-left: 50px solid red;
border-right: 50px solid transparent;
border-top: 0px solid green;
border-bottom: 150px solid transparent; */
border-color: transparent blue transparent burlywood;
border-style: solid;
border-width: 150px 50px 0px 0px;
}
.bo .shanchu {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="bo">
<div class="box">
$1200
<div class="box1"></div>
</div>
<div class="shanchu">$1300</div>
</div>
</body>
8.CSS初始化
<style>
* {
margin: 0;
padding: 0
}
em,
i {
font-style: normal
}
li {
list-style: none
}
img {
border: 0;
vertical-align: middle
}
button {
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
-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
}
</style>
“\5B8B\4F53”:宋體