序
3月底抽時間手寫了百度頁面 html + css。練練手鞏固鞏固基礎。水準比較弱隻能實作基本樣子。過程中遇到不少問題和需要注意的地方。記錄一下加深印象。從中也發現自身不少問題。css 代碼重複率比較高。後期會補上 sass、scss。class 命名也不規範而且經常絞盡腦汁想不出名字。後期再加強。
demo後期上傳後會補上連結🔗。
a 标簽
a 标簽去除下劃線：
text-decoration: none;
點選 a 标簽跳轉頁面：
target = "_black";
阻止 a 标簽頁面重新整理：
href = "javascript: void(0)";
或
href = “#”
a 标簽懸停顯示 div: 通過上下層 :hover （僞類:link :visited :hover :actived）
在非 a 标簽上顯示手形光标:
cursor: pointer;
/*cursor: hand; (IE 5)*/
常用 cursor 屬性還有：
| 屬性值 | 含義 |
|---|---|
| wait | 等待/沙漏 |
| text | 文字/編輯 |
| auto | 自動 |
focus 時去元素邊框:
outline: none;
關于百度輸入框中語音搜尋和圖檔搜尋的圖示
iconfont懸停改變顔色？？
或者SVG畫圖？？
✅圖檔(雪碧圖)
去除 ul 中的點:
list-style:none;
iconfont 圖示顯示
icon 圖示引入 html。或，SVG 直接引入 html。（SVG 更改大小：font-size 或 width、height；改顔色：fill）
footer “吸底”效果——即 stick-footer 布局
三種布局
在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經曆過。它可以概括如下：如果頁面内容不夠長的時候，頁腳塊粘貼在視窗底部；如果内容足夠長時，頁腳塊會被内容向下推送，我們看到的效果就如下面兩張圖這樣。這種效果基本是無處不在的，很受歡迎。
一、為内容區域添加最小的高度。
二、使用flex布局。就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。
三、在content的外面可以添加一個wrapper這種方法就是在content的外面添加一個包裹容器。
另外，為了保證相容性，需要在wrapper上添加clearfix類。
https://blog.csdn.net/gao_xu_520/article/details/80305170?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&dist_request_id=1328626.11860.16153807185608857&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control
單選框
多個選項的單選，name 相同。預設選項：checked = “checked”;
CSS 實作點選按鈕彈出提示框
原理：
a 标簽點選改變頁面連結中的 hash 部分。:target 選擇器可以選中和頁面 hash 相同的标簽（标簽的 id 和頁面 hash 相同）。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"/>
<title>純CSS彈框</title>
<style>
.model{
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
}
.model:target{
display:block;
}
</style>
</head>
<body>
<a href="#model" target="_blank" rel="external nofollow" >Open Model</a>
<div class="model" id="model">
<h1>這是一個彈框</h1>
<a href="#" target="_blank" rel="external nofollow" >Close Model</a>
</div>
</body>
</html>
CSS 實作僞類 hover 離開時平滑過渡效果
由于hover僞類添加的動畫效果，僅當滑鼠放在元素上時會被觸發，而當滑鼠離開時，效果會中斷，會顯得很生硬。
大多數人的想法都是使用 js 的 onmouseover 和 onmouseleave 事件來實作動畫效果。但 css 一樣可以實作。
由于div元素隻有在 :hover 僞類觸發的時候，效果才能加到 div 元素上。
當滑鼠離開div元素的時候，:hover 僞類将不再生效，瞬間丢掉 hover 裡寫的動畫效果。
可在原本元素上再寫一個一模一樣的 transition 效果，将離開斷掉的動畫效果續接上。
注：此時 display:block 變為 display:none 就不好使了，可用 visibilty:1 變為 visibilty:0 。
https://segmentfault.com/a/1190000010583130
百度頁面二維碼區域懸停變色
利用 background-image 屬性。
當滑鼠懸停時更換背景圖檔。（background-repeat: norepeat / repeat-x / repeat-y; background-position: 第一個 x 軸位置 (left / center / right / 30px) 第二個 y 軸位置（left / center / right / 30px））
清除浏覽器自帶 search 輸入框的叉号
谷歌浏覽器：
input::-webkit-search-cancel-button {
display: none;
}
IE 浏覽器：
input[type = search]::-ms-clear{
display: none;
}
存在問題 / 可否用 CSS 實作？
問題：滑鼠懸停語音與照片圖示時，輸入邊框顔色不要抖動
問題：輸入框輸入文字 聯想，可否用 CSS 實作？
問題：熱榜list布局 不用 margin-bottom 如何實作 li 居中?
❓問題：點選“換一換”，實作 ul 清單變換。可否使用 CSS 點選一次 div 變化。但隻能實作兩個 div 變換？
問題：變為手機端依舊保持布局？
問題：邊框縮小時，“設定”和“登入”需要被掩蓋
問題：“搜尋設定” 随螢幕移動而移動
問題：“搜尋設定”彈框=> 單選不變色
問題：頁面重新整理之後 搜尋框自動獲得焦點
問題：螢幕縮小 滾動軸出現 且footer吸底
問題：css重複性高，class命名 => SASS，SCSS
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)