目錄
- 1. CSS三角
- 2. 界面樣式
-
- 2.1 cursor滑鼠光标形狀
- 2.2 input輸入框輸入文字時不改變邊框顔色
- 2.3 textarea不能拖拽改變大小
- 3. vertical-align屬性應用
- 4. 溢出的文字省略号顯示
-
- 4.1 單行文本溢出顯示省略号
- 4.2 多行文本溢出顯示省略号
- 5. CSS初始化
1. CSS三角
html檔案内容如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
.box {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
顯示效果如下
2. 界面樣式
界面樣式就是更改一些使用者操作樣式，提高使用者體驗
- 更改使用者的滑鼠樣式
- 表單輪廓
- 防止表單域拖拽
2.1 cursor滑鼠光标形狀
設定在對象上移動的滑鼠指針，采用何光标形狀。示例如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
</style>
</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>
顯示效果如下
2.2 input輸入框輸入文字時不改變邊框顔色
當我們選擇input輸入框，進行文字輸入的時候，邊框會改變顔色。如果想讓邊框不改變顔色，可以設定
outline: none
示例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
</style>
</head>
<body>
<input type="text" style="outline: none" />
</body>
</html>
2.3 textarea不能拖拽改變大小
textarea預設可以在右下角進行拖拽，改變輸入框的大小。但是會影響布局，是以需要設定不能拖拽
示例如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
</style>
</head>
<body>
<textarea style="resize: none">我是多行文本輸入标簽</textarea>
</body>
</html>
3. vertical-align屬性應用
隻針對于行内元素或者行内塊元素有效。經常用于設定圖檔或表單(行内塊元素)和文字的垂直對齊方式
vertical-align的可選值為：1. bottom: 圖檔的底線和文字的底線對齊，2. baseline：預設，圖檔的底線和文字的基線對齊，3. middle: 圖檔的中線和文字的中線對齊，4. top：圖檔的頂線和文字的頂線對齊
示例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="images/baidu.png">百度一下
</body>
</html>
顯示效果如下
4. 溢出的文字省略号顯示
4.1 單行文本溢出顯示省略号
示例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/*1. 先強制一行内顯示文本, 預設normal自動換行*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
我是一長串文字，此處省略一萬字
</div>
</body>
</html>
顯示效果如下
4.2 多行文本溢出顯示省略号
必須嚴格控制盒子的高度
示例如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 100px;
height: 46px;
background-color: pink;
/*1. 超出的部分隐藏*/
overflow: hidden;
/*2. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*3. 彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*4. 限制在一個塊元素顯示的文本的行數*/
-webkit-line-clamp: 2;
/*5. 設定或檢索伸縮盒對象的子元素的排列方式*/
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
我是一長串文字，此處省略一萬字
</div>
</body>
</html>
顯示效果如下
5. CSS初始化
不同浏覽器對有些标簽的預設值是不同的，為了消除不同浏覽器對HTML文本呈現的差異，是以需要進行CSS初始化
CSS初始化參考如下
* {
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 {
/*"\5B8B\4F53"是宋體的Unicode編碼*/
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
}