用H5+css3+js做出以下链接整个网页和效果

2019-06-25 19:28发布

https://anta.tmall.com/?spm=a1z10.10672-b-s.1997427721.d4918089.1a34b11fK1wPrf(动态效果用js做)

1条回答

  这段时间一直在学H5+CSS3+JS结合的前端框架开发,在这里总结一些心得体会。也好以便于以后开发的思考、思路。

 

         主要来说,H5用于大体界面的编写,如:需要一些基本的输入框、单选按钮、普通按钮、以及下拉选择框等。

 

而CSS3呢则是主要用于对整体界面细节化的修饰。比如:一个普通按钮,输入框边角默认是直角,那我们可以用CSS来改变其形状。还可以用来设置不同的样式。CSS是这三个最麻烦的,而且也是调试频率最大的。就好比我个人来说。在设置一个以白色图片为背景的界面。首先,界面的背景颜色肯定不能是白色,不然图片都跟背景色同样了,完全看不出图片,其次背景色也不能太深或者太淡。不然图片的一些细节地方就没那么明显,这就要在CSS中慢慢调试。这是因为在H5中取消了之前一些界面的布局样式,导致我们需要用CSS来替代。

 

         另外在CSS3中界面的排版也是一个主要的注意方面。或许有些人认为,可以都以DIV形式来排版。但是我要说的是,在对于做前端开发的人员来说,屏幕大小及分辨率的不同,会导致我们的界面在绝大部分的设备上能按照我们设计的来正常显示。但是对于一小部分的设备来说就很有可能会导致我们布局的设计会偏离正常的轨道。这就需要我们不断的调试。以便更好地满足不同的设备。在我自己设计的一个界面布局中,就出现过这样的一个问题:一个普通的提交按钮,我原本是要让它显示在离左边百分之20的地方。在我设置好外边距后能够正常显示,但是当我把整体界面拉大后会发现按钮它自己会以右边的边框为轴使整个按钮框往右边翻过去,当我缩回原先的屏幕大小或者更小时,界面的那个按钮又跳回原先离左边的百分之20.这样的结果肯定不是我想要的,所以要慢慢试样式,终于发现问题所在。原来是不能在整个DIV中设置边距的百分比,而是要在按钮中单独设置。在样式中‘#’是对应id属性,‘.’是对应class属性。

 

         在JS中的主要是要跟服务端打交道,实现数据交互。在JS中说到数据交互,主要以JSON格式跟XML格式这两种格式实现。我认为这两种格式主要还是JSON格式好,原因是JSON格式是以键值的形式存储便于使用,还有就是可以当做字符串来解析比XML格式更加简便。JS中,一般都会使用到AJAX,其作用与功能是用来与服务器进行异步通信。以达到无需刷新整个界面。

 

在我个人理解中是这样的,在使用AJAX中首先要判断客户端的浏览器是否支持。如果有必要的话可以判断发送的状态以及状态改变触发的事件。AJAX可使用open方法来与服务端进行连接并获取服务端的数据。最后通过send方法来发送交换数据。AJAX的核心是XMLHttpRequest();或者ActiveXObject(“Microsoft.XMLHTTP”);这两个对象的属性。最后可通过responseXml或者responseText来获取完整的回应数据。

 

总体来说,H5+CSS3显示界面的搭建,JS显示数据的交互。简单到中等项目主要的处理比重是CSS3>JS>H5,中等到难的项目为JS>CSS3>H5


一周热门 更多>