总结前台开发布局，应用及js使用

总结前台开发布局，应用及js使用：

 

前台的页面,关于css，js，及html位置的安排，主要是基于页面加载的顺序是从上往下加载，所以一般的安排方式是先写css然后是html最后是js，

css放在页面之前主要是因为先加载样式，这样在界面上显示的元素可以正常按css的样式显示，另外，css可以放在页面上的任意位置，只要在规定样式的样式之前即可。另外一个需要注意的是，相同元素的css是后面的样式会覆盖前面的样式，本身的样式会覆盖掉父元素上定义的样式。在定义css样式时，可以使用多个class命名来规定样式，但是这种方式一般适用于，前面的class是抽调出来整体布局样式的统一，后面的class的样式时单独页面的显示做处理的，愈靠近元素的样式愈能起作用。

Css样式起作用时还有一个是相同的样式，可以使用，分割，前后的是两个相互独立的样式对应的元素。

Js的使用，一般情况下，js是放在html的body之下的，但是有两种情况需要注意，一种是js出现在页面控制显示时，需要在使用js之前加载需要的js，另外一个是当加载的js需要使用引入其他的js时，需要有个加载js的顺序。

Html在使用时，尽量使用有语义的元素，有语义的意思是即使是我们定义的css样式不能加载，本身的css样式也是可以保证基础的显示，例如，ul li等，但是像div如果没有样式会叠加在一起（尽量不要使用）。

另外格式一定要规范，对齐，结束等。

在一个需要注意的是：布局的安排，例如form需要框住两个div（form的body和form的submit等），另外的辅助型的div(例如弹出对话框等)需要放在form之外。

 

Button的处理：

<div class=”left”>

<div class=”right”>

<div class=”center”>

<span>提交</span>

</div>

</div>

<div>

 

还有一种是左右结构的：

<a class=”left”><span class=”right”></span></a>

主要是为了处理圆角，效果，另外是为了重用，统一好维护。

 

Js的处理：主要是涉及到三个位置,

第一是：匿名函数的定义及使用，

        如果使用加载页面时直接加载js，可以使用定义匿名函数并直接执行就可以了。

例如：(function(){})(),其中(function(){})类似于定义了一个function fun（）{}函数，(function(){})()类似于调用fun（）所以是立即执行，

        还有一种方式，等价于该方式：在js里使用先声明，在调用匿名函数：

 例如：var fun = function（）{}；

       Fun（）；

 

第二： 抽出来考虑到重用性问题，因为我们将函数定义及立即执行写入js里，在页面上直接引入js就可以直接使用。

第三：原型的扩展。

 

 

 

 

用户体验：细致

<input class="test" name="test" type="radio"  id="test1" value=""/>

   <label for="test1">测试1</label>

<br/>

 <label> <input class="test" type="radio" name="test" id="test2" value=""/>测试2</label>