前端系统学习之-HTML、CSS

433

目标:精通网页布局

  • 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、 &nbsp;空格 &lt;小于 &gt; 大于

第二部分 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、leftright
 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-weight400让默认加粗的字体不加粗,比如<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 内容

image.png

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 选择活动链接,鼠标按下未弹起的链接
      链接伪类注意事项:
         为了确保生效,按照linkvisitedhoveractive(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 侧边栏案例

image.png

   
<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:盒子高度

原理:

    行高=文字本身高度+上边距+下边距
    

image.png

行高小于盒子高度------------>偏上

行高大于盒子高度------------>偏下

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~1

     IE9+支持
     实际开发中已经不管兼容性了,大胆的用
    

3.2.7 五彩导航栏

image.png 设计知识点: 1、模式转换 2、单行文字垂直居中 3、背景图片 4、链接伪类选择器

3.2.8 CSS三大特性

CSS有三个非常重要的特性:层叠性、继承性、优先级

  • 层叠性

    给相同选择器设置相同的样式,后来者居上
    原则:
       就近原则(就是后来者居上)
       样式不冲突,不会覆盖
    
  • 继承性

     CSS中的继承:子标签会继承父元素的某些标签,主要和文字相关
     优点:降低复杂性
          body行高1.5,可以是的内部元素根据自己字体大小灵活调整行高
     
     特殊:子元素可以继承父元素的行高,
    

image.png

  • 优先级

    当同一个元素指定多个选择器

image.png

 注意事项:
    四组数据永远不会进位
    可以理解为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)

image.png

页面布局三大合性:

  • 盒子模型
  • 浮动
  • 定位

3.3.1 盒子模型

  • 盒子模型组成

     CSS盒子模型本质是一个盒子,封装周围的HTML元素,包括:边框,外边距、内边距、实际内容
     
    

    1、边框

           border:宽度 样式  颜色  没有顺序
           border:1px solid red  
           border-top:
           border-bottom:
           border-left:
           
           border-collapse:collapse 表示相邻边框合并在一起
           
           边框会影响盒子的宽度
    

    2、内边距 padding

    设置盒子的内容和边框的距离
    padding-leftpadding-rightpadding-toppadding-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 浮动

image.png

  • 浮动
三种传统的布局方式:
   普通流(标准流):标签按照默认方式排列,基本的布局方式
   浮动
   定位
   

为什么需要浮动?

    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:属性值}
        leftright、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 定位

image.png

  • 定位

为什么需要定位

     1、某个元素可以自由的在盒子内移动位置,并且压住其他盒子
     2、当滚动窗口时有些盒子是固定在屏幕中的某个位置

定位组成

定位:是将盒子定在某个位置,随意定位也是摆放盒子,按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式:position属性设置的

     static、relative、absolute、fixed

边偏移: top、bottom、right、left四个属性来移动位置

1、静态定位
     元素默认的定位方式,无定位的意思
     语法:选择器{position:static}
     静态定位就是按照标准流的特性摆放位置,它没有边偏移
     很少使用
2、相对定位
     元素在移动位置的时候,是相对他原来的位置定位的(自恋)
     选择器{position:relative}
     
     特点:
        参照原来位置移动的
        虽然盒子走了,但是原来的位置还会保留的(不脱标)
        
3、绝对定位
  元素在移动位置的时候,是相对他祖先元素来说的(拼爹)
  选择器{position:absolute}
  
  如果没有祖先或者祖先没有定位。以浏览器来定位的
  如果祖先元素有定位(相对、绝对、固定),则以最近一级有定位的祖先来定位
  绝对定位脱离标准流,不再占用原来的位置
  

    
    子绝父相
      
      子盒子不占用位置,用绝对定位
      子盒子不能根据浏览器来定位,应该按照父级
      父元素一定要有定位,相对定位可以保留位置,
      
4、固定定位
    固定定位是元素固定于浏览器的可视区域的位置
    使用场景:可以在浏览器页面滚动时元素的位置不会改变
    选择器{position:fixed}
    
    特点:
    
        浏览器的可是窗口
        不随滚动条而滚动
        和父元素无关
        不占有原来位置(脱标)
        

image.png

算法: 小图标怎么固定在版心右侧

  先 left 50%
  再贴着版心走版心宽度的50%
  

image.png

5、粘性定位
   是相对定位和固定定位的混合
   
   语法:
   
     选择器{position:sticky;top:10px}
   
   粘性定位特点:
      以浏览器的可是窗口作为参照物移动物体(固定定位特点)
      粘性定位占用原来的位置(相对定位特点)
      必须添加topleftrightbottom其中一个才有效
      
     
   兼容性很差,IE不支持
   
   网上常见的这种效果都不是粘性定位做的,而是JS做的
   
6、定位叠放次序
z-index:1

数值越大,盒子越靠上
只有定位的盒子才有z-index属性
属性值相同,按照书写顺序后来者居上
数字后面千万不能加单位
拓展

加了绝对定位的盒子不能通过margin:0 auto来居中,我们可以利用下述算法来定位

         水平居中
           left50%
           margin-left:负的盒子宽度的一半
         
         垂直居中
            top:50%
            margin-top:负的盒子高度的一半

定位的特殊特性

    行内元素添加了绝对或者固定定位,可以直接设置宽高
    块级元素添加了绝对或者固定定位,如果不给宽高,默认大小是内容的大小
   

绝对定位(固定)会完全压住盒子

     浮动定位的元素不会压住下面标准流的文字
     固定定位会压住下面标准流的所有内容
     
     浮动为什么不会压住文字,因为浮动产生的最初目的就是为了做文字环绕效果,文字会围绕浮动元素
       
  
  
元素的显示和隐藏
  让一个元素在页面中显示和隐藏起来
  
  1display
  2visibility
  3overflow
  
  • 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高级

image.png

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 常见的布局技巧

  1margin负值的运用
  2、文字围绕浮动元素
  3、行内块的巧妙运用
  4、三角形的强化
  

1、margin负值的运用

 可以巧妙的压住相邻盒子边框变粗
 margin-left: -1px; 

 但是会出现一个问题,就是鼠标经过边框高亮的时候会被隔壁边框压住,
 解决办法:
         /* 如果盒子没有定位,定位的盒子会压制其他盒子 */
        /* position: relative; */
        /*  第二种  增加层级*/
        z-index: 1;

2、文字围绕浮动元素

 浮动的边框不会压住文字,文字会环绕这图片显示的,浮动的起初目的就是做文字环绕的 

3、行内块的巧妙运用

3.4.7 CSS初始化

不同浏览器默认值不同,为了消除不同浏览器对HTML文本呈现的差异

第四部分 HTML5和CSS3提高

image.png

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新增选择器

  属性选择器
  结构伪类选择器
  伪元素选择器
属性选择器

image.png

image.png

注意: 类选择器、属性选择器、伪类选择器,权重为10

结构伪类选择器
    div:nth-chlid(1)
        执行的时候,先看第一个,之后会去看标签是不是div
        
    div:nth-of-type(1)
        先找到标签是div的,再去看第几个孩子
         

image.png

伪元素选择器
伪元素选择器可以帮助我们利用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了

image.png

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轴移动100pxtransform: 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新增的水平垂直居中的办法,这种好处就是盒子大小变了也不需要修改,适用于盒子宽度不定的情况。 image.png

4.3.2 2D旋转rotate

  transform: rotate(度数);
  transform: rotate(30deg);
  

旋转应用:

image.png

思路:正方形设置两个边框,然后进行选择

   ``` 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-origin50%,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);
注意:
   同时有位移和其他属性的时候,记得位移放最前面

总结:

image.png

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旋转

image.png

image.png

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标签,目的是为了提权,告诉搜索引擎这个地方很重要
2h1里面在放一个链接,可以返回首页的,把logo的背景图片链接即可
3、为了让搜索引擎更好的搜索我们,我妈要在链接里放文字,但是文字不要显示出来
4、给链接一个title属性,这样鼠标放到logo上

隐藏文字两种做法

 1font-size:0
 2、text-indent:-9999px;
    overflow:hidden;
    

搜索模块

image.png

Tab栏切换

原理:两个盒子 tab_list放选项卡,tab_content放内容,有几个选项就有几个内容,点几选项几就显示选项几,其他的隐藏即可。
 

image.png

第六部分 移动端Web开发(流式布局)

  • 目标

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

      移动端基础
      视口
      二倍图
      移动端调试
      移动端技术解决方案
      移动端常见布局
      移动端开发之流式布局
      
    

6.1 移动端基础

  • 移动端常见浏览器

     国内的手机端浏览器主要根据webkit修改过来的内核
     所以移动端我们主要兼容webkit
     移动端碎片化严重,分辨率和尺寸大小不一
     
     
    

6.2 视口

视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。

6.2.1 布局视口layout viewport

一般的移动设备的浏览器默认设置了一个布局视口

布局视口把分辨率设置成980px
元素看上去会小

image.png

6.2.2 视觉视口

image.png

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是开发像素

image.png

image.png

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内核为主
  H5CSS3可以大胆的使用
  移动端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布局,子元素的floatclearvertical-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-contentalign-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;

 

image.png

7.4 flex布局子项常见属性

7.4.1 flex子项占有数项

       最重要的,利用flex表示占有的份数
       

image.png

7.4.2 align-self控制子项自己崽侧轴的排列方式

7.4.3 order属性定义子项的排列顺序(前后顺序)

7.5 携程网移动端首页

7.5.1 技术选型

方案:我们采取单独制作移动端页面 技术:flex布局

7.5.2 开发重难点

  • 常见上下布局flex

image.png

  • 背景渐变色

      背景渐变必须添加浏览器我们私有前缀 
    
      background: -webkit-linear-gradient(left,red,blue);
      background: linear-gradient(left,red,blue);
    

image.png

  • flex两行布局

image.png

image.png

第八部分:移动端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