手写华为商城前端页面

最新推荐文章于 2025-05-13 23:11:15 发布

Saving Autism

最新推荐文章于 2025-05-13 23:11:15 发布

阅读量4.4k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： java 文章标签： java html css js

本文链接：https://blog.youkuaiyun.com/qq_44583531/article/details/93239229

今天需要完成的是华为商城的个人中心主页面，效果图如下。
华为商城个人中心原页面
首先抽离出来核心功能部分，要先完成的部分如下。
个人中心核心模块
这是我第一次接触前端，自学只有三天时间，我走的是Java后端路线，前端只是为了为完成后端功能铺路。用到的技术是html，css，js。原生代码写的，没用到框架。下面是我的格式架构设计。
给div分块。
div分区
如图分成的div，因为不熟前端代码。代码比较冗余，同颜色为同级div。经验条（1000/5000)因为后端不打算实现这功能，用图片已经写死。第一行（以下为简称div1）div右边部分使用了li标签，源代码如下：

<div id="ur">
				<ul>
					          <li>
                            <p class="p-price" id="pr1"><span id="p1" class=""><a href="" class="cyp" target="_blank">0</a></span></p>
                            <p class="p-dec">积分</p>
                            <a id="balanceicon_myCenter_url" href="" class="p-btn">