整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通常我們在寫input時，它的背景文字框都是灰色的，樣式很單一，其實它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實現輸入框的美化。接下來，就為大家展示下：
HTML：
CSS：
效果：
對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
先讓我們回顧下前端入門——html 超鏈接的用法 <a href="url"> , 超鏈接是一個非常偉大的發明，它鏈接了整個互聯網，沒有它就沒有互聯網。
超鏈接在發明之初就給它設計了一個默認的樣式，就是藍色帶下劃線的樣式，如下圖：
默認樣式
關于為什么超鏈接是藍色帶下劃線的歷史，可以參考這里：https://baijiahao.baidu.com/s?id=1710334071632114373&wfr=spider&for=pc
當網頁變得越來越豐富，用戶的需求越來越高的時候，這樣的樣式已經不符合大眾的審美，所以通過css來美化超鏈接非常有用和有趣。
鏈接可以使用任何 CSS 屬性（例如 color、font-family、background 等）來設置樣式。
如下圖：
除此之外，可以根據鏈接狀態來設置不同樣式，鏈接狀態分別有：
如下示例：
/* 未被訪問的鏈接 */
a:link {
color: red;
}
/* 已被訪問的鏈接 */
a:visited {
color: green;
}
/* 將鼠標懸停在鏈接上 */
a:hover {
color: hotpink;
}
/* 被選擇的鏈接 */
a:active {
color: blue;
}未被訪問的鏈接
已被訪問的鏈接
將鼠標懸停在鏈接上
被選擇的鏈接
如果為多個鏈接狀態設置樣式，請遵循如下順序規則：
以上是鏈接的各種偽類，描述了鏈接的不同狀態，你可以試試在不同狀態下給設置不同的屬性，比如背景色，字體或者文本修飾等等。
鏈接通常用來當做按鈕使用，點擊它跳轉頁面或執行一些事件或js函數。如下示例：
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;
}定義了一個背景色為紅色的按鈕，如下圖：
注意：如果想在點擊這個按鈕后禁止跳轉頁面，可以給href屬性設置javascript：void();,在以后會講到JavaScript在網頁中的使用，這里你已經看到，在href屬性中通過Javascript：的形式可以執行一段js語句或函數，這里void()就是阻止鏈接跳轉。
上面只是一個簡單的例子，當然你也可以制作更漂亮的按鈕，比如加上圓角、陰影、或漸變背景等。
當鼠標移動到鏈接上時，你會看到鼠標變成一個手形，通過css cursor 屬性可以改變鼠標指針的形狀，如下圖：
可以嘗試按照上面的屬性依次練習一遍，鏈接的樣式到此就介紹完了，感謝關注。
上篇：前端入門——css字體和文本
、頁面使用CSS的好處：
有效的傳遞頁面信息。
使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶。
可以很好的突出頁面的主題內容，使用戶第一眼可以看到頁面主要內容。
具有良好的用戶體驗。
2、美化網頁的一些基本樣式
A:字體樣式：
font-family設置字體類型font-family:"隸書";
font-size設置字體大小font-size:12px;
font-style設置字體風格font-style:italic;
font-weight設置字體的粗細font-weight:bold;
font在一個聲明中設置所有字體屬性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設置文本顏色color:#00C;
text-align設置元素水平對齊方式text-align:right;
text-indent設置首行文本的縮進text-indent:20px;
line-height設置文本的行高line-height:25px;
text-decoration設置文本的裝飾text-decoration:underline;
C:排版文本段落：
水平對齊方式：text-align：left|right|center|justify;
left把文本排列到左邊。默認值：由瀏覽器決定
right把文本排列到右邊
center把文本排列到中間
justify實現兩端對齊文本效果
首行縮進：text-indent：em或px
行高：line-height：px
文本修飾：text-decoration:none|underline|overline|line_through
值說明
none默認值，定義的標準文本
underline設置文本的下劃線
overline設置文本的上劃線
line-through設置文本的刪除線
垂直對齊方式：vertical-align屬性：middle、top、bottom
文本陰影：text-shadow : color x-offset y-offset blur-radius;
D:背景顏色和背景圖片：
background-color:"red";
background-image:url(圖片路徑);
background-repeat:
沿水平和垂直兩個方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
background-position:X、Y方向關鍵詞 水平方向的關鍵詞：left、center、right
垂直方向的關鍵詞：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="#">洗衣機</a> <a href="#">冰箱</a></li>
<li> <a href="#">空調</a> <a href="#">煙機/灶具</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="#">電風扇</a> <a href="#">凈化器</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="#">榨汁機</a> <a href="#">電壓力鍋</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="#">淋浴/水槽</a> <a href="#">電動工具</a> <a href="#">手動工具</a></li>
<li> <a href="#">儀器儀表 </a> <a href="#">浴霸/排氣 </a> <a href="#"> 燈具</a></li>
</ul>
</div>
</div>
</body>
</html>
li{
/* 去圓點 */
list-style: none;
}
/* 分類頁面總寬度 */
.container{
width: 500px;
}
a{
/* 去超鏈接下劃線 */
text-decoration: none;
}
/* 大標題字體 */
.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代碼：
/* 所有電器分類內容 */
.type{
/* 首行縮進 */
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標簽 */
.type>h6>a{
color:#0467ac;
}
/* 電器分類中的A標簽鼠標懸浮效果 */
.type>h6>a:hover{
text-decoration: underline;
}
/* 分類內容字體 */
.type>ul>li{
font-size: 12px;
line-height: 26px;
}
/* 分類內容字體里面的A標簽 */
.type>ul>li>a{
color: #969696;
}
/* 分類內容字體里面的A標簽懸浮效果 */
.type>ul>li>a:hover{
color: #804000;
text-decoration: underline;
}
4、效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
