Sharing and summary of a simple mobile project just made by front-end Xiaobai
The technology used is simple div+css
directly on the picture
Code part droplet service
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="Common.css">
<style>
.cell{
display: table;width: 100%;height: 80px;margin-bottom: 10px;
background-color: white;}
.cell a{
display: table-cell;width: 33.3%;text-align: center;vertical-align: middle;text-decoration: none;color: black}
</style>
</head>
<body>
<div class="title-top" >
小滴服务
</div>
<div >
<img src="../icon/banner1.png" alt="" class="middle-picture">
</div>
<div class="cell">
<a href=""><img src="../icon/index1.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index2.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index3.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
<a href=""><img src="../icon/index4.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index5.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index6.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
<a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
<a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
<a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell" style="padding-bottom: 50px">
<a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
<a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
<a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell-navigation" >
<a href="First-page.html"><img src="../icon/nav11.png" alt=""><p style="color: red">小滴服务</p></a>
<a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a>
<a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
<a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
<a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div>
</body>
</html>
Next comes the Enterprise Projects section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no">
<title>公司项目</title>
<link rel="stylesheet" href="Common.css">
<style>
.two{
padding-top: 40px;
background-color: white;
display: table;
width: 100%;
text-align: center;
height: 44px;
line-height: 44px;
}
.two a{
display: table-cell;
width: 33.3%;
text-decoration: none;
color:rgb(28,109,192);
}
</style>
</head>
<body>
<div class="title-top">
创业项目
</div>
<div class="two">
<a href="EnterPrise-Project.html">钻石创业者</a>
<a href="EnterPrise-Project-gold.html">金牌创业者</a>
<a href="EnterPrise-Project-Silver.html">银牌创业者</a>
</div>
<div style="background-color:white;" >
<img src="../icon/banner3.png" alt="" style="width: 100%">
<h5 style="text-align: center">服务内容</h5>
<img src="../icon/10w_1.png" alt="" style="width: 100%">
<p style="font-size: 10px;text-align: center">提供以上两个学院的技术支持、咨询服务，课件学习等内容</p>
</div>
<div >
<h5 style="text-align: center">创业者享受的回报收益</h5>
<img src="../icon/10w_2.png" alt="" style="width: 100%">
<ol style="font-size: 10px">
<li>渠到可以享有的股份额度</li>
<li>渠道个人业绩流水总额累计</li>
<li>历年渠道全部各方面业绩流水总额累计</li>
<li>宏鑫互联网集团所拥有的上市或者充足公司纵谷本数</li>
<li>宏鑫互联网集团上市总股本数的20%</li>
</ol>
</div>
<div style="background-color:white;padding-bottom: 50px">
<h5 style="text-align: center">获得收益条件</h5>
<ol style="font-size: 10px">
<li>N≥10人</li>
<li>业绩流水≥1.2亿。</li>
<li>当满足两个以上条件时，钻石创业者才能取得期权。<br>
注：上面的y/z为财务数据，由财务部门按期提供，录入即可。
</li>
</ol>
</div>
<div class="cell-navigation" >
<a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a>
<a href="EnterPrise-Project.html"><img src="../icon/nav21.png" alt=""><p style="color: red">企业项目</p></a>
<a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
<a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
<a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div>
</body>
</html>
Next is my droplet part (the other two parts are very simple, no need to paste the code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<title>我的小滴</title>
<link rel="stylesheet" href="Common.css">
<style>
.self{
position: absolute;
top: 83px;
left: 50%;
text-align: center;
margin-left:-32px;
}
.frame{
position: relative;
left: 5%;
}
.arrow{
position: relative;
left: 50%;
}
td{
border: 1px #dddddd solid;
background-color: white;
border-radius:5px;
}
</style>
</head>
<body>
<div class="title-top">
我的小滴
</div>
<div style="padding-top: 40px">
<img src="../icon/banner5.png" alt=""width="100%">
</div>
<div class="self">
<img src="../icon/head.png" alt=""><br>
<p>华衫科技</p>
<span style="background-color:rgb(28,109,192);">退出登录</span>
</div>
<div style="padding-bottom: 50px">
<table width="90%" class="frame"cellspacing="10px" >
<tr style="height: 40px">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
<tr style="height: 40px;">
<td >
<span><img src="../icon/gr_1.png" alt=""></span>
<span>我的客户</span>
<span class="arrow"><img src="../icon/jt.png" alt=""></span>
</td>
</tr>
</table>
</div>
<div class="cell-navigation" >
<a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a>
<a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a>
<a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a>
<a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a>
<a href="Myself.html"><img src="../icon/nav51.png" alt=""><p style="color: red">我的小滴</p></a>
</div>
</body>
</html>
Problems I encountered and summary
------------------table and table cell-----------------
Give parent element style display: table, give child element The style tablecell can achieve the effect of 9-grid navigation.
Specific details: 1. Commonly used tags cover div with embedded a tag
2. If the div as the parent element does not specify the width and height, it will be determined by the width and height of the child element a
3. The a tag can use vertical-align: middle to place this element a in The middle of the parent element div.
---------------------Public Style Section -------------------------- ---
First, all elements go to the inner and outer borders
{ padding: 0; margin: 0; } which
refers to all label elements
second
How to fix the title bar at the head and the navigation bar at the tail on the upper and lower parts of the screen without affecting the display
method of normal content - position: fixed for positioning and then add a border margin or padding distance to the nearest block as the title bar or navigation column width
----------------------- Use of Position ----------------------- -
In this project, position uses absolute positioning absolute, relative positioning relative and
positioning relative to the browser window in absolute positioning fixed
bsolute
generates absolutely positioned elements, positioned relative to the first parent element other than static positioning.
The position of the element is specified by the "left", "top", "right" and "bottom" attributes.
fixed
generates absolutely positioned elements, positioned relative to the browser window.
The position of the element is specified by the "left", "top", "right" and "bottom" attributes.
relative
Generates a relatively positioned element, positioned relative to its normal position.
Thus, "left:20" adds 20 pixels to the LEFT position of the element.
Baidu network disk sharing link
Link: https://pan.baidu.com/s/1QRfrfLvk4RCIr6SSXBHR2w
Extraction code: jzs2
After copying this content, open the Baidu network disk mobile app, which is more convenient to operate