前端基础进阶7

前端基础进阶

响应式

  • 响应式网页

    • 一套代码适配不同的屏幕设备

　　

  • 媒体查询

    • 基本语法

    • 根据设备宽度的变化，设置差异化样式

    • 开发常用写法

      • 媒体特性常用写法

        • max-width

        • min-width


      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Documenttitle>
          <style>
              /* 视口宽度小于等于768px， 网页背景色是粉色 */
              @media (max-width: 768px) {
                  body {
                      background-color: pink;
                  }
              }
      ?
              /* 视口宽度大于等于1200px， 网页背景色是skyblue */
              @media (min-width: 1200px) {
                  body {
                      background-color: skyblue;
                  }
              }
              
          style>
      head>
      <body>
          
      body>
      html>

    • 书写顺序

      • min-width（从小到大）

      • max-width（从大到小）

      • 需求

        • 默认网页背景色是灰色

        • 屏幕宽度在768-992之间, 网页背景色是粉色

        • 屏幕宽度在992-1200之间, 网页背景色是skyblue

        • 屏幕宽度大于1200, 网页背景色是绿色


        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Documenttitle>
            <style>
                /*
                    视口宽度 >= 768px，网页背景色是 粉色
                    视口宽度 >= 992px，网页背景色是 绿色
                    视口宽度 >= 1200px，网页背景色是 skyblue
                 */
        ?
                 /* css属性都有层叠性 */
        ?
                 /* @media (min-width: 1200px) {
                    body {
                        
                    }
                } */
                
                /*  - min-width（从小到大）
                    - max-width（从大到小） */
                @media (min-width: 768px) {
                    body {
                        background-color: pink;
                    }
                }
                @media (min-width: 992px) {
                    body {
                        background-color: green;
                    }
                }
                @media (min-width: 1200px) {
                    body {
                        background-color: skyblue;
                    }
                }
        ?
            style>
        head>
        <body>
            
        body>
        html>

         

    • 完整写法（了解即可，并不这么写）

    • 关键词（了解）

      • and（多个判断条件时）

      • only（一个判断条件时）

      • not

  • 媒体类型（了解）

    • 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

  • 媒体特征

    • 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

  • 基本语法

    • 外链式CSS引入


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        
        
        <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
        <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
    head>
    <body>
        
    body>
    html>

  • 媒体查询 - 隐藏


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    ?
            .box {
                display: flex;
                width: 100%;
            }
    ?
            .left {
                width: 300px;
                min-height: 500px;
                background-color: pink;
            }
    ?
            .main {
                flex: 1;
                min-height: 500px;
                background-color: skyblue;
            }
    ?
            /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
            @media (max-width: 768px) {
                .left {
                    display: none;
                }
            }
        style>
    head>
    <body>
        <div class="box">
            <div class="left">leftdiv>
            <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果div>
        div>
    body>
    html>

BootStrap

  • UI框架

    • UI框架概念

      • 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。

    • 作用

      • 基于框架开发，效率高，稳定性高。

  • BootStrap简介

    • BootStrap框架快速开发响应式网页

    • Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

    • 中文官网: https://www.bootcss.com/

  • BootStrap使用步骤

    • 使用步骤

      • 1、引入： BootStrap提供的CSS代码

      • 2、调用类：使用BootStrap提供的样式

        • container：响应式布局版心类

  • BootStrap栅格系统

    • 使用BootStrap栅格系统布局响应式网页

    • 栅格化是指将整个网页的宽度分成若干等份

    • BootStrap3默认将网页分成12等份


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>栅格系统title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    ?
        <style>
            .container div {
                height: 50px;
                background-color: pink;
            }
        style>
    head>
    <body>
        
        <div class="container">
            <div class="col-lg-3 col-md-6">1div>
            <div class="col-lg-3 col-md-6">2div>
            <div class="col-lg-3 col-md-6">3div>
            <div class="col-lg-3 col-md-6">4div>
        div>
        
    body>
    html>

    • .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

    • .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

    • 分别使用.row类名和 .col类名定义栅格布局的行和列。

    • 注意：

      • 1、container类自带间距15px;

      • 2、row类自带间距-15px


      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>栅格系统-类title>
          <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
          <style>
              div {
                  height: 50px;
                  background-color: pink;
                  margin-bottom: 50px;
              }
          style>
      head>
      <body>
          
          <div class="container">1div>
      ?
          
          <div class="container">
              <div class="row">2div>
          div>
      ?
          
          <div class="container-fluid">3div>
      body>
      html>

  • 全局样式

    • 握BootStrap手册用法，使用全局CSS样式美化标签

    • 手册用法：

      • BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

      • 网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

    • 布局类：表格

      • table : 基本类名, 初始化表格默认样式

      • table-bordered : 边框线

      • table-striped : 隔行变色

      • table-hover : 鼠标悬停效果

      • table-responsive : 表格宽溢出滚动


      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>全局CSS样式-表格title>
          <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
      head>
      <body>
          <table class="table table-striped table-bordered table-hover">
              <tr>
                  <th>数字1th>
                  <th>数字2th>
                  <th>数字3th>
              tr>
              <tr>
                  <td>1td>
                  <td>2td>
                  <td>3td>
              tr>
              <tr>
                  <td>1td>
                  <td>2td>
                  <td>3td>
              tr>
              <tr>
                  <td>1td>
                  <td>2td>
                  <td>3td>
              tr>
          table>
      ?
          
      body>
      html>

    • 美化内容类：按钮

      • btn : 基准样式

      • btn-info; btn-success : 设置按钮背景色

      • btn-block : 设置按钮为块元素

      • btn-lg; btn-sm; btn-xs : 设置按钮大小


      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>全局CSS样式-按钮title>
          <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
      head>
      <body>
          <button class="btn btn-success btn-lg">成功button>
      ?
          <button class="btn btn-warning btn-xs">警告button>
      body>
      html>

  • 组件

    • 使用BootStrap组件快速布局网页

    • 组件

      • BootStrap提供的常见功能，包含了HTML结构和CSS样式。

      • 使用方法

        • 引入BootStrap样式

        • 复制结构，修改内容

      


    
    
    
    组件
    


    
      
        
        
      
      


      
        
        
      1. 首页
        2. 
        
      2. 用户中心
        3. 
        
      3. 用户
        4. 
        
      4. 数据
        5.

    • Glyphicons字体图标

      • 使用Glyphicons字体图标实现网页中的图标效果

      • Glyphicons字体图标的使用步骤

        • HTML页面引入BootStrap样式文件

        • 准备字体文件 (注意路径)

        • 空标签调用对应类名

          • glyphicon

          • 图标类


        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>字体图标title>
            <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
        head>
        <body>
            <i class="glyphicon glyphicon-user">i>
        body>
        html>

    • 插件

      • 使用BootStrap插件实现常见的交互效果

      • 只有HTML和CSS的下拉菜单，单击后能弹出子菜单吗？不能，但插件可以有交互效果

      • 插件

        • BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

      • 插件的使用步骤

        • 引入BootStrap样式

        • 引入js文件：jQuery.js + BootStrap.min.js

        • 复制HTML结构, 并适当调整结构或内容


      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>插件title>
          <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
      head>
      <body>
          
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
                <li data-target="#carousel-example-generic" data-slide-to="1">li>
                <li data-target="#carousel-example-generic" data-slide-to="2">li>
                <li data-target="#carousel-example-generic" data-slide-to="3">li>
              ol>
            
              
              <div class="carousel-inner" role="listbox">
                
                <div class="item active">
                  <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="...">
                  <div class="carousel-caption">
                    ...
                  div>
                div>
                <div class="item">
                  <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="...">
                  <div class="carousel-caption">
                    ...
                  div>
                div>
                <div class="item">
                  <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="...">
                  <div class="carousel-caption">
                    ...
                  div>
                div>
                <div class="item">
                  <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="...">
                  <div class="carousel-caption">
                    ...
                  div>
                div>
                
              div>
            
              
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
                <span class="sr-only">Previousspan>
              a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
                <spanclass="sr-only">Nextspan>
              a>
            div>
      ?
          <scriptsrc="./js/jquery.js">script>
          <scriptsrc="./bootstrap-3.4.1-dist/js/bootstrap.min.js">script>
      body>
      html>

    • 定制

    • 根据项目需求定制bootstrap框架

    • 定制步骤

      • 导航菜单 → 定制

      • 输入目标变量值

      • 编译并下载，使用定制后的框架

移动web

相关

移动web_平面转换

标签