目标:精通网页布局
- HTML5基础
- CSS3基础
- H5C3提高
- 品优购网站
第一部分 HTML上
1.1 网页
网站是网页的集合,多个网页的集合就形成一个网站。网页时构成网站的基本元素。 网页:图片+链接+视频+声音等元素组成 .htm和.html后缀,也称为HTML文件 HTML:超文本标记语言(超越了文本限制,超级链接)
1.2 常用浏览器
- IE、火狐、谷歌、safari和opera
- 浏览器内核:负责读取网页内容,整理讯息,计算网页的显示方式并显示页面
- web标准:是由W3C组织以及其他标准组织制定的一系列标准的集合,W3C(万维网联盟)是国际著名的标准化组织
- web标准组成:结构HTML+表现CSS+行为JS
1.3 HTML标签
- 文档类型声明标签
-
lang="en" 语言种类
-
<meta charset="UTF-8">
字符集,UTF-8被称为万国码,包含全世界所有国家需要的字符 不写会出现乱码
-----------------以上基本不需要重写-----------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.4 HTML常用标签
1、标题标签:<h1>-<h6>
双标签,重要性递减,独占一行
2、段落标签 <p></p>
段落与段落有空隙
3、换行标签 <br/>
换行标签,强制换行,第一个正式的单标签
4、文本格式化标签:粗体、斜体、下划线(突出重点)
<strong>加粗</strong>
加粗 (这个语义更强烈)
<b>加粗</b>
加粗
<em>倾斜</em>
倾斜 (这个语义更强烈)
<i>倾斜</i>
倾斜
<del>删除</del>
删除 (这个语义更强烈)
<s>删除</s>
删除
<ins>下划线</ins>
删除 (这个语义更强烈)
<u>下划线</u>
删除
5、div、span
没有语义的标签,他们就是盒子,用来装内容的
6、图像标签 <img>
`<img src="图像的URL"/>` src是必须属性
`<img src="图像的URL" alt="图片不见了"/>` alt替换文本
`<img src="图像的URL" title="提示文本"/>` title提示文本
7、超链接标签 <a></a>
<a href="跳转目标" target="目标窗口的弹出方式"></a>
href必须属性
target:窗口的弹出方式,targe="_blank" target="——self"
-
外部链接
-
内部链接
-
空链接
-
下载链接,如果地址链接是文件.exe zip等压缩包形式
-
锚点链接 ,快速定位到某个位置,
#名字
<a href="http://baidu.com">外部链接</a>
<a href="2.html">内部链接</a>
<a href="#">空链接</a>
<a href="2.html.zip">下载链接</a>
<a href="#mm">锚点</a>
<h3 id="mm">高产阶段</h3>
8、
空格
<
小于
>
大于
第二部分 HTML下
2.1 表格
<table>
<tr>
<td></td>
</tr>
</table>
<table align="center" border="1" cellpadding="20" cellspacing="0">
<tr>
<!-- 表头单元格,加粗居中 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>vina</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>richur</td>
<td>男</td>
<td>30</td>
</tr>
</table>
表格的属性我们可以不需要记住,后期都是用css来实现的
align:center、left、right
border: 1或者""
cellpadding: 单元格内部文字和单元格距离
cellspacing: 单元格和单元格距离
2.2 表格结构标签
主要是提高表格语义性
<thead> </thead>
头部
<tbody> </tbody>
主体
2.3 表格合并单元格
跨行 rowspan=“个数”
跨列 colspan=“个数”
2.4 列表
2.4.1 无序列表
注意:ul里面只能出现li,li里面可以放任何元素,无序列表自带自己的样式
<h4>无序列表</h4>
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>螺蛳粉</li>
<li>鲱鱼罐头</li>
</ul>
2.4.2 有序列表
ol里面只能放li,li里面可以放任何元素,有序列表自带自己的样式
使用场景:排序有讲究
<h4>无序列表</h4>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
2.4.3 自定义列表
dl里面只能是dt和dd,dt和dd个数没有限制,一般一个dt后面跟着多个dd,dt和dd是兄弟关系
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
2.5 表单
2.5.1 为什么需要表单
收集我们的用户信息
2.5.2 表单组成
表单域+表单控件+提示信息
2.5.3 使用场景
注册
2.6 表单域
表单域是一个包含表单元素的区域
<form></form>
会吧它范围内的表单元素信息提交给服务器。
2.7 表单标签
2.7.1 input表单
<input>
是单标签,
重要属性:
1、type属性:
type属性是为了让input展示不同的形态
- text文本框
- password密码框
- radio 单选按钮,必须给相同的name
- checkbox 复选框,必须给相同的name
<input type="submit" value="快速注册">
提交按钮,可以把我们的数据提交给后台服务器<input type="reset" value="重置">
重置按钮可以还原表单元素初始默认状态- button 普通的button按钮,不提交数据,配合js使用的
- file 文件
<form action="demo.php" method="POST" name="name1">
用户名:<input type="text"> </br>
密码:<input type="password"></br>
兴趣:<input type="checkbox">游泳<input type="checkbox">跳舞</br>
性别:<input type="radio" >男<input type="radio" >女</br>
</form>
2、name属性
name是表单元素的名字,性别单选按钮必须要有相同的名字,可以实现单选按钮 用来区别不同的表单元素
3、value属性
定义表单元素有什么值,默认值。主要给后台人员识别是什么值
4、checked属性
单选按钮或者复选按钮默认选中
lable标签
<label>
标签是input元素的定义标注
可以绑定表单元素,当点击label标签里面文字的时候,浏览器会自动将焦点转到对应的表单元素上,来增加用户体验。
<label>
标签的for
属性应当对应相关元素的id
属性相同
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<label for="name">姓名</label>
<input type="text" name="" id="name">
2.7.2 select下拉表单元素
<select></select>
标签控件定义下拉列表(双标签)
selected
默认选中
select里面至少包含一个option,多了没关系,可以使用selected设置默认选中
籍贯:
<form action="">
籍贯:
<select name="" id="">
<option value="">山东</option>
<option value="">北京</option>
<option value="" selected>天津</option>
</select>
</form>
2.7.3 textArea文本域
使用场景:用户需要输入比较多的文字
语法规范:双标签
<form action="">
留言:
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
第三部分 CSS层叠样式
HTML局限性:HTML只关注我们内容的语义,网页元素能显示出来就可以了,那里放图片啊、表格啊、表单啊,但是很丑,只关心网页元素是什么,特点:丑!没有羽毛的小鸟
HTML可以做简单的样式:但是繁琐
CSS:网页的美容师,小鸟的羽毛
CSS:是一种标记语言,称为CSS样式表。级联样式表
小结
- HTML:做结构
- CSS: 布局网页,最大的价值,由HTML做结构,CSS做样式,结构样式相分离
-----------------------------开始学习CSS---------------------------
3.1 CSS(1)
3.1.1语法规范
给谁改样式:{改什么样式}
p {
color:red
}
3.1.2 CSS选择器作用
选择标签的
CSS两件事:
找到标签选择器(选对人)
设置样式(做对事)
3.1.3 选择器
分类:基础选择器、复合选择器
(1) 基础选择器
-
标签选择器,HTML所有的标签作为选择器。div、span、p
优点:快速选择同类型样式设置统一样式 缺点:不能设计差异化,只能选择全部所有的标签 使用情况:较多
-
类选择器,单独选择一个或者某几个标签
语法:.类名{} 口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用 注意:“.”进行标识,不能用标签名来命名,比如p 长名字短横线来分割 .star-sing 不能纯数字,中文呢 命名有意义 多类名:可以使用多个类名,空格隔开就好 使用情况:非常多
<style> .red{ color:red } </style> <li class="red">4</li> <li>3</li> <li>2</li> <li>1</li> 可以使用多个类名,空格隔开就好 <div class="red font35"></div>
-
id选择器,专属
语法:#id名{} 口诀:样式#定义,结构用id调用,只能调用一次,别人切勿使用 使用情况:一般
<style> #pink{ color:pink } </style> <div id="pink">hahahha </div>
-
通配符选择器,选取页面中所有的标签
*{color:red} 页面中所有标签的颜色都是红色了 特殊情况采用,比如所有元素的内外边距 *{ padding:0; margin:0 } 使用情况:特殊情况下使用
(2)复合选择器
3.1.4 字体系列
- font-family定义文字字体
body{font-family:"微软雅黑"}
font-family:"微软雅黑",Arial 多个字体逗号隔开
-
font-size字体大小
px(像素)大小是我们网页最常用的单位 谷歌浏览器默认字体16px 不同浏览器默认大小不一样,尽量给一个明确的值,不要默认大小 可以给body指定大小,使得网页统一,然后再给特殊的地方指定特殊的字体大小
-
font-weight
blod加粗,以前可以套<strong></strong> bloder 特粗 number:100 200 300 400(=normal) 500 700(=blod) 800 900 我们可以使用 font-weight:400让默认加粗的字体不加粗,比如<h></h>
-
font-style
font-style:italic //倾斜 font-style:normal //正常,可以让<em></em>里面的字体变得正常不倾斜
-
字体的复合属性 font
body { // font:font-style font-weight font-size/line-height font-family font:italic 700 16px '微软雅黑' } 注意: 顺序不能颠倒,空格隔开 font-size font-famil不可省略
3.1.5 文本属性
-
color 颜色
color:pink; color:#ff0000; color:rgb(0, 200, 60); 三种表示方式: 预定义颜色 pink blue 16进制 RGB代码
-
text- align 对其文本(水平对其方式)
text-align: left; text-align: right; text-align: center;
-
text-decoration 装饰文本
none 默认,没有装饰线 underline 下划线 overline 上划线 line-through
取消a自带的下划线
a{ text-decoration: none; }
-
text-indent段落首行缩进
text-indent: 2em; em是一个相对单位,相对当前元素的大小。1em表示当前元素的一个文字大小
-
line-height行间距
行间距指的是上间距+文本高度+下间距 如果设定line-height等于文本高度,就没有上下间距了
3.1.6 CSS引入方式
三种样式表
1、行内样式表(行内式,控制一个标签) 适合修改简单样式
2、内部样式表(嵌入式,控制一个页面)
3、外部样式表(链接式,控制多个页面) <link>
<link rel="stylesheet" href="./外部样式.css">
rel="stylesheet"表示被链接的文档是一个样式表
3.2 CSS(2)
3.2.1 内容
3.2.2 Emmet语法
- !+回车 html5骨架
- div*10
- ul>li*6 大于号父子
- div+p 加号兄弟
- #banner
<div id="banner"></div>
- p.one
<p class="one"></p>
- .demo$*5 自增符号
<div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div>```
- div{hahahaha}
<div>hahahah</div>
3.2.3 复合选择器
更加准确更加高效
两个或者多个组合而成
包含:后代选择器、子选择器、并集选择器、伪类选择器等
-
后代选择器(又称为包含选择器)
元素1 元素2 {样式声明}
使用场景: 可以选择某个父元素里面的子元素 语法格式 元素1 元素2 {样式声明} 元素1和元素2空格隔开 修改的元素2的样式 元素2可以是儿子也可以是孙子 只修改ol里面的li ol li{ color:pink }
-
子选择器
只能选择某元素最近一级的元素,也就是亲儿子
元素1>元素2 {样式声明}
使用场景:
可以选择某个父元素里面的最近一级的元素
语法格式
元素1>元素2 {样式声明}
元素1和元素2大于号隔开
修改的元素2的样式
元素2只能是亲儿子
-
并集选择器
元素1,元素2 {样式声明}
使用场景: 通常用于集体声明 语法格式 元素1,元素2 {样式声明}
// 习惯竖着写,最后一个选择器不需要加逗号 div, p, .pig{ color:red }
-
伪类选择器 (冒号)
:hover
.:firdt-child
链接伪类: a:link 未被访问过 a:visited 已被访问过 a:hover 鼠标指针位于其之上的时候 a:active 选择活动链接,鼠标按下未弹起的链接 链接伪类注意事项: 为了确保生效,按照link、visited、hover、active(LVHA) 在实际工作中a在浏览器中自带样式,我们需要单独给a设置样式 :focus伪类选择器 //把获得光标的元素选出来 input:focus{ color: red; }
3.2.3 CSS的元素显示模式
-
1、什么是元素的显示模式
元素以什么样的方式显示 HTML元素一般分为块元素和行内元素
-
2、元素的几种显示模式
按道理HTML分为两大种,行内和块级元素,但是还有一种特殊的模式:行内块
块级元素:p、div、h1~h6 ul、ol、li
特点:
独占一行
宽度、高度、内外边距可以被控制
宽度默认是父级的100%
内部可以放块和行级元素
注意:
文字内的元素不能使用块级元素
p一般用来放文字,里面不允许放块级元素特别是div
同理h1~h6里面也不能放其他块级元素
行内元素 a、strong、em、i、del、s、ins、u、span
特点:
一行多个
宽度、高度直接设置无效,默认宽度是本身内容宽度
默认宽度是本身内容宽度
行内元素里面不允许放块级元素,只能容纳文本或者其他行内元素
注意:
链接里面不能再放链接
a里面可以包含块级元素,但是给a转换一下模式更安全
HTML元素中行内块元素,img、input、td它们具备行内特点也有块级元素特点
特点:
和相邻行内元素或者行内块元素在同一行,但是中间有空隙
默认宽度是本身内容宽度
宽度、高度、内外边距可以被控制
-
3、元素显示模式的相互转换代码
实际开发中,最常用的就是将行内转换成块级,例如下面的a链接转行成行内块,就可以设置宽度和高度了。其次就是行内块了 ``` a{ display: inline-block; width: 100px; height: 100px; background-color: thistle; } ``` display:block display: inline-block; display: inline;
3.2.4 推荐好用的截图工具
3.2.5 侧边栏案例
<style>
a{
display: block;
width: 230px;
height: 40px;
background-color: #bbbbbb;
font-size: 14px;
text-decoration: none;
color:#fff;
text-indent: 2em;
line-height: 40px;
}
a:hover{
background-color: tomato;
}
</style>
<body>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
<a href="#">手机</a>
</body>
文字垂直居中技巧:
line-height:盒子高度
原理:
行高=文字本身高度+上边距+下边距
行高小于盒子高度------------>偏上
行高大于盒子高度------------>偏下
3.2.6 CSS背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定
-
背景颜色
background-color: transparent; //透明 background-color: red;
-
背景图片
background-image:none|url(url)
常见于网页开发中的logo
-
背景平铺
background-repeat: no-repeat|repeat-x|repeat-y|repeat
background-repeat: no-repeat; //默认没有平铺 background-repeat: repeat-x; //x轴平铺 background-repeat: repeat-y; //x轴平铺 页面元素既可以添加背景颜色,也可以添加背景图片,只不过背景图片会压住背景颜色
-
背景位置
background-position: x y;
1、参数是方位名词
x和y取值 left|right|center|top|bottom
下面这两个效果一样
background-position: center right;
background-position: right center;
第一个值top表示y轴,那么x就是center;省略的参数默认居中!
background-position: top;
只指定一个方位名词,另一个省略,则第二个默认居中对齐
2、参数是精确单位
如果参数值是精准坐标,那么第一个肯定是x坐标,第二个肯定是y坐标
如果只指定一个数值,那么该数值一定是x坐标,另一个默认垂直居中
3、参数是混合单位
如果参数指定的两个精确值和方位名词混合使用,那么第一个肯定是x坐标,第二个肯定是y坐标
注意:
可以只带一个值,第二个参数默认center,我们可以根据第一个参数判断水平还是垂直的
如果指定的是数值,前后顺序就是x、y,如果只写一个默认是x,另一个就是y,默认垂直居中
-
背景图片固定(背景附着)
background-attachment: fixed|scroll;
scroll:滚动,默认值 fixed: 附着,固定
-
背景复合属性
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
顺序强制性的要求,但是提倡使用上诉顺序
-
背景色把透明
background:rgba(0,0,0,0.3)
最后一个参数透明度 0~1IE9+支持 实际开发中已经不管兼容性了,大胆的用
3.2.7 五彩导航栏
设计知识点: 1、模式转换 2、单行文字垂直居中 3、背景图片 4、链接伪类选择器
3.2.8 CSS三大特性
CSS有三个非常重要的特性:层叠性、继承性、优先级
-
层叠性
给相同选择器设置相同的样式,后来者居上 原则: 就近原则(就是后来者居上) 样式不冲突,不会覆盖
-
继承性
CSS中的继承:子标签会继承父元素的某些标签,主要和文字相关 优点:降低复杂性 body行高1.5,可以是的内部元素根据自己字体大小灵活调整行高 特殊:子元素可以继承父元素的行高,
-
优先级
当同一个元素指定多个选择器
注意事项:
四组数据永远不会进位
可以理解为ID选择器一定大于类选择器,以此类推
可以这么理解 :*和继承为0,元素是1、类和伪类是10、ID是100,行内1000
继承的权重为0 这点很重要,就算父亲是类选择器,子元素继承过来就是0
复合选择器会叠加权重
ul li{} 权重就是1+1=2
li{} 权重是1
.nav li{}. 10+1=11
a:hover 11
权重虽然会累加,但是不会进位
3.3 CSS(3)
页面布局三大合性:
- 盒子模型
- 浮动
- 定位
3.3.1 盒子模型
-
盒子模型组成
CSS盒子模型本质是一个盒子,封装周围的HTML元素,包括:边框,外边距、内边距、实际内容
1、边框
border:宽度 样式 颜色 没有顺序 border:1px solid red border-top: border-bottom: border-left: border-collapse:collapse 表示相邻边框合并在一起 边框会影响盒子的宽度
2、内边距 padding
设置盒子的内容和边框的距离 padding-left、padding-right、padding-top、padding-bottom padding简写 /* 如果padding后面只有一个值,表示上下左右都是这个值 */ padding:20px; /* 如果padding后面两个值。表示上下20px 左右30px */ padding: 20px 30px; /* 上是10px 左右是20px 下30px */ padding:10px 20px 30px; /* 上10 右 20 下 30 左 40 */ padding:10px 20px 30px 40px; 注意: padding也会影响盒子的宽度 如果你的盒子本身没有指定width/height属性,则padding不会撑开盒子
3、外边距 margin 盒子和盒子之间的距离 margin-left、margin-right、margin-top、margin-bottom
/* 上下左右30px */ margin:30px; /* 上下30、左右50 */ margin:30px 50px; /* 上30 左右40 下50 */ margin:30px 40px 50px; /* 上右下左 */ margin:30px 40px 50px 60px; /* 左右auto居中,上下100px*/ margin:100px auto;
4、外边距典型应用
外边距可以让盒子水平居中,但是必须满足两个条件
- 盒子本身要设置宽度
- 盒子左右外边距设置为auto margin:0 auto
以上是给块级元素设置水平居中的,如果是行内块或者行内元素水平的话,我们给父亲添加text-align:center
5、外边距合并
使用margin定义块级元素的垂直外边距时,肯能会出现外边距的合并
(1)嵌套块元素垂直外边距的塌陷 对于两个嵌套关系的块元素,父元素的上外边距同事子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方法: 给父亲设置外边框,可以解决margin塌陷问题 给父元素定义内边距 可以为父元素添加overflow:hidden(最常用) 如果盒子有浮动、固定定位、绝对定位的盒子就不会有塌陷问题,后面总觉
6、清除网页元素的内外边距
*{ margin: 0; padding: 0; } 行内元素尽量只设置左右内外边距,上下不要用margin来设置,设置了也没有效果,但是转换成块级和行内块就可以了
7、去掉li前面的小圆点
li{ list-style: none; }
-
圆角矩形(CSS3新增的样式1)
radius半径原理:圆和边框交集形成的圆角效果 border-radius:10px border-radius:50% //正方形变成圆形的办法 border-radius:高度的一半 //圆角矩形 border-radius:10px 20px 30px 40px //左上、右上、右下、左下 border-radius:10px 20px; //10px时左上、右下,对角线相同值
-
盒子阴影(CSS3新增的样式2)
/* 第一个:水平阴影 //必须 第二个:垂直阴影 //必须 第三个:模糊距离 第四个:阴影尺寸 第五个:阴影颜色 */ box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); 影子不占用空间的
-
文字阴影(CSS3新增的样式3)
text-shadow text-shadow: 5px 5px 6px rgba(0,0,0,.3);
3.3.2 浮动
- 浮动
三种传统的布局方式:
普通流(标准流):标签按照默认方式排列,基本的布局方式
浮动
定位
为什么需要浮动?
div需要展示在一行。利用display:inline-block中间有不确定宽度的缝隙。
两个盒子左右对齐
浮动可以改变元素标签默认的排列方式
浮动最典型的应用:可以让多个块级元素一行内排列显示
网页布局第一准则:对歌块级元素纵向排列找标准流,多个块级元素横向排列找浮动
什么是浮动?
float属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘触及包含块或者另一个浮动框的边缘
浮动特性:(非常重要)
(1)脱标 (2)一行内显示并且顶部对齐 (3)浮动元素会有行内块元素的特性
(1)脱标
脱离标准普通流的控制移动到指定的位置
浮动的盒子不再保留原先的位置
(2)浮动元素会有行内块元素的特性
如果行内元素给了浮动,则不需要转换成成行内块,可以直接给宽高
span{
/* 给行内元素添加浮动,则具有行内块特性 */
float: left;
width: 200px;
height: 200px;
background-color: green;
}
块级元素如果没有设置宽度,默认宽度和父级元素一样宽,但是给了浮动以后,他的大小就根据内容来决定了
div{
background-color: hotpink;
height: 200px;
/* 块级元素如果没有设置宽度,默认宽度和父级元素一样宽,但是给了浮动以后,他的大小就根据内容来决定了 */
float: right;
}
浮动布局主要点:
浮动元素经常和标准流父级搭配使用
一个元素浮动了,按道理其他兄弟也要浮动
浮动的盒子只会影响当前浮动元素后面的标准流(如果第一个盒子是标准流独占一行,第二个元素浮动了也不会压住第一个盒子)
为什么要清除浮动
并不是所有的浮动的父元素都要设置高度,有的父亲不能确定高度,需要根据内部浮动的元素数量确定高度,但是浮动的元素本身无法撑开父元素,因为浮动了。所以为了能让子盒子撑开,子盒子必须清除浮动。
由于浮动元素不占用位置,会影响后面的元素的排版
清楚浮动本质
清除浮动元素的本质就是清除浮动元素造成的影响
父盒子本身有高度,则不需要清除浮动
清除浮动以后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了
语法规范:
选择器{clear:属性值}
left、right、both
策略:闭合浮动(孩子很皮。让他关起来只在家里皮)
清除浮动的方法:
1、额外标签法
在最后一个浮动元素的后面添加一个额外的元素,
<div class="clear">
</div>
.clear{
clear: both;
}
缺点:添加许多无意义的标签,结构化较差
优点:通俗易懂,书写方便
注意:新添加的元素必须是块级,不然无法清楚浮动
2、给父亲添加overflow
overflow: hidden、auto、 scroll;
缺点:无法显示溢出部分
优点:简洁
3、清除浮动---:after
.clearfix:after{
content:"";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* IE6、7专用 */
*zoom:1;
}
然后给父元素添加样式 clearfix
优点:没有新增标签,结构更简单
缺点:照顾低版本浏览器
代表网站:百度、淘宝、网易
4、清除浮动---双伪元素清楚浮动
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1
}
然后给父元素添加样式 clearfix
代表网站:小米、腾讯
3.3.3 定位
- 定位
为什么需要定位
1、某个元素可以自由的在盒子内移动位置,并且压住其他盒子
2、当滚动窗口时有些盒子是固定在屏幕中的某个位置
定位组成
定位:是将盒子定在某个位置,随意定位也是摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式:position属性设置的
static、relative、absolute、fixed
边偏移: top、bottom、right、left四个属性来移动位置
1、静态定位
元素默认的定位方式,无定位的意思
语法:选择器{position:static}
静态定位就是按照标准流的特性摆放位置,它没有边偏移
很少使用
2、相对定位
元素在移动位置的时候,是相对他原来的位置定位的(自恋)
选择器{position:relative}
特点:
参照原来位置移动的
虽然盒子走了,但是原来的位置还会保留的(不脱标)
3、绝对定位
元素在移动位置的时候,是相对他祖先元素来说的(拼爹)
选择器{position:absolute}
如果没有祖先或者祖先没有定位。以浏览器来定位的
如果祖先元素有定位(相对、绝对、固定),则以最近一级有定位的祖先来定位
绝对定位脱离标准流,不再占用原来的位置
子绝父相
子盒子不占用位置,用绝对定位
子盒子不能根据浏览器来定位,应该按照父级
父元素一定要有定位,相对定位可以保留位置,
4、固定定位
固定定位是元素固定于浏览器的可视区域的位置
使用场景:可以在浏览器页面滚动时元素的位置不会改变
选择器{position:fixed}
特点:
浏览器的可是窗口
不随滚动条而滚动
和父元素无关
不占有原来位置(脱标)
算法: 小图标怎么固定在版心右侧
先 left 50%
再贴着版心走版心宽度的50%
5、粘性定位
是相对定位和固定定位的混合
语法:
选择器{position:sticky;top:10px}
粘性定位特点:
以浏览器的可是窗口作为参照物移动物体(固定定位特点)
粘性定位占用原来的位置(相对定位特点)
必须添加top、left、right、bottom其中一个才有效
兼容性很差,IE不支持
网上常见的这种效果都不是粘性定位做的,而是JS做的
6、定位叠放次序
z-index:1
数值越大,盒子越靠上
只有定位的盒子才有z-index属性
属性值相同,按照书写顺序后来者居上
数字后面千万不能加单位
拓展
加了绝对定位的盒子不能通过margin:0 auto来居中,我们可以利用下述算法来定位
水平居中
left:50%
margin-left:负的盒子宽度的一半
垂直居中
top:50%
margin-top:负的盒子高度的一半
定位的特殊特性
行内元素添加了绝对或者固定定位,可以直接设置宽高
块级元素添加了绝对或者固定定位,如果不给宽高,默认大小是内容的大小
绝对定位(固定)会完全压住盒子
浮动定位的元素不会压住下面标准流的文字
固定定位会压住下面标准流的所有内容
浮动为什么不会压住文字,因为浮动产生的最初目的就是为了做文字环绕效果,文字会围绕浮动元素
元素的显示和隐藏
让一个元素在页面中显示和隐藏起来
1、display
2、visibility
3、overflow
-
display
display:none; //隐藏元素(不占有原来位置) display:block //1、转换成块级。2、显示元素 display:inline-block .....还有很多
-
visibility
visibility:hidden; //隐藏元素(继续占有原来位置) visibility:visible;
-
overflow 溢出
对溢出、部分显示隐藏 overflow:hidden overflow:visible overflow:scroll //一直显示滚动条 overflow:auto //按需显示滚动条
定位的的盒子慎用overflow:hidden,他会隐藏多余的部分
1、display显示和隐藏元素,但是不保留位置 2、visibility显示隐藏元素,但是保留原来的位置 3、overflow溢出部分显示和隐藏
3.4 CSS(4) CSS高级
3.4.1 精灵图
一个网页往往会因为很多很小的背景图像作为修饰,当网页图片过多的时候,造成服务器压力过大,降低加载速度
精灵技巧目的:为了有效的减少服务器发送和请求的次数,提高页面加载速度
精灵图核心:
精灵图主要针对背景图片,不适用产品图片,产品图片经常更换
这个大图也称为sprites精灵图或者雪碧图
一栋背景图片的位置,此时使用background-position
移动的距离就是这个小图的x轴y轴坐标
3.4.2 字体图标
精灵图缺点:
图片文件比较大
图片本身放大和缩小失真
替换图标复杂
有一种技术的出现,解决了字体图标缺陷,字体图标看上去像图片,
本身却是字体,可以更改大小不失真。
可以修改颜色
字体图标优点
轻量级:一个字体图标要比一系列的图像要小,一旦字体加载了,图标立马渲染,不需要去服务器请求
灵活性:本身是文字,改颜色、阴影、透明效果
兼容性高:几乎支持所有的浏览器
但是复杂背景图片精灵图可以做,字体图标做不到,所以不能代替,只能对部分图标进行提升和优化
3.4.3 CSS三角形
.box{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-top: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
3.4.4 CSS用户界面
更改用户的操作样式,提高用户体验
-
更改用户鼠标样式
-
表单轮廓
-
防止表单域拖拽
鼠标样式 cursor
cursor: move;
cursor: not-allowed;
cursor: pointer;
cursor: text;
轮廓线 outline
input{
outline: none;
} //取消表单轮廓线
文本域 resize
textarea{
resize: none;
}
3.4.5 vertical-align
用于设置一个元素的垂直对齐方式,只针对行内元素或者行内块元素有效
(1)实现文字和图片垂直对齐
vertical-align:middle;
vertical-align:bottom;
vertical-align:baseline; //默认基线对齐
vertical-align: top;
图片、表单都属于行内块元素,默认的vertical-align是基线对齐
(2)解决图片底部默认空白缝隙
图片底部有空白缝隙,原因是行内块元素会和文字的基线对齐
解决方案:
第一种:给图片添加 vertical-align:middle、bottom、top;(提倡)
第二种:display:block
img{
/* 第一种解决缝隙的办法(提倡) */
vertical-align: bottom;
/* 第二种解决缝隙的办法 */
display: block;
}
3.4.5 溢出文字省略号显示
单行文本必须满足三个条件:
强制一行显示文本:white-space: nowrap;
超出部分隐藏:overflow: hidden;
文字用省略号代替超出部分:text-overflow: ellipsis;
多行文本
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
3.4.6 常见的布局技巧
1、margin负值的运用
2、文字围绕浮动元素
3、行内块的巧妙运用
4、三角形的强化
1、margin负值的运用
可以巧妙的压住相邻盒子边框变粗
margin-left: -1px;
但是会出现一个问题,就是鼠标经过边框高亮的时候会被隔壁边框压住,
解决办法:
/* 如果盒子没有定位,定位的盒子会压制其他盒子 */
/* position: relative; */
/* 第二种 增加层级*/
z-index: 1;
2、文字围绕浮动元素
浮动的边框不会压住文字,文字会环绕这图片显示的,浮动的起初目的就是做文字环绕的
3、行内块的巧妙运用
3.4.7 CSS初始化
不同浏览器默认值不同,为了消除不同浏览器对HTML文本呈现的差异
第四部分 HTML5和CSS3提高
4.1 HTML5
HTML增加了:
新的标签
新的表单
新的表单属性
注意:新的特性IE9+以上支持,不考虑兼容性可以使用,移动端可以放心使用
新特性太多了,这里列举最常用的
div对于搜索引擎是没有语义的,HTML5新增了带有语义化的标签
<header>
<nav>
<article>
<section>
<aside>
<footer>
这些语义话对于前端来说是和div一样的
主要是有利于搜索引擎
新标签页面可以使用多次
在IE9种需要把这些元素转换成块级元素
其实,移动端更喜欢用这些标签
HTML新增了多媒体标签
1、音频 audio(推荐MP3)
2、视频 video(推荐MP4格式的,兼容大部分浏览器)
<!-- 谷歌浏览器把autoplay禁用了,但是我妈添加静音(muted)就可以自动播放了 -->
<!-- controls="controls"控件 -->
<video src="./media/mi.mp4" controls="controls" autoplay="autoplay" muted width="800px" height="500px"></video>
<!-- autoplay自动播放,谷歌把音频自动播放关闭了,没有很好的解决方案
controls播放控件,手动播放
-->
<audio src="./media/music.mp3" autoplay="autoplay" controls></audio>
HTML新增的Input表单
<input type="search">
type="email"
type="date"
type="time"
type="month"
type="week"
type="number"
type="tel"
type="search"
type="color"
HTML新增的表单属性
required
<input type="search" required>
placeholder
autofocus
multiple
<input type="file" multiple>
设置placeholder样式
input::placeholder{
color:pink;
}
4.2 CSS3
4.2.1 CSS3 选择器
CSS3新增选择器
属性选择器
结构伪类选择器
伪元素选择器
属性选择器
注意: 类选择器、属性选择器、伪类选择器,权重为10
结构伪类选择器
div:nth-chlid(1)
执行的时候,先看第一个,之后会去看标签是不是div
div:nth-of-type(1)
先找到标签是div的,再去看第几个孩子
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化了HTML结构
::before
::after
before、after创建一个元素,但是属于行内元素
新创建的这个元素在文档树中找不到的,被我们称为伪元素
语法:elment::bafore{}
before、after必须有content属性
伪元素和标签选择器一样,权重为1
-
伪元素清除浮动的原理
.clearfix:after{ content:"", //伪元素必须写 display:block; //转换成块 height:0; //不想显示 clear:both; //清除浮动的核心 visibility:hidden; //不想显示 }
双伪元素清楚浮动
.clearfix:before, .clearfix:after{ content: ""; display: table; //转换成块元素并且一行显示 } .clearfix:after{ clear: both; } .clearfix{ *zoom:1 }
4.2.2 CSS3 盒子模型
CSS3通过box-sizing来指定盒子模型,两个值:content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
所以以后我们利用
*{
padding:0;
margin:0;
box-sizing:border-box;
}
这样我们就可以放心设置padding、border了
4.2.3 CSS3 滤镜
filter:blur(5px)
//数值越大,图片越模糊
img{
filter: blur(3px);
}
4.2.4 CSS3 calc
// 宽度永远比父盒子少30px
div{
width: calc(100% - 30px);
height: 40px;
background-color: indigo;
}
4.2.5 CSS3 过渡
过渡是CSS3具有颠覆性的特征之一
过度就是从一个状态渐渐过渡到另一个状态
transition:要过渡的属性 花费时间 运动曲线 何时开始
属性:想要变化的CSS属性,宽度高度、背景颜色、内外边距
花费时间:秒
运动曲线:默认ease
何时开始:延时时间,默认是0
谁做过渡给谁加
transition: width 1s, height 1s;
transition: all 1s;
4.3 CSS3 2D转换
转换可以理解为:
移动 translate
旋转 rotate
缩放 scale
2D是在改变二维平面上的坐标位置、形状
4.3.1 2D移动translate
语法:
transform: translate(x,y)
transform: translateX(x);
transform: translateY(y);
X、Y轴移动100px:
transform: translate(100px,100px);
translate只移动X轴,Y轴的0不能省略(下面两种效果相同)
如果使用translateX只能给一个值
transform: translate(100px,0);
transform: translateX(100px);
重点:
translate不会影响其他盒子
translate(50%,50%);这里的百分比是相对于盒子本身的
对行内标签没有效果
案例水平垂直剧中
div{
height: 100px;
width: 100px;
background-color: seagreen;
position: absolute;
left: 50%;
top:50%;
/* 这里的50%就是盒子宽度的一半 */
transform: translate(-50%,-50%);
}
CSS3新增的水平垂直居中的办法,这种好处就是盒子大小变了也不需要修改,适用于盒子宽度不定的情况。
4.3.2 2D旋转rotate
transform: rotate(度数);
transform: rotate(30deg);
旋转应用:
思路:正方形设置两个边框,然后进行选择
``` div{
width: 249px;
height: 35px;
border:1px solid #000;
position: relative;
}
div::after{
content: "";
position: absolute;
top: 0;
right: 10px;
width: 15px;
height: 15px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform: rotate(45deg);
}```
一般的旋转都是围绕中心点旋转的,我们可以通过transform-origin来改变旋转点
语法:transform-origin(x,y)
默认值:transform-origin(50%,50%) //中心点
还可以给方位名词、像素:transform-origin: left bottom;
4.3.3 2D转换之缩放scale
语法:transform:scale(x,y)
宽高2倍:transform: scale(2,2);
宽2倍高度不变:transform: scale(2,1);
宽高等比例缩放2倍:transform: scale(2);
可以进行缩小,小于1缩放
宽高0.5倍:transform: scale(0.5,0.5);
4.3.4 2D复合写法
格式:transform: translate() rotate() scale();
transform: translate(50px,50px) rotate(180deg);
注意:
同时有位移和其他属性的时候,记得位移放最前面
总结:
4.4 CSS3 动画
animation是CSS3具有颠覆性的特征之一,实现复杂的动画效果
步骤:
1、先定义动画
2、再使用动画
1、定义动画:
@keyframes 动画名字{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}
2、调用动画
animation-name: move;
animation-duration: 1s;
3、from...to等价于 0%~100%
from{
transform: translateX(0px);
}
to{
transform: translateX(1000px);
}
3、动画常见属性
/* 动画名词,必须的 */
animation-name: move;
/*持续时间,必须的 */
animation-duration: 3s;
/* 运动曲线 */
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
/* 何时开始 */
animation-delay: 2s;
/* 重复次数 infinite是无数次*/
animation-iteration-count: infinite;
animation-iteration-count: 3;
4、动画简写
animation: name duration timing-function delay iteration-count direction fill-mode;
4.5 CSS3 3D转换
3D位移
3D旋转
透视
3D呈现
4.5.1 3D位移
translateZ 沿着Z轴
后面单位一般px,很少跟其他单位!!!!!!
translateZ(100px) 向外移动100px
下面两种写法等价,注意:简写的时候不能省略,没有就是0
transform: translateX(100px) translateY(100px) translateZ(100px);
transform: translate3d(100px,100px,100px);
4.5.2 3D透视
prespective
透视写在被观察元素的上面
4.5.3 3D旋转
transform: rotateX(度数);
左手准则:
左手的拇指指向x轴的正方向
其余手指弯曲方向就是该元素沿着x轴旋转的方向
transform: rotateY(度数);
左手准则:
左手的拇指指向y轴的正方向
其余手指弯曲方向就是该元素沿着y轴旋转的方向
rotate3d简写
transform: rotate3d(x,y,z,度数);
六点钟方向旋转
transform: rotate3d(1,1,0,45deg);
4.5.4 3D呈现
transform-style: flat; 子元素不开启3D立体空间
/* 让子元素保持3D立体环境 */
transform-style: preserve-3d;
第五部分 品优购项目
项目项目描述:我们要完成首页、列表页、注册页
网站TDK三大标签SEO优化
SEO:搜索引擎优化,是一种利用搜索引擎规则提高网站的有关搜索引擎自然排名的方式。
SEO目的:对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提高网站的排名,提高网站的知名度
页面必须有三个标签来符合SEO优化:
1、title网站标题
具有不可替代性,是我们内页第一个重要标签,是搜索引擎了解网页的入口喝对网页主题归属的最佳判断点
建议L网站名(产品名)-网站的介绍(<30字)
2、description网站说明
我们是...我们提供...(专门的SEO人员编写)
3、keywords关键字
6-8个关键词
5.1 首页开发
LOGO SEO
1、logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎这个地方很重要
2、h1里面在放一个链接,可以返回首页的,把logo的背景图片链接即可
3、为了让搜索引擎更好的搜索我们,我妈要在链接里放文字,但是文字不要显示出来
4、给链接一个title属性,这样鼠标放到logo上
隐藏文字两种做法
1、font-size:0
2、text-indent:-9999px;
overflow:hidden;
搜索模块
Tab栏切换
原理:两个盒子 tab_list放选项卡,tab_content放内容,有几个选项就有几个内容,点几选项几就显示选项几,其他的隐藏即可。
第六部分 移动端Web开发(流式布局)
-
目标
能够知道移动端web的开发现状 能够写出标准的viewport 能够使用移动web调试方法 能够说出移动端常见的布局方案 能够描述流式布局 能够独立完成京东移动端首页
-
知识点
移动端基础 视口 二倍图 移动端调试 移动端技术解决方案 移动端常见布局 移动端开发之流式布局
6.1 移动端基础
-
移动端常见浏览器
国内的手机端浏览器主要根据webkit修改过来的内核 所以移动端我们主要兼容webkit 移动端碎片化严重,分辨率和尺寸大小不一
6.2 视口
视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。
6.2.1 布局视口layout viewport
一般的移动设备的浏览器默认设置了一个布局视口
布局视口把分辨率设置成980px
元素看上去会小
6.2.2 视觉视口
6.2.3 理想视口 idea viewport
-
为了使网站在移动端有最理想的浏览和阅读宽度而设定的
-
理想视口对设备来讲就是最理想的视口尺寸
-
需要手动添加meta视口标签通知浏览器操作
-
meta视口主要目的:布局视口的宽度应该与理想视口的宽度一致,简单的理解就是设备又多款,我们的布局视口就有多宽
6.2.4 meta视口标签
标准的写法
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
6.3 二倍图
- 物理像素:就是手机分辨率,例如iphone8 750*1334
- 我们开发1px不一定是1个物理像素
- 电脑端1px等于1物理像素
- iphone8的1px开发像素等于2个物理像素
这里的320*568是开发像素
6.3.1 为什么要倍图?
我们需要50*50像素的图片,直接放到我们的iphone8里面会放大2被,100*100就会模糊
我们采取的是放一个100*100图片,然后手动的把这个图片缩小为50*50(css
像素)
我们准备的图片比我们实际需要的大小大2倍,这就是二倍图
6.3.2 背景缩放background-size
-
第一个参数高度,第二个参数宽度
background-size: 500px 200px;
-
只写一个参数,肯定是宽度,高度省略了,等比例缩放
background-size: 500px;
-
里面的参数可以跟百分比,相对父盒子
background-size:50%;
-
宽高全部拉伸,整个盒子完全盖住(可能有部分背景图片显示不全)
background-size: cover;
-
宽高等比例缩放,宽或者高度铺满div盒子就不再进行拉伸了,这样可能有部分空白区域
background-size: contain;
6.4 移动端开发选择
移动端主流方案
1、移动端单独制作
主流
2、响应式页面兼容
通过判断屏幕宽度调整页面布局
制作非常麻烦,需要考虑兼容性问题
6.5 移动端技术解决方案
移动端主要以webkit内核为主
H5、CSS3可以大胆的使用
移动端CSS初始化推荐normalize.css
https://necolas.github.io/normalize.css/
CSS3盒子模型box-sizing
移动端可以全部CSS3盒子模型,PC端不考虑兼容性问题可以使用CSS3盒子模型
6.6 移动端常见布局
1、单独制作移动端
流式布局
flex布局
less+rem+媒体查询布局
混合布局
2、响应式页面兼容移动端
媒体查询
bootstrap
6.7 流式布局(百分比布局)
流式布局就是百分比布局,非固定像素
通过盒子宽度设置成百分比根据屏幕宽度进行伸缩,不受固定像素限制
流式布局是移动端常见布局
6.8 京东移动首页
1、技术选型
方案:我们采取单独制作移动页面方案
技术:布局采取流式布局
2、常用的初始化
body很重要,设置最大和最小宽度,并且居中显示等等
body{
width: 100%;
/* 防止变形 */
min-width: 320px;
max-width: 640px;
/* 居中 */
margin: 0 auto;
font-family: -apple-system, Helvetica, sans-serif;
font-size: 14px;
color: #666;
}
第七部分 移动端Web开发(flex布局)
目标:
能够说出flex盒子的布局原理
能够使用flex布局的常用属性
7.1 对比
-
传统布局
兼容性好 布局繁琐 不能再移动端很好的布局
-
flex
操作简单,布局简单,移动端应用广泛 PC端支持情况差 不需要清楚浮动、平均分配、居中对齐....
7.2 flex布局原理
flex布局原理: 通过给父盒子添加flex属性,来达到控制子盒子的位置和排列方式
弹性布局:任何一个容器都可以flex布局
注意
当我们为父盒子设置flex布局,子元素的float、clear和vertical-align属性将失效
7.3 flex布局父项属性
7.3.1 flex-direction:设置主轴的方向
默认的主轴方向row X轴
我们可以把主轴设为Y轴
flex-direction: column;
Y轴翻转
flex-direction: column-reverse;
7.3.2 justify-content:设置主轴上子元素排列方式
注意:使用这个属性,一定要确认好主轴是什么
justify-content: flex-start; //默认从左
justify-content: flex-end; //从右,顺序不变
justify-content: center; //居中
justify-content: space-around; //平分剩余空间,平均分配
justify-content: space-between; //两边贴边,中间平分
7.3.3 flex-wrap:设置子元素是否换行
默认所有的子元素在一行显示,放不下就硬挤在一起,缩小宽度。
//默认
flex-wrap: nowrap;
//换行
flex-wrap: wrap;
7.3.4 align-content:设置侧轴上的子元素的排列方式,多行
必须出现换行的时候才会有效,对单行是没有效果的
7.3.5 align-items:设置侧轴上的子元素的排列方式,单行
align-items是专门设置侧轴的
对比: align-content和align-items区别
align-items适合单行,但是只有上对齐、下对齐,居中和拉伸
align-content适应与换行(多行)的情况下(单行无效),可以设置上对齐、下对齐、居中,拉伸,以及平分剩余空间等属性
总结就是
单行找align-items
多行找align-content
7.3.6 flex-flow:复合属性,
相当于同时设置了flex-direction和flex-wrap
flex-direction: column;
flex-wrap: wrap;
/* 把设置主轴方向和是否换行(列)简写 */
flex-flow: column wrap;
7.4 flex布局子项常见属性
7.4.1 flex子项占有数项
最重要的,利用flex表示占有的份数
7.4.2 align-self控制子项自己崽侧轴的排列方式
7.4.3 order属性定义子项的排列顺序(前后顺序)
7.5 携程网移动端首页
7.5.1 技术选型
方案:我们采取单独制作移动端页面 技术:flex布局
7.5.2 开发重难点
-
常见上下布局flex
-
背景渐变色
背景渐变必须添加浏览器我们私有前缀 background: -webkit-linear-gradient(left,red,blue); background: linear-gradient(left,red,blue);
- flex两行布局
第八部分:移动端web开发之rem适配布局
8.1 目标
- 使用rem单位
- 使用媒体查询
- less语法
- rem适配布局
- 苏宁首页案例制作
为什么要引入rem?
页面布局文字可以随着屏幕大小而变化
流式布局和flex布局主要针对宽度布局,那高度如何设置
让屏幕发声变化时高度和宽度等比例缩放
8.2 rem基础
-
rem类似于em,是一个相对元素,
em是相对于父元素来说的,是父元素字体大小 rem的基准是相对于html元素的字体大小
html{
font-size: 14px;
}
div{
font-size: 20px;
}
/* p的宽度是140*140,说明rem是相对于html元素的,和父元素没有关系 */
p{
width: 10rem;
height: 10rem;
background-color: green;
}
-
为什么有了em还要rem?
em是相对父元素字体的大小,但是不同盒子父元素字体大小不同意 rem是相对于HTML元素,HTML元素只有一个
-
rem优点
rem可以通过修改HTML元素里面的元素大小,来整体改变页面元素的大小,可以整体控制
8.3 媒体查询
Media Query是CSS3新语法
-
针对不同屏幕尺寸设置不同的样式
-
使用@media查询,可以针对不同的媒体查询类型定义不同的样式
-
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
-
目前针对很多苹果手机、Android手机,平板等设备得到多媒体查询
@media screen and (max-width:800px){ body{ background-color: pink; } } @media screen and (max-width:500px){ body{ background-color: purple; } }
媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化
简而言之,媒体元素监控设备宽度可以改变HTML里面的字体从而控制rem的取值
8.4 LESS
CSS弊端
非程序语言,没有变量、函数、作用域
CSS 书写大量看似没有逻辑的diamanté,CSS冗余度高
不方便维护和扩展,不利于复用
CSS没有很好的计算能力
附录1 web服务器
服务器本质是一台电脑
在网络环境下,根据服务器提供的服务类型不同
文件服务器
数据库服务器
应用程序服务器
Web服务器
Web服务器一般指的的网站服务器
根据位置不同,分为:本地服务器和远程服务器
本地服务器主要是局域网中访问
如果想要在互联网中访问,需要上传到远程服务器
申请免费服务器
1、去免费网站https://free.3v.do/
2、记录下主机名、用户名、密码、域名
3、利用cutftp软件上传网站到远程服务器
4、浏览器中输入域名
附录2 浏览器的私有前缀和总结
-moz- 火狐
-ms- IE
-webkit- safiri 谷歌
-o- Opera