练习
BIN
zuoye/htmlcss/pdfs/基础.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/移动端.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/表单.pdf
Normal file
BIN
zuoye/htmlcss/pdfs/表格.pdf
Normal file
BIN
zuoye/htmlcss/基础.assets/image-20210417142345798.png
Normal file
|
After Width: | Height: | Size: 9.5 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142408070.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142440900.png
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142544829.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
zuoye/htmlcss/基础.assets/image-20210417142700974.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
83
zuoye/htmlcss/基础.md
Normal file
@@ -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/)
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
179
zuoye/htmlcss/移动端.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 移动端
|
||||
|
||||
1. 仿写京东手机版(https://m.jd.com/)
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
2. 手机端表格练习
|
||||
|
||||

|
||||
|
||||
备注 表格字段有 头像 昵称 活跃度 加入时间 是否为好友 性别 位置 id个性签名
|
||||
|
||||
除了用户 (包含用户名头像外 其他列可滚动)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
资料上传列表
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 移动端 表单
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163206797.png
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163418136.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417163701901.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
zuoye/htmlcss/移动端md.assets/image-20210417164124658.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151640744.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151656818.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151728218.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417151948720.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
zuoye/htmlcss/表单.assets/image-20210417162831726.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
100
zuoye/htmlcss/表单.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# 表单
|
||||
|
||||
完成下面练习
|
||||
|
||||
1.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
2.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
3.
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
4.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
5.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
6.
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
(上面的滑动验证可以先忽略掉)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
7.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
(先只完成表单分类管理部分)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
9.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
10.
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
zuoye/htmlcss/表格.assets/image-20210417143044634.png
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417143051063.png
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145730641.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145804193.png
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145821858.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417145901068.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417150516346.png
Normal file
|
After Width: | Height: | Size: 331 KiB |
BIN
zuoye/htmlcss/表格.assets/image-20210417150651452.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
89
zuoye/htmlcss/表格.md
Normal file
@@ -0,0 +1,89 @@
|
||||
# 表格
|
||||
|
||||
* 完成下面的表格
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
* 完成课程表
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 完成下面简历表格
|
||||
|
||||
****
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 完成下面的三个数据表
|
||||
* 
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
* 结合表单完成下面表格
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||

|
||||