练习

zuoye/htmlcss/基础.md

@@ -0,0 +1,83 @@
+# html基础练习
+1. 写出html基本结构
+
+
+
+
+
+
+2. 写出至少5个单标签和至少8个双标签
+
+
+
+
+3. 新建一个html文件，页面上展示hello world
+    world加粗
+   完成微信群内发截图
+
+
+
+
+
+4. 新建一个html文件，页面上展示一篇文章的题目，作者，发布日期，正文内容，阅读量，点赞量，评论量
+   其中，标题单独一行，下面放作者，发布日期，下面放正文内容，最下面放阅读量，点赞量，评论量
+    完成微信群内发截图
+
+
+
+
+
+
+
+5. 在任务4的基础上 在正文之前插入一个图片作为文章封面
+完成微信群内发截图
+
+
+
+
+
+
+6. 在任务5的基础上，从最上面添加一个输入框和搜索按钮，点击搜索，将输入框中输入的值带入www.baidu.com的地址栏中
+完成微信群里发截图
+
+
+
+
+
+
+7. 用自己的方式调整任务4的html页面的样式
+完成微信群内发截图
+
+
+
+
+
+
+8. 完成下面的效果（内容为苏宁易购官网  https://www.suning.com/）
+
+![image-20210417142345798](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142345798.png)
+
+
+
+![image-20210417142408070](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142408070.png)
+
+
+
+
+
+![image-20210417142440900](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142440900.png)
+
+
+
+
+
+![image-20210417142544829](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142544829.png)
+
+
+
+
+
+
+
+![image-20210417142700974](E:\web\lessons\课件\zuoye\html\基础.assets\image-20210417142700974.png)
+

zuoye/htmlcss/移动端.md

@@ -0,0 +1,179 @@
+# 移动端
+
+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)

zuoye/htmlcss/表单.md

@@ -0,0 +1,100 @@
+# 表单
+
+ 完成下面练习
+
+1.
+
+![image-20210417151640744](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151640744.png)
+
+
+
+
+
+2.
+
+![image-20210417151656818](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151656818.png)
+
+
+
+3.
+
+
+
+![image-20210417151728218](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151728218.png)
+
+4.
+
+![image-20210417151948720](E:\web\lessons\课件\zuoye\html\表单.assets\image-20210417151948720.png)
+
+
+
+5.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.bjmcykj.com%2Fuploadfile%2F2014%2F05%2F28%2F20140528165362142.jpg&refer=http%3A%2F%2Fwww.bjmcykj.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235777&t=b029f432f4c7ff6a2352008cce43ae6b)
+
+
+
+6.
+
+
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.codezhijia.com%2FPublic%2FUpload%2Ftemplates%2F5baecd6d8a7e6.png&refer=http%3A%2F%2Fwww.codezhijia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235804&t=dd0cbd4385476733cc1f2d3110f2b917)
+
+（上面的滑动验证可以先忽略掉）
+
+
+
+
+
+7.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F604c82fc85f6ea812bc83407fc5cb24d463be3da19f0-No3sSO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=696bec1e475e180b3e5d298fe3f7141e)
+
+
+
+
+
+
+
+8.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lx98.cn%2Fuploads%2Fallimg%2F171103%2Ftlns41leaue.jpg&refer=http%3A%2F%2Fwww.lx98.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621235868&t=9cbdca965291ed20abc3af31309da545)
+
+
+
+
+
+（先只完成表单分类管理部分）
+
+
+
+
+
+9.
+
+![点击查看源网页](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ee21.cn%2Fimg%2F1%2F58663%2F351704200535512968472.jpg&refer=http%3A%2F%2Fp.ee21.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621236049&t=25fe7f2770bef17efdf7eb939fdfe518)
+
+
+
+10.
+
+![img](http://photocdn.sohu.com/20160311/mp63076656_1457700748118_3_th.png)
+
+
+
+
+
+
+
+
+
+![http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg](http://5b0988e595225.cdn.sohucs.com/images/20190621/d9c09882159949319e82af4d569f76c3.jpeg)
+
+
+
+
+
+
+
+
+

zuoye/htmlcss/表格.md

@@ -0,0 +1,89 @@
+# 表格
+
+* 完成下面的表格
+  
+
+![image-20210417145804193](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145804193.png)
+
+
+
+* 完成课程表
+
+  ![image-20210417150516346](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150516346.png)
+
+
+
+
+
+
+
+* 完成下面简历表格
+
+  **![墨绿色简洁空白简历表格word格式个人简历模板 ](https://img-u-0.51miz.com/Templet/00/16/52/97/165297_8d74ff62b666bd456f24c782825d3bb8.jpg!/quality/90/unsharp/true/compress/true/fw/840/clip/840x700a0a0)**
+
+
+
+
+
+
+
+
+
+* 完成下面的三个数据表
+* ![img](http://img02.tuke88.com/preview/2418175/00/04/22/5c20a2d4f28b4.jpg-0.jpg!/fw/800/quality/90/unsharp/true/compress/true)
+
+
+
+
+
+![image-20210417150651452](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417150651452.png)
+
+
+
+
+
+* 结合表单完成下面表格
+
+
+
+![image-20210417145821858](E:\web\lessons\课件\zuoye\html\表格.assets\image-20210417145821858.png)
+
+
+
+![白色产品报价单](https://www.55.la/uploads/1880910/1_new.jpg)
+
+
+
+
+
+
+
+![白色送货单Excel表格](https://www.55.la/uploads/1905062/1_new.png)
+
+
+
+
+
+
+
+
+
+![学习计划和作息时间表](https://www.55.la/uploads/1880714/1_new.png)
+
+
+
+
+
+
+
+![单位工作交接表](https://www.55.la/uploads/1880864/1_new.jpg)
+
+
+
+
+
+
+
+
+
+![财务报表素材](https://pic.ibaotu.com/00/11/68/70R888piCUwe.jpg-1.jpg!ww7002)