今天完成的事情

查看:hover 选择器

flex 属性

查看HTML5废除的标签

明天的计划

任务六

遇到的问题

收获

‍‍HTML5废除的标签‍‍

‍‍‍‍<basefont> <big><center><font><s><strike><tt><u>        ‍‍ 使用css代替‍‍‍‍

‍‍<frameset><farme><noframes>        使用<frame>框架或服务器方创建的由多个页面组成的复合页面代替‍‍

‍‍<rb>                   使用<ruby>替代‍‍

<acronym>      ‍‍使用<form>与<input>相结合的方式替代‍‍

‍‍<dir>            使用<ul>替代‍‍

‍‍<listing>        使用<pre>替代‍‍

‍‍<applet><bgsound><blink><marquee>等标签‍‍    只有部分浏览器支持‍‍‍‍

‍‍<nextid>           使用guids替代‍‍

‍‍<xmp>             使用<code>替代‍‍

‍‍<plaintex>         使用"text/plian" MIME类型替代‍‍‍‍

flex 属性，是以下三个属性的简写：

flex-grow、flex-shrink、flex-basis

flex-grow: 定义弹性盒子项的拉伸因子，即子项分配父项剩余空间的比，默认值为 0

flex-shrink:指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1

         [ 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n ]

felx-basis: 指定了 flex 元素在主轴方向上的初始大小，即子项的宽度

flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto

当 flex 取值为 none，则计算值为 0 0 auto

当 flex 取值为 auto，则计算值为 1 1 auto

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

:hover在鼠标移到链接上时添加的特殊样式。

hover 选择器器可用于所有元素，不仅是链接。

任务名称 ：css-task-05

成果链接：https://zn724761135.github.io/css/css5/css5

任务耗时：2018.6.7-2018.6.11（5天）

技能脑图：

官网脑图：

自己脑图：

.

任务总结：

命名规则说明

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容（中部）

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

书写规范

单行形式书写风格的排版约束

- 如果是在html中写内联的css，则必须写成单行；

- 每一条规则的大括号 { 前后加空格 ；

- 每一条规则结束的大括号 } 前加空格；

- 属性名冒号之前不加空格，冒号之后加空格；

- 每一个属性值后必须添加分号; 并且分号后空格；

- 多个选择器共用一个样式集，则多个选择器必须写成多行形式 ；

多行形式书写风格的排版约束

- 每一条规则的大括号 { 前添加空格;

- 多个选择器共用一个样式集，则多个选择器必须写成多行形式 ;

- 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;

- 属性名冒号之前不加空格，冒号之后加空格;

- 属性值之后添加分号；

‍‍‍‍属性编写顺序‍‍‍‍

- 显示属性：display/list-style/position/float/clear …

- 自身属性（盒模型）：width/height/margin/padding/border

- 背景：background

- 行高：line-height

-文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

- 其他：cursor/z-index/zoom/overflow

- CSS3属性：transform/transition/animation/box-shadow/border-radius

- 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- /

std的顺序进行添加，标准属性写在最后。

- 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

常用的命名：

 (1)页面结构 

- 容器: container

- 页头：header

- 内容：content/container

- 页面主体：main

- 页尾：footer

- 导航：nav

- 侧栏：sidebar

- 栏目：column

- 页面外围控制整体布局宽度：wrapper

- 左右中：left right center

 (2)导航

- 导航：nav

- 主导航：mainbav

- 子导航：subnav

- 顶导航：topnav

- 边导航：sidebar

- 左导航：leftsidebar

- 右导航：rightsidebar

- 菜单：menu

- 子菜单：submenu

- 标题: title

- 摘要: summary 

(3)功能

- 标志：logo

- 广告：banner

- 登陆：login

- 登录条：loginbar

- 注册：regsiter

- 搜索：search

- 功能区：shop

- 标题：title

- 加入：joinus

- 状态：status

- 按钮：btn

- 滚动：scroll

- 标签页：tab

- 文章列表：list

- 提示信息：msg

- 当前的: current

- 小技巧：tips

- 图标: icon

- 注释：note

- 指南：guild

- 服务：service

- 热点：hot

- 新闻：news

- 下载：download

- 投票：vote

- 合作伙伴：partner

- 友情链接：link

- 版权：copyright‍‍‍‍