廓線(outstyle)

比較常見于表單和鏈接等 。

outline-style:none; 取消谷歌、360等藍色邊框

:focus 獲得焦點的狀態(tài), 鼠標的光標就是焦點

.username:focus{ /*獲得焦點的狀態(tài)*/
    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 里面了

完整實例:

、美化網(wǎng)頁元素

本章目標：

• 會使用CSS設置字體樣式和文本樣式
• 會使用CSS設置超鏈接樣式
• 會使用CSS設置列表樣式
• 會使用CSS設置背景樣式
• 會使用CSS設置漸變效果

2.1、為什么使用CSS

【查看淘寶頁面，讓學員觀察，重點記住了什么東西】 因此使用CSS樣式美化網(wǎng)頁文本具有如下意義。

1. 有效的傳遞頁面信息
2. 使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶
3. 可以很好的突出頁面的主題內(nèi)容，使用戶第一眼可以看到頁面主要內(nèi)容
4. 具有良好的用戶體驗

< span>標簽 < span>標簽 的作用：能讓某幾個文字或者某個詞語凸顯出來，從而添加對應的樣式！

<p>好好學習，<span>天天向上</span></p>

2.2、字體樣式

在這里插入圖片描述

為一名程序員，天天離不開的不是你媳婦，是你用鍵盤敲出來的代碼，一個好的碼農(nóng)，不光能寫代碼完成功能，還要能寫出來好代碼，什么是好代碼？好代碼不管用什么語言寫，層次分明，注釋明了，功能實現(xiàn)，代碼簡潔即可，今天給大家介紹幾個我常用的代碼美化工具，覺得有用有分享轉(zhuǎn)發(fā)，收藏了。

一.CodeZen代碼轉(zhuǎn)圖像工具

CodeZen是一個非常簡約的代碼轉(zhuǎn)圖像工具，就像操作文本編輯器一樣簡單，能快速將你的源代碼導出為具有語法風格的圖像。

二.Carbon代碼轉(zhuǎn)圖像的開源項目

Carbon是由Dawn Labs創(chuàng)建開發(fā)的一個代碼轉(zhuǎn)圖像的開源項目，目前在GitHub上擁有20000多顆星，每月活躍用戶超過50000。

三.Codeimg.io 創(chuàng)建代碼圖像的工具

Codeimg.io 是一個仍在測試中的創(chuàng)建代碼圖像的工具，目前發(fā)布了創(chuàng)建代碼圖像所需的基本功能。

四.Glorious Demo開源的JavaScript庫

Glorious Demo是一個開源的JavaScript庫，它提供了一個簡單的API來為你的代碼示例創(chuàng)建動畫。目前在GitHub擁有近3000顆星。

歡迎關(guān)注云碼素材，交流分享! 云碼素材原創(chuàng)作品，更多精品資源下載，技術(shù)分享請關(guān)注，私信云碼素材！