html+css练习

1.采购单练习(table + css)

2.分析页面的基本构造及缩写代码的基本思路

真实项目开发

​ 借助UI框架快速开发

勿忘初心

​ 不要丧失了书写原生的css和html的能力

页面分成3个部分

​ 头部

​ 页面主体部分(版心)

​ 底部

3.首页布局实现及图标库的使用

iconfont 图标库的使用

​ 注册账号

​ 搜索喜欢的图标

​ 加入购物车-》加入项目

​ 在图标管理里选择我的项目

​ 生成在线链接

​ 引入对应的css

​ 复制图标的代码

​ 添加iconfont和复制的类名

1
2
iconfont 必须要写 icon-icon-test1是你复制的图标的代码 
<i class="iconfont icon-icon-test1"></i>

布局:

​ 头部

​ 中间部分-》主体部分

​ 底部

4.导航栏(公共)

logo + 横向菜单 + 搜索框 + 用户注册/登录

5.轮播图

6.课程列表

7.底部(公共)

8.学习规划

项目开发过程

​ 先分析一个布局,分块细一点

​ 写对应的注释

​ 考虑周全一点

项目遇到的问题

​ 布局乱了怎么办

​ 检查其他盒子的高度是否影响了

​ 块级元素里包了张图片的时候会有一个间距

​ font-size: 0

​ 换着思路实现问题,比如我们的伪类来实现布局

学会iconfont使用

未来规划

​ 1.html + css (最基本的)

​ 2.js(跟网页交互使用的)

​ vue.js

​ react.js

​ 3.项目的构建

​ git(代码管理工具)

​ webpack(打包工具,打包资源代码)

​ 4.后端

​ node.js(多了操作数据库的api)

​ 5.学习技巧

​ 只有当你的实际练习(写代码)大大于你的理论学习时间,你才会有进步

​ 锻炼下自已独立学习能力(必须学会看懂编辑器的提示,学会翻译)

​ 多多看mdn文档,博文只能参考


html+css练习
http://hanqichuan.com/2021/03/07/前端/html+css练习/
作者
韩启川
发布于
2021年3月7日
许可协议