整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
通常我們?cè)趯慽nput時(shí)，它的背景文字框都是灰色的，樣式很單一，其實(shí)它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實(shí)現(xiàn)輸入框的美化。接下來，就為大家展示下：
HTML：
CSS：
效果：
對(duì)于input輸入框的背景提示信息(placeholder)的美化雖然只是對(duì)網(wǎng)站應(yīng)用的小小點(diǎn)綴，但正是這樣細(xì)節(jié)上的小差別將你的網(wǎng)站和別人的網(wǎng)站區(qū)別開來。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
先讓我們回顧下前端入門——html 超鏈接的用法 <a href="url"> , 超鏈接是一個(gè)非常偉大的發(fā)明，它鏈接了整個(gè)互聯(lián)網(wǎng)，沒有它就沒有互聯(lián)網(wǎng)。
超鏈接在發(fā)明之初就給它設(shè)計(jì)了一個(gè)默認(rèn)的樣式，就是藍(lán)色帶下劃線的樣式，如下圖：
默認(rèn)樣式
關(guān)于為什么超鏈接是藍(lán)色帶下劃線的歷史，可以參考這里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
當(dāng)網(wǎng)頁(yè)變得越來越豐富，用戶的需求越來越高的時(shí)候，這樣的樣式已經(jīng)不符合大眾的審美，所以通過css來美化超鏈接非常有用和有趣。
鏈接可以使用任何 CSS 屬性（例如 color、font-family、background 等）來設(shè)置樣式。
如下圖：
除此之外，可以根據(jù)鏈接狀態(tài)來設(shè)置不同樣式，鏈接狀態(tài)分別有：
如下示例：
/* 未被訪問的鏈接 */
a:link {
color: red;
}
/* 已被訪問的鏈接 */
a:visited {
color: green;
}
/* 將鼠標(biāo)懸停在鏈接上 */
a:hover {
color: hotpink;
}
/* 被選擇的鏈接 */
a:active {
color: blue;
}未被訪問的鏈接
已被訪問的鏈接
將鼠標(biāo)懸停在鏈接上
被選擇的鏈接
如果為多個(gè)鏈接狀態(tài)設(shè)置樣式，請(qǐng)遵循如下順序規(guī)則：
以上是鏈接的各種偽類，描述了鏈接的不同狀態(tài)，你可以試試在不同狀態(tài)下給設(shè)置不同的屬性，比如背景色，字體或者文本修飾等等。
鏈接通常用來當(dāng)做按鈕使用，點(diǎn)擊它跳轉(zhuǎn)頁(yè)面或執(zhí)行一些事件或js函數(shù)。如下示例：
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}定義了一個(gè)背景色為紅色的按鈕，如下圖：
注意：如果想在點(diǎn)擊這個(gè)按鈕后禁止跳轉(zhuǎn)頁(yè)面，可以給href屬性設(shè)置javascript：void();,在以后會(huì)講到JavaScript在網(wǎng)頁(yè)中的使用，這里你已經(jīng)看到，在href屬性中通過Javascript：的形式可以執(zhí)行一段js語句或函數(shù)，這里void()就是阻止鏈接跳轉(zhuǎn)。
上面只是一個(gè)簡(jiǎn)單的例子，當(dāng)然你也可以制作更漂亮的按鈕，比如加上圓角、陰影、或漸變背景等。
當(dāng)鼠標(biāo)移動(dòng)到鏈接上時(shí)，你會(huì)看到鼠標(biāo)變成一個(gè)手形，通過css cursor 屬性可以改變鼠標(biāo)指針的形狀，如下圖：
可以嘗試按照上面的屬性依次練習(xí)一遍，鏈接的樣式到此就介紹完了，感謝關(guān)注。
上篇：前端入門——css字體和文本
、頁(yè)面使用CSS的好處：
有效的傳遞頁(yè)面信息。
使用CSS美化過的頁(yè)面文本，使頁(yè)面漂亮、美觀，吸引用戶。
可以很好的突出頁(yè)面的主題內(nèi)容，使用戶第一眼可以看到頁(yè)面主要內(nèi)容。
具有良好的用戶體驗(yàn)。
2、美化網(wǎng)頁(yè)的一些基本樣式
A:字體樣式：
font-family設(shè)置字體類型font-family:"隸書";
font-size設(shè)置字體大小font-size:12px;
font-style設(shè)置字體風(fēng)格font-style:italic;
font-weight設(shè)置字體的粗細(xì)font-weight:bold;
font在一個(gè)聲明中設(shè)置所有字體屬性font:italic bold 36px "宋體";
舉例：
body{font-family: Times,"Times New Roman", "楷體";}
h1{font-size:24px;} 單位->px：像素
h2{font-style:oblique;}
p{font-weight:bold;}
p span{font:oblique bold 12px "楷體";}
B:文本屬性：
color設(shè)置文本顏色color:#00C;
text-align設(shè)置元素水平對(duì)齊方式text-align:right;
text-indent設(shè)置首行文本的縮進(jìn)text-indent:20px;
line-height設(shè)置文本的行高line-height:25px;
text-decoration設(shè)置文本的裝飾text-decoration:underline;
C:排版文本段落：
水平對(duì)齊方式：text-align：left|right|center|justify;
left把文本排列到左邊。默認(rèn)值：由瀏覽器決定
right把文本排列到右邊
center把文本排列到中間
justify實(shí)現(xiàn)兩端對(duì)齊文本效果
首行縮進(jìn)：text-indent：em或px
行高：line-height：px
文本修飾：text-decoration:none|underline|overline|line_through
值說明
none默認(rèn)值，定義的標(biāo)準(zhǔn)文本
underline設(shè)置文本的下劃線
overline設(shè)置文本的上劃線
line-through設(shè)置文本的刪除線
垂直對(duì)齊方式：vertical-align屬性：middle、top、bottom
文本陰影：text-shadow : color x-offset y-offset blur-radius;
D:背景顏色和背景圖片：
background-color:"red";
background-image:url(圖片路徑);
background-repeat:
沿水平和垂直兩個(gè)方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
background-position:X、Y方向關(guān)鍵詞 水平方向的關(guān)鍵詞：left、center、right
垂直方向的關(guān)鍵詞：top、center、bottom
舉例：
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
線性漸變：linear-gradient ( position, color1, color2,…)
3、舉例：
<head>
<title>家用電器</title>
</head>
<link rel="stylesheet" href="jiayongdianqi.css">
<body>
<div class="container">
<h2>家用電器</h2>
<div class="type">
<h6><a href="#">大家電</a></h6>
<ul>
<li> <a href="#">平板電視</a> <a href="#">洗衣機(jī)</a> <a href="#">冰箱</a></li>
<li> <a href="#">空調(diào)</a> <a href="#">煙機(jī)/灶具</a> <a href="#"> 熱水器</a></li>
<li> <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li>
</ul>
<h6><a href="#">生活電器</a></h6>
<ul>
<li> <a href="#">電風(fēng)扇</a> <a href="#">凈化器</a> <a href="#">吸塵器</a></li>
<li> <a href="#">凈水設(shè)備</a> <a href="#">掛燙機(jī)</a> <a href="#"> 電話機(jī)</a></li>
</ul>
<h6><a href="#">廚房電器</a></h6>
<ul>
<li> <a href="#">榨汁機(jī)</a> <a href="#">電壓力鍋</a> <a href="#">電飯煲</a></li>
<li> <a href="#">豆?jié){機(jī)</a> <a href="#">微波爐</a> <a href="#"> 電磁爐</a></li>
</ul>
<h6><a href="#">五金家裝</a></h6>
<ul>
<li> <a href="#">淋浴/水槽</a> <a href="#">電動(dòng)工具</a> <a href="#">手動(dòng)工具</a></li>
<li> <a href="#">儀器儀表 </a> <a href="#">浴霸/排氣 </a> <a href="#"> 燈具</a></li>
</ul>
</div>
</div>
</body>
</html>
li{
/* 去圓點(diǎn) */
list-style: none;
}
/* 分類頁(yè)面總寬度 */
.container{
width: 500px;
}
a{
/* 去超鏈接下劃線 */
text-decoration: none;
}
/* 大標(biāo)題字體 */
.container>h2{
font-size: 18px;
color: white;
font-weight: bolder;
line-height: 50px;
text-indent: 2px;
/*從上到下，0%開始顏色。50%顏色。70%顏色 */
background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);
}
css代碼：
/* 所有電器分類內(nèi)容 */
.type{
/* 首行縮進(jìn) */
text-indent: 4.5em;
/* 左外邊距40px */
margin-left: 40px;
}
/* 電器分類 */
.type>h6{
font-size: 14px;
font-weight: bolder;
line-height: 30px;
background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);
}
/* 電器分類中的A標(biāo)簽 */
.type>h6>a{
color:#0467ac;
}
/* 電器分類中的A標(biāo)簽鼠標(biāo)懸浮效果 */
.type>h6>a:hover{
text-decoration: underline;
}
/* 分類內(nèi)容字體 */
.type>ul>li{
font-size: 12px;
line-height: 26px;
}
/* 分類內(nèi)容字體里面的A標(biāo)簽 */
.type>ul>li>a{
color: #969696;
}
/* 分類內(nèi)容字體里面的A標(biāo)簽懸浮效果 */
.type>ul>li>a:hover{
color: #804000;
text-decoration: underline;
}
4、效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
