theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
c5f18c6051
webveuje/zuoye/htmlcss/移动端.md

179 lines
5.9 KiB
Markdown
Raw Normal View History

练习
2021-04-29 17:16:40 +08:00
# 移动端
1. 仿写京东手机版（https://m.jd.com/）
![image-20210417163206797](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163206797.png)
2. 手机端表格练习
![image-20210417163418136](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163418136.png)
备注 表格字段有 头像 昵称 活跃度 加入时间 是否为好友 性别 位置 id个性签名
除了用户 （包含用户名头像外 其他列可滚动）
![https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125e35d47ef40a8012187f4f7aaab.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=eba176a1ea0109aa3252b467c48d0ca4)
资料上传列表
![image-20210417163701901](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417163701901.png)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a01d592a7ab4a801216a3eeaa63c.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240479&t=7ca2dc926246bc1b6b0680dfdb1081d7)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0167d557cf866c0000012e7e49f4fc.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240525&t=7e8e3a100d52c60ec67e9025e78d2b33)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F015bf25704b4586ac7257948a0b2ae.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240548&t=31fe58487a386b4a2836efe187898126)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0102b65c2c972aa80121df909f1e42.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240574&t=df10a8630b82ab30211d58ee1ceac800)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c86a5544f0fd0000019ae94781fc.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240616&t=db74f69d43d7b8d5402232e79a7a0a10)
![image-20210417164124658](E:\web\lessons\课件\zuoye\html\移动端md.assets\image-20210417164124658.png)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01039556c2c60b6ac7256cb03ab3e7.jpg%40900w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=6290cc4a0019953a2e092735eb0c193b)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01319a56c2c6496ac7256cb0123846.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240795&t=62c251b5ee11806b4c89dd3caf16ef42)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fy.zdmimg.com%2F201806%2F04%2F5b14875b2d1c75965.jpg&refer=http%3A%2F%2Fy.zdmimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240885&t=0e67fab688de74d39209d0a4dc6be523)
## 移动端 表单
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftmp.weibenh5.com%2Fueditor%2Fphp%2Fupload%2Fimage%2F20191107%2F1573119926768056.jpg&refer=http%3A%2F%2Ftmp.weibenh5.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240988&t=312df1869a7967c3c965d2cdcd2acd80)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.tuicool.com%2FziAzAra.png%21web&refer=http%3A%2F%2Fimg1.tuicool.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=723cf0e70e7f2cbe12a0e501c1b35ff3)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F11cb4b3d0ff0a53c439ff901c15773ee883537e81818e-JNNnIk_fw236&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=1e53a2d8a4fd1a46e7371d5ec97b6d4d)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996841-1.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=ef5ff249a66ba48f3a98c3db7a5fbcc9)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.woshipm.com%2Fwp-files%2F2017%2F10%2F4-117.png&refer=http%3A%2F%2Fimage.woshipm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=e2bc9cddd782d4135b8cc45e75b36f5c)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgs.xueui.cn%2Fwp-content%2Fuploads%2F2018%2F05%2F201805221526996843.jpg&refer=http%3A%2F%2Fimgs.xueui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=4e3a6bb8141ce3c1beaaa9ca456f773e)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.uiwhy.cn%2Fzb_users%2Fupload%2F2018%2F12%2F20181209021548_11246.png&refer=http%3A%2F%2Fwww.uiwhy.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621240990&t=33f8b7c74681687f21af7f120d4dbe9f)
![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F02d5985756a1bd0000018c1b4d6a6f.jpg%40800w_1l_2o&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621241091&t=b1ffae7a87f49df49417fa80913b69f8)
Reference in New Issue Copy Permalink