Div布局案例
通常看到这个页面,会想到它是有几块组成的。
第一块,分销佣金。
第二块,包括代言、商品、二维码
其中代言又是左右结构。
于是乎基本的div结构就出来了。
<div class="row_1"> </div> <div class="row_2">
<div clas="row_2_1"> </div>
<div class="row_2_2"> </div>
<div class="row_2_3"> </div> </div> <div class="row_3"> </div>
然后逐层的添加与调整。
<div class="row_1">
<div class="left"><img class="money_img" src="{sh::PRES}public/img/t2.png"></span></div>
<div class="right">
<div class="money">分销佣金<font color='#CC0000'>{sh:$commission}</font>元</div>
<div class="sale">已销售<font color='#CC0000'><php>echo ($goodsData['salecount'] + $goodsData['fakemembercount']);</php></font>件</div>
</div>
</div> <div class="row_2">
<div clas="row_2_1">
<div class="left"><img src="{sh:$wxuserData.headimgurl}" width="70px" class="headimg"></div>
<div class="popover right">
<div class="arrow"></div>
<div class="popover-content">
<p>我是<font color='#FF9900'>{sh:$wxuserData.nickname}</font>,<br/><span>我为<font color='#FF9900'>{sh:$storeData.name}</font>代言。</span></p>
</div>
</div>
</div>
<div class="row_2_2">
<div class="item-img">
<img class="item-img-logo" src="{sh:$goodsData.logoimg}" width="100%">
<div class="item-bottom">
<span>{sh:$goodsData.name}</span>
<div>
<span class="price">¥<strong>{sh:$goodsData.price}</strong></span>
<small><s>¥{sh:$goodsData.oprice}</s></small>
</div>
</div>
</div>
</div>
<div class="row_2_3 qrcode">
<img src="{sh:$goodsData.qrcode}" width="100%">
<strong>长按二维码 识别图中二维码</strong>
</div> </div> <div class="row_3 tip">
<div class="title">
<i class="fa fa-sitemap"></i><span> 分销如何赚钱</span>
</div>
<div class="content">
<div>
<strong>第一步:</strong>转发商品链接或商品二维码图片给微信好友;<br/><br/>
<strong>第二步:</strong>从您转发的链接或图片进入商城的好友,系统将自动锁定成为您的客户,他们在微信商城中购买任何商品,您都可以获得分销佣金;<br/><br/>
<strong>第三步:</strong>您可以在分销中查看【我的团队】和【分销佣金】。好友确认收货后,佣金可提现。<br/><br/>
</div>
</div>
</div>
css最好写到style中
<style>
body{
background-color: #EFEFEF;
}
.item-bottom{
position: absolute;
left: 0px;
bottom: 0px;
background: rgba(0,0,0,0.4) none repeat scroll !important;
width: 100%;
color: #fff;
line-height: 25px;
padding-right: 5px;
text-align: left;
font-size: 13px;
padding-left: 10px;
}
.qrcode{text-align: center;}
.qrcode img{width:95%;}
.qrcode strong{color:#cc0033;text-align:center;padding:20px;display:block} .tip .title{height:30px;margin:10px;vertical-align:middle;line-height:30px;}
.tip .title img{padding: 5px;float:left;}
.tip .title div{width:100%;margin-left:5px;height:1px;background-color: #cc0033;} .tip .content{margin-left:15px;margin-right:15px;color:gray;}
.tip .content strong{color:black;}
.row_1{
width:100%;display: inline-flex;background-color: white;margin-bottom: 15px;
}
.row_2{
width:100%;position: relative;background-color: white;
}
.row_2_1{
display: inline-flex;margin-bottom: 10px;
}
.popover{
display: inline;left:80px;top:10px;width:70%;
}
.headimg{
margin: 10px 10px;
}
.item-img{
position: relative;
}
.price{
color:#CC3300; font-size: 16px;
}
.money{
display: inline-grid;font-size: 25px;padding:10px 5px 5px 5px;
}
.sale{
font-size: 18px;padding-left:10px;color:gray;
}
.money_img{
width: 80px;
padding: 5px;
}
.popover-content{
font-size: 14px;
}
</style>
如果很多的话,可以写到一个单独的css文件中,引入进来。
tips:
页面或者功能实现之后,这是第一步。 最好能够继续优化一下页面与代码。 将没用的去除,或者将代码进行优化调整。这是一个好习惯。 不管怎样,搞出来就是最牛逼的。优化是在搞出来基础上去做的事情。
Div布局案例的更多相关文章
- css+div布局案例
给最外层的div命名一个class 有针对性的进行css布局. <div class="joinus-info"> <div class="form-t ...
- HTML学习笔记 div布局及table布局案例 第三节 (原创)参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div 布局
转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...
- 慕课网5-2编程练习:flex布局制作卡片布局案例
慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...
- 小div布局之卡片堆叠(card-stacking)
前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...
- [MVC] DIV 布局
[MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- Android(java)学习笔记164:Relativelayout相对布局案例
我们看看案例代码,自己心领神会: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...
- DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
随机推荐
- PHP学习笔记,自己动手写个MVC的框架
最新在大家自己的博客的过程中,发现各种开源的博客系统都或多或少的用起来别扭.于是想动手自己写个博客系统.既然写,就想好好写.那就先写个MVC框架.一点一点来.写的过程中有很多想法.还希望大家能够多多指 ...
- 经典面试题(二)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯
1.正整数序列Q中的每个元素都至少能被正整数a和b中的一个整除,现给定a和b,需要计算出Q中的前几项, 例如,当a=3,b=5,N=6时,序列为3,5,6,9,10,12 (1).设计一个函数void ...
- MYSQL auto_increment 、default 关键字
1. auto_increment: innoDB 中 表中只可以有一个列是auto_increment的,这个列还一定要是索引. create table T(X int auto_incremen ...
- SQL Server 中可以被锁住的 12 种资源
第1种: DB 整个数据库 第2种: file 数据库文件 第3种: table 第4种: hobt(堆)BTree(B树) 第5种: extent 一个区(8个8KB页面) 第6种: page 数据 ...
- Jquery基础之ajax
ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简称,ajax并不是单一的技术而是利用一系列交互网页应用相关的技术形成的结合体,ajax揭 ...
- C# 弗洛伊德(Floyd)算法
弗洛伊德(Floyd)算法 主要是用于计算图中所有顶点对之间的最短距离长度的算法,如果是要求某一个特定点到图中所有顶点之间的最短距离可以用; ; ; ; ...
- java中HashSet实现(转)
hashset底层的数据结构是hash表,hash表实现方式采用数组+链表,数组类型为HashNode,每个数组元素为链表的头指针,链表中存储经过hash函数散列后冲突的元素,数组的长度为26 has ...
- JOSM学习下载地址
JOSM is an extensible editor for OpenStreetMap (OSM) written in Java 7. Currently it supports load ...
- 【hihocoder 1257 Snake Carpet】构造
2015北京区域赛现场赛第4题. 题面:http://media.hihocoder.com/contests/icpcbeijing2015/problems.pdf OJ链接:http://hih ...
- linux服务器开发浅谈
[开发前准备] 在进行linux服务器开发之前,必须很清楚地了解所开发的对象需要考虑的相关问题比如:功能架构:提供服务的模块体系结构稳定性:服务器的出core率,内存泄露情况性能:请求与返回的速度与正 ...