整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
廓線(outstyle)
比較常見于表單和鏈接等 。
outline-style:none; 取消谷歌、360等藍色邊框
:focus 獲得焦點的狀態, 鼠標的光標就是焦點
.username:focus{ /*獲得焦點的狀態*/
border:1px dashed pink;
background-color:#FFF7FB;
color:pink;
}取消表單邊框
因為表單在不同瀏覽器里面, 以后不同的顯示方式。
所以, 一般情況下, 我們會把所有的表單都去掉邊框。
border: 0 none; 兼容性更好的寫法Label 標簽
<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="請輸入..." />這樣, 我們點擊搜索一下, 光標就跳到了相應id的 input 里面了
完整實例:
般我們在做頁面涉及字體的時候，最多就是換個color換個font-family，在空閑時間之時，我們可以自己動手，看看能不能“創造”出一些CSS字體樣式呢～體現下字體的文藝范！下面就來說說有關css美化文字的一些常見做法！
透明文字：
用rgba調整透明度
用opacity調整遮罩
這兩者區別是用rgba只是對文字有透明度，而opacity對整個div都有遮罩影響
模糊文字
可以用text-shadow喝-webkit-text-fill-color組合，得出模糊文字，如下：
鏤空文字
可以用-webkit-text-stroke來給文字外圍描邊，然后在把文字的填充顏色設置為透明，這樣就能只顯示出文字的外圍的描邊
漸變文字
background可以做到漸變顏色
圖片背景文字
在一些網站經常看到類似于這樣炫酷的效果
以上就是今天要說的一些CSS美化文字方法，還有很多方法，等一一總結出來再給小伙伴們看，謝謝大家支持！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
p{
font-family:"宋體";
font-size:14px;
}
.p2{
font-style:italic;
}
.p3{
font-weight:bold;
}
.p4{
font-family:"微軟雅黑";
}
.p5{
font-size:36px;
}
</style>
</head>
<body>
<p class="p1">這是第一行(樣式為：標簽選擇器p中的樣式)</p>
<p class="p2">這是第二行(樣式為：斜體)</p>
<p class="p3">這是第三行(樣式為：加粗)</p>
<p class="p4">這是第四行(樣式為：字體變成微軟雅黑)</p>
<p class="p5">這是第五行(樣式為：字體大小為36px)</p>
</body>
</html>
效果演示圖如下所示：
1.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
.div1{
width:500px;
border:1px solid #000;
padding:20px;
}
.p1{
color:red;
}
.p2{
text-align:center;
}
.p3{
line-height:50px;
}
.p4{
text-indent:2em;
}
.p5{
text-decoration:line-through;
}
.div2{
border:1px solid red;
padding:20px;
}
.img1{
width:70px;
height:70px;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="div1">
<p class="p1">這是第一行(樣式為: 字體紅色)</p>
<p class="p2">這是第二行(樣式為：居中)</p>
<p class="p3">這是第三行(樣式為：行高50px)</p>
<p class="p4">這是第四行(樣式為：縮進2em)</p>
<p class="p5">這是第五行(樣式為：刪除線)</p>
<div class="div2">
<img src="tu24.png" alt="" class="img1">這是第六行(樣式為：垂直居中)
</div>
</div>
</body>
</html>
演示效果如圖所示：
2.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
.div1{
width:500px;
height:500px;
background-color:#F1CCE8; //背景顏色
}
.div2{
width:100%;
height:100%;
background-image:url(tu24.png); // 插入背景圖片
background-repeat:no-repeat; //圖片不平鋪
background-position:center center; //背景圖片垂直水平居中
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
演示效果圖：
3.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:#F1CCE8;
padding:20px;
}
.ul1{
}
.ul2{
list-style-type:none;
}
.ul3{
list-style-image:url(person02.png);
list-style-position:outside;
}
</style>
</head>
<body>
<div class="div1">
<ul class="ul1">
<li>第一隊</li>
<li>第一隊</li>
<li>第一隊</li>
</ul>
<ul class="ul2">
<li>第二隊</li>
<li>第二隊</li>
<li>第二隊</li>
</ul>
<ul class="ul3">
<li>第三隊</li>
<li>第三隊</li>
<li>第三隊</li>
</ul>
</div>
</body>
</html>
演示效果圖為：
4.png
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
