序
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类。
单选框
多个选项的单选，name 相同。默认选项：checked = “checked”;
CSS 实现点击按钮弹出提示框
原理：
a 标签点击改变页面链接中的 hash 部分。:target 选择器可以选中和页面 hash 相同的标签（标签的 id 和页面 hash 相同）。
<!DOCTYPE html>
<html lang="en">
<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">Open Model</a>
<div class="model" id="model">
<h1>这是一个弹框</h1>
<a href="#">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 。 segmentfault.com/a/119000001…
百度页面二维码区域悬停变色
利用 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
