CSS 表單美化-outstyle

廓線(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 里面了

完整實例:

、美化網頁元素

本章目標：

2.1、為什么使用CSS

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

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

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

在這里插入圖片描述

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

一.CodeZen代碼轉圖像工具

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

二.Carbon代碼轉圖像的開源項目

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

三.Codeimg.io 創建代碼圖像的工具

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

四.Glorious Demo開源的JavaScript庫

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

歡迎關注云碼素材，交流分享! 云碼素材原創作品，更多精品資源下載，技術分享請關注，私信云碼素材！

*請認真填寫需求信息，我們會在24小時內與您取得聯系。