从零玩转HTML5+CSS3项目实战-跟着李南江学编程

从零玩转HTML5+CSS3项目实战-跟着李南江学编程

1.CSS高级应用

1.边框圆角的基本使用

• 1.1什么是边框圆角：将直角的边框变为圆角的边框
• 1.2边框圆角的格式：border-radius:左上 右上 右下 左下
• 1.3将正方形变为圆角的技巧：border-radius:50%
• 1.4系统如何绘制圆角：首先根据指定的值找到圆心，按照指定的值作为半径绘制圆弧
• 1.5边框圆角的注意点：
• 当省略了某一个角的值之后，系统会自动参考对角的值
• 当设置了一个值的时候，其它三个角都会参考这个值
• 当边框圆角的值>边框宽度的时候，外边框和内边框都会变成圆角
• 当边框圆角的值<=外边宽度的时候，外边框是圆角，内边框是直角

2.伸缩布局的基本使用

• 在伸缩项中有一个flex-grow属性，用于控制当所有伸缩项的宽度总和小于伸缩容器宽度的时候如何扩充自己，以便于所有伸缩项宽度的总和能够填满整个伸缩容器
• 默认情况下flex-grow的取值是0，表示我们设置的宽度是多少就按照多少来显示，不进行任何的扩充
• 注意点：只有当所有伸缩项的宽度总和小于伸缩容器宽度的时候flex-grow这个属性才有效
• flex-grow扩充的公式
• 1.利用伸缩容器宽度 — 所有伸缩项的宽度 =剩余空间
• 2.利用剩余空间/所有需要扩充份数的总和 = 每一份的大小
• 3.利用当前伸缩项的宽度 + 需要的份数的宽度

3.线性渐变的使用

• background:linear-gradient(至少需要传递2个颜色，至多没有上限)
• 注意点：
• 1.默认情况下自动会计算纯色和渐变色的范围，也可以指定
• 2.只有第一个颜色后面的范围是指定纯色的范围，后面的都是指定渐变的范围

4.怎么样开发响应式网站

• 3.1 编写电脑版本的网页
• 3.2 编写平板版本的网页，通过相同的选择器覆盖掉不同的样式
  
• 3.3 编写手机版本的网页，通过相同的选择器覆盖掉不同的样式
  

5.如何完整的一步步开发网站

• 新建站点文件夹
• 设置favorites icon网页图标
• 1.添加网站有优化三大标签
• 1.1 网页title标题
• 1.2 keywords关键字
• 1.3 Description网站说明
• 导入css Rest类库 reset.css normalize.css
• 设置全局通用字体行高

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com