如何用ppt形式做网站/seo优化seo外包
【1】模仿CSDN里的搜索框布局和交互效果
【2】分析下大概的思路
1）整体看过去，分为左右结构，然后外层使用一个父级div包着，父级背景设置灰色#f0f0f5
2）左边使用input标签，右边使用a标签，a标签嵌套一个img标签，搜索图标
或者左边使用input标签，右边使用button标签，button背景就是搜索图标图片
3）input和a标签都有一定的圆角边框
4）点击input进入焦点时，input宽度会变大，右边区域的菜单会变小，需要一个动态宽度效果，这里可以使用calc样式函数来实现
5）点击input进入焦点时，右边的图标按钮区域渐变出现红色背景
6）点击input进入焦点时，加载热门下拉框列表
【3】实现过程探索
1）点击查看初始化样式文章
2）变身，布局和样式修饰
- 最外层固定宽度500px，高度32px，一般高宽度固定都是PC端布局方式，弹性布局样式display:flex，表示内部所有元素按占满一行的宽度进行布局，各个元素的宽度各种自身动态显示
- 块元素：默认情况下占据一行，比如：div标签
- 行内元素：和块元素相反，默认有一定的宽度，不会占一行
- 两者可以通过样式来相互转换
- float：浮动后的元素，很显然是变成了行内元素，同时默认情况下高宽度失效，所以上级没有设置高宽度时会变成0
- flex:1，放大、缩小、空间，是三个属性的简写
- 弹性布局：display:flex，可以用这个来实现，进入焦点后改变弹性布局内的宽度，结合calc函数来实现放大缩小输入框的效果
- 背景图和大小样式前后渲染问题：background-size样式一定要放在background:url之后，否则不起作用
- calc计算函数：width:calc(100% - 150px)，这里要特别注意减号左右两边一定要加空格，否则无效
<div style="padding:30px;"><div style="width:500px;height:32px;display:flex;"><div style="float:left;width:150px;height:32px;"></div><input placeholder="输入搜索内容" style="width:calc(100% - 3-182px);height:32px;float:left;border:none;padding-left:16px;outline:none;border-radius:5px 0 0 5px;-ms-flex: 1;-webkit-box-flex: 1;flex:1;" /><button style="display:inline-block;cursor:pointer;outline:none;width:40px;height:32px;float:left;border:none;border-radius:0 5px 5px 0;background: url(https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-black-search.png) no-repeat center center #e4e4e5;background-size:70%;"></button></div></div>
3）弹性布局实现input输入框伸缩效果
使用display:flex来实现，进入焦点后改变弹性布局内的宽度，结合calc函数来实现放大缩小输入框的效果
- 进入输入框焦点，输入框边长
- 离开输入框焦点，输入框恢复原长度
<script type="text/javascript">$(function () {$("#div").click(function () {return false;});$("input").click(function () {$("#div1").animate({ width: 0 }, 200);return false;});$(document).click(function () {$("#div1").animate({ width: 150 }, 200);});});
</script>
4）搜索框背景颜色变化
。。。
未完待续，有空继续更新