当前位置: 首页 > Web前端 > CSS

js调试界面

时间:2023-03-31 01:35:47 CSS

当我们完成前端工作后,很多时候,我们需要将我们的数据与后端接口对接起来。也就是说,我们要掌握调试界面的方法。1、创建对象数组(一般是后端工作)代码如下:[{"name":"1.jpg","fuhao":"¥","jiaage":"78.00","dianzan"":"277","miaoshu":"雪纺碎花连衣裙修身修身喇叭袖"},{"name":"4.jpg","fuhao":"¥","jiaage":"48.00""dianzan":"247","miaoshu":"夏日新款韩版赫本小黑裙"},{"name":"3.jpg","fuhao":"¥","jiaage":"68.00","dianzan":"337","miaoshu":"棉麻连衣裙V领短袖文艺宽松新款"},{"name":"4.jpg","fuhao":"¥""jiaage":"78.00","dianzan":"537","miaoshu":"吊带裙收腰无袖中长款甜美大码"},{"name":"9.jpg","fuhao":"¥","jiaage":"78.00","dianzan":"537","miaoshu":"吊带收腰连衣裙无袖中长甜美"}]以上是界面(平时一组对象)由后台提供给我们。使用双引号(一般我们会把object数组写在.json文件中)2、整理后的网页部分效果如下:代码如下:html

78.00277

喇叭袖雪纺碎花连衣裙修身显瘦

css:.img{width:224px;高度:400px;}。imgimg{高度:100%;宽度:100%;}.bbb{浮动:左;margin-left:13px;}.middle{宽度:224px;顶部边距:5px;高度:30px;行高:30px;/*border:1pxsolid#ccc;*/}.price-u,.price-n{字体样式:斜体;字体大小:16px;颜色:#f36;}.fr{浮动:正确;/*border:1pxsolid#ccc;*/}.fav-i{宽度:13px;高度:13px;显示:内联块;背景:网址(5.png);背景大小:100%;}.fav-n{颜色:#999;行高:14px;margin-left:3px;}p{font-size:12px;font-family:Arial,'微软雅黑';}a{text-decoration:none;666;}三、js部分(这段代码不变,记住就好)js://这个过程是利用js将后台数据渲染到网页中。写完这个js,html就不用那么复杂了。是新的html代码:(省略中间的长段)渲染图:优点:可以根据需要随时更改网页内容。