图文教程

【以上教程已经尽量去写的详细了，有没有说到的地方 理解下，回复里面问就好。上面只是对搜索进行了简单的分析，至于如何将搜索做成你设计的效果，只需要修改input里面的style的样式就可以了。】

下面是上面教程里面的搜索代码：

<!--店铺搜索条代码-->

<form action="http://cisdesign.taobao.com/search.htm" method="get" target="_blank">

样式操作

通过 JavaScript 动态修改页面样式。

CSS 对应 DOM 对象

<link rel="stylesheet" type="text/css" href="sample.css">
// var element = document.querySelector('link');
// 对应于 element.sheet
<style type="text/css" media="screen">
 body {
 margin: 30px
 }
</style>
// var element = document.querySelector('style');
// 对应于 element.sheet
// 整个页面的全部样式（不包括行内样式）
document.styleSheets
<p style="color:red">Text Color</p>
// var element = document.querySelector('p');
// 对应于 element.style

前端就是一个大杂烩，做为前端工程师需要掌握的知识点太多了。各种长度单位需要我们去了解

除了这些还有印刷单位 pt pc pt cm mm in....

毫无疑问现在统治前端的长度单位还是px, 一个相遇对于屏幕分辨率的像素单位。

px: 全称pixel（像素）是图像的基本采样单位，它不是一个确定的物理量，也不是一个具体的点或者小方块（虽然可以用点和小方块来呈现），而是一个抽象概念。它是一个相对单位，相对于屏幕分辨率，而不是视窗大小。像素越高像px长度越小。

div+css网页标准布局

DIV全称 division意为“区块、分割”,DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域。通过DIV将复杂的页面进行细分块，可以将问题细分一个一个解决，所以通过DIV将页面分块是一个关键的工作，也是决定最终效果与质量的前提。

css

CSS (Cascading Style Sheet)，中文翻译为层叠样式表，是

1 CSS

#goTopBtn, #goBottom, #shangy, #xiay, #menuPage, #lPage, #fPage{

width: 18px;

line-height: 1.2;

padding: 5px 0;

font-size: 12px;

text-align: center;

position: fixed;

right: 10px;