手写华为商城前端页面

最新推荐文章于 2024-05-24 13:15:54 发布

Saving Autism

最新推荐文章于 2024-05-24 13:15:54 发布

阅读量4.1k

点赞数 11

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

本文链接：https://blog.csdn.net/qq_44583531/article/details/93239229

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天需要完成的是华为商城的个人中心主页面，效果图如下。
华为商城个人中心原页面
首先抽离出来核心功能部分，要先完成的部分如下。
个人中心核心模块
这是我第一次接触前端，自学只有三天时间，我走的是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">去查看</a>
                        </li>
                        <li>
                            <p class="p-price"><span id="p2"><a href="" class="cyp">9</a></span></p>
                            <p class="p-dec">优惠券</p>
                            <a id="couponicon_myCenter_url" href="" class="p-btn">去查看</a>
                        </li>
                        <li>
                            <p class="p-price"><span id="p3" class=""><a class="cyp" href="" target="_blank">0.00</a></span></p>
                            <p class="p-dec">代金券</p>
                            <a id="balanceAmount_myCenter_url" href="" class="p-btn">去查看</a>
                        </li>
                        <li>
                            <p class="p-price"><span id="p4" class="p-price-no"><a class="cyp" href="" target="_blank">0</a></span></p>
                            <p class="p-dec">花瓣</p>
                            <a id="petalicon_myCenter_url" href="" class="p-btn">去查看</a>
                        </li>		
				</ul>
    </div>

可以很明显看出是div>ul>li>a标签的设计模式。每一个li标签，嵌套了两个a标签，一个p标签。li标签默认自成一列，默认的带点样式也要去除。同理还有a标签的特殊样式。我的css设计如下：

  #ur>ul{
		  	float: right;
		  }
	    #ur>ul li{
		 	list-style: none;
		 	float: left;
		        width: 144px;
		        margin-top: 44px;
		        text-align: center;
		  }
		  a{
		  	text-decoration: none;
                        color: #3a3a3a;
		  }

首先让包住4个li标签的整个ul左浮动（浮动前切记要设置好父div的宽高，不然父元素会发生浮动塌陷现象），li标签也要全部设置好浮动。浮动后的间距我是用的 width: 144px拉开的。记得消除div，body，html等自带的间距，代码是margin: 0;padding: 0。记得带边框调整，完成div1后我的测试图如下：
第一行div设计
在写第二个大的div的时候，我需要“我的订单”模块在div的下面靠左。但是现在会浮动到div1的右边，这时候需要设置清除浮动的属性，代码是clear:both。最后设计样式的时候，必须知道优先级id>类>标签，!important设置最高优先级。“>"是子标签，” "是后代标签。设置背景图片的时候，bacground-repeat:no repeat设置不重复。还要知道定位语句。代码是 background: url(img/ffff.png); background-position: center;
这是刚设计完的效果图：
设计效果图
去除边框后：
完成核心模块设计
那么，我们如何做出如下的效果呢？
更齐全的页面设计
这里介绍一下框架集。框架集并不是用到了前端框架技术，是一款非常轻量的设计模式。假如页面的某一部分不需要变动，这时用框架集就非常合适。总而言之，框架集是很死的一种设计思路，我也只是为了快速做出页面效果，等到实现后端功能的时候，只能用ajax技术了。
从图里可以很明显看出此页面是三个页面的整合，目录结构如下：

left.html控制左边板块，top.html控制上面板块，中间嵌入的就是我们上面写的代码。frame.html是程序入口，代码如下：

 <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>首页_个人中心_华为商城</title>
      <link rel="icon" href="./img/favicon.ico">
      <style type="text/css">
      	
      </style>
     </head>
            <frameset rows="18%,*" frameborder="0" >
      <frame src="top.html" name="topFrame" scrolling="no"  
       noresize="topframe"/>
       <frameset cols="21%,*" >
         <frame src="left.html" name="leftframe"
        scrolling="no" noresize"noresize">  
       <frame src="mycenter.html" style="min-width: 1080;"  scrolling="no"  >
       </frameset >
       </frameset >
       
     <body style="overflow-x:hidden;overflow-y:hidden">
     </body>
    </html>

补充一个非常重要的知识点，大家知道网站顶部的图标怎么来的吗？一行代码引入文件即可！

 <link rel="icon" href="./img/favicon.ico">

下面简要讲下华为首页的设计，首先看效果图：
华为商城首页
这里我只讲一个点，怎么实现点击“登录”后出现弹窗，弹窗显示在正中央。这里用了js的点击事件，这事件关联的是弹窗的隐藏还是显示。效果图：
登录弹窗
实现的代码如下：

.ui-dialog{
  /* 设置DIV绝对居中 */
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
   padding: 1em;	
}


<!-- 下面是登录弹窗的div -->		
	<div id="tc"   style="display: none;">		
  <script>  	
   function shijian(){
         /* 点击后弹窗，点X后绑定的点击事件让div隐藏 */ 
    if(tc.style.display=="none")
	tc.style.display="block";
	else 
	tc.style.display="none"; 	
}
	</script>

感谢观看。
发在了前端社区，希望各位大佬给出好的意见，用更少的代码写出更棒的效果！

Saving Autism

关注

11
点赞
踩
28

收藏

觉得还不错? 一键收藏
3
评论
手写华为商城前端页面

今天需要完成的是华为商城的个人中心主页面，效果图如下。首先抽离出来核心功能部分，要先完成的部分如下。这是我第一次接触前端，自学只有三天时间，我走的是Java后端路线，前端只是为了为完成后端功能铺路。用到的技术是html，css，js。原生代码写的，没用到框架。下面是我的格式架构设计。给div分块。如图分成的div，因为不熟前端代码。代码比较冗余，同颜色为同级div。经验条（1000/...
复制链接

扫一扫