CSS2

CSS

综合案例

h标签和div标签，独占一行

CSS元素显示模式

元素的显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面

元素显示模式就是元素（标签）以什么方式进行显示，比如

自己占一行，一行可以放多个

HTML元素一般分为块元素和行内元素两种类型

CSS元素分类

块元素

常见的块元素有

<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>等，其中<div>标签是最典型的块元素

块级元素的特点：

1. 自己独占一行
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类的元素内不能使用块级元素
• p标签主要用于存放文字，因此

  里面不能放块级元素，特别是不能放div

• h1~h6等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有

<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>等

其中span标签是最典型的行内元素，有的地方也将行内元素称为內联元素

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

注意：

• 链接里面不能再放链接

• 特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全

行内块元素

行内元素中有几个特殊的标签-img、input、td，它们 同时具有块元素和行内元素的特点

行内块元素的特点：

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2. 默认快读就是它本身内容的宽度（行内元素的特点）
3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内的宽度

元素显示模式的分类

小工具使用 snipaste

Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上

常用快捷方式：

1. F1可以截图，同时测量大小，设置箭头 书写文字等
2. F3在桌面置顶显示
3. 点击图片，alt可以取色（按下shift可以切换取色模式）
4. 按下 esc 取消图片显示

参考链接：https://zh.snipaste.com

简洁版小米侧边栏

思路：

1. 把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度
2. 鼠标经过a，给链接设置背景颜色

/* 1.把a转换为块级元素 */
a {
	display: block;
	width: 230px;
	height: 40px;
	background-color: #55585a;
	font-size:14px;
	color: #fff;
	text-decoration: none;
	text-indent: 2em;
}

/* 2.鼠标经过链接变换背景颜色 */
a:hover {
	background-color: #ff6700;
}

一个小技巧 单行文字垂直居中的代码

CSS没有提供文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度

div {
	height: 40px;
	line-height: 40px;
}

元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

比如想要增加链接 a 的触发范围

1. 转换为块元素：display: block;
2. 转换为行内元素 display: inline;
3. 转换为行内块: display: inline-block（让块级元素并排显示）

HTML5和CSS3提高

目标

1. 能够说出3-5个HTML5新增布局和表单标签
2. 能够说出CSS3的新增特性有哪些

HTML5新特性

CSS3新特性

PC端品优购项目

目标

1. 能够独立完成品优购首页制作
2. 能够独立完成品优购列表页制作
3. 能够独立完成品优购注册制作
4. 能够把品优购网站部署上线

品优购项目规划

品优购首页制作

品优购列表页制作

品优购注册页制作

域名注册与网站上传

移动web开发之流式布局

目标

1. 能够知道移动web的开发现状
2. 能够写出标准的viewport
3. 能够使用移动web的调试方法
4. 能够说出移动端常见的布局方案
5. 能够描述流式布局
6. 能够独立完成京东移动端首页

移动端基础

视口

二倍图

移动端调试

移动端技术解决方案

移动端常见布局

移动端开发之流式布局

京东移动端首页制作

移动web开发值flex布局

目标

1. 能够说出flex盒子的布局原理
2. 能够使用flex布局的常用属性
3. 能够独立完成携程移动端首页案例

flex布局体验

flex布局原理

flex布局父项常见属性

flex布局子项常见属性

携程网首页案例制作

移动web开发值rem适配布局

目标

1. 能够使用rem单位
2. 能够使用媒体查询的基本语法
3. 能够使用less的基本语法
4. 能够使用less中的嵌套
5. 能够使用less中的运算
6. 能够使用2中rem适配方案
7. 能够独立完成苏宁移动端首页

rem基础

媒体查询

less基础

rem适配方案

苏宁首页案例制作

移动web开发值响应式布局

目标

1. 能够说出响应式原理
2. 能够使用媒体查询完成响应式导航
3. 能够使用bootstrap的栅格系统
4. 能够使用bootstrap的响应式工具
5. 能够独立完成阿里百秀首页案例

响应式开发

bootstrap前端开发框架

bootstrap栅格系统

阿里百秀首页案例