锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

1. HTML5+CSS3

时间：2022-10-17 07:30:01 二极管je05b1rs301ew丝印三极管5tj5zk连接器1808zj圆形连接器9zj1b2连接器20zj1b矩形连接器

HTML5 CSS3

文章目录

  • HTML5 CSS3
  • 一、HTML
  • 二、CSS
    • 1. CSS的定义
    • 2. 使用CSS修改元素的样式
      • 2.1 内联风格(行内风格):
      • 2.2 内部样式表
      • 2.3 外部样式表
    • 3. CSS的基本语法
      • 3.1 CSS的注释
      • 3.2 CSS选择器
      • 3.3 CSS声明块
      • 3.4 继承
      • 3.5 选择器的权重
      • 3.6 像素和百分比
      • 3.7 RGB
    • 4. CSS的布局
      • 4.1 文档流（normal flow）
      • 4.2 盒模型
      • 4.3 盒大小
      • 4.3 轮廓和圆角
      • 4.4 浮动
      • 4.5 简单布局
      • 4.6 高度塌陷和BFC
      • 4.7 外距重叠问题与clearfix
      • 4.8 最终坍塌和外距重叠的最终解决方案
      • 4.9 定位
        • `position:static` 默认值，元素是静态的，没有打开定位
        • `position:relative` 相对定位
        • `position:absolute` 绝对定位
        • `position:fixed` 固定定位
        • `position:sticky` 粘滞定位
        • `z-index:1`元素的层级
      • 4.10 字体样式
        • `color`设置字体颜色
        • `font-size`设置字体大小
        • `font-family`字体族(字体格式)
        • `@font-face`直接向用户提供服务器中的字体
      • 4.11 图标字体iconfont
      • 4.12 行高 line-height
      • 4.13 文本的其他属性
      • 4.14 背景
        • 背景颜色：
        • 背景图片：
        • 背景重复：
        • 背景图片的位置：
        • 背景范围：
        • 偏移计算背景图片的原点：
        • 背景图片的大小：
        • 背景属性简写：
        • 图片闪烁问题：
        • 线性渐变：
        • 径向渐变(放射效果)
      • 4.15 表格
        • 表格样式
      • 4.16 表单
      • 4.18 设置网站图标(标题栏和收藏栏)
      • 4.19 项目在线压缩
    • 5. 动画
      • 5.1 过渡
        • 过渡transition:
        • transition-property:
        • transition-duration
        • transition-timing-function
        • transition-delay
        • 所有过渡属性
      • 5.2 动画
        • 动画：
        • 关键帧：
        • animation-name
        • animation-duration
        • animation-delay
        • animation-timing-function
        • animation-iteration-count
        • animation-direction
        • animation-play-state
        • animation-fill-mode
        • 所有动画属性
      • 5.3 变形
        • 变形transform
        • 平移
        • 旋转
        • tips
        • 缩放
    • 6. flex(弹性盒、伸缩盒)
      • 6.1 定义
      • 6.2 弹性容器
        • 主轴
        • 侧轴
        • display
        • flex-direction
        • flex-wrap
        • flex-flow
        • justify-content
        • align-items
        • align-content
        • align-self
      • 6.3 弹性元素
        • flex-grow
        • flex-shrink
        • flex-basis
        • flex
        • order
  • 三、LESS
    • 1. less简介
    • 2. css的不足
    • 3. less的语法
      • 3.1 安装插件
      • 3.2 注释
      • 3.3 变量
      • 3.4 父元素和扩展
      • 3.5 混合函数
      • 3.6 运算
      • 3.7 import引入其他less
      • 3.8 调试
  • 四、显示
    • 1. 像素
      • 1.1 物理像素
      • 1.2 CSS像素
    • 2. 视口（viewport）
    • 3. 移动端
      • 结论：将网页的视口设置为完美视口
    • 4. vw单位
    • 5. vw适配
  • 五、响应式布局
    • 1. 响应式布局
    • 2. 媒体查询
      • 2.1 语法
      • 2.2 媒体类型
      • 2.3 媒体特性
      • 2.4 断点

  • W3C：
    制定网页开发的标准，以使同一个网页在不同浏览器中有相同的效果。

  • W3C标准：

    • 结构：HTML用于描述页面的结构
    • 表现：CSS用于控制页面中元素的样式
    • 行为：JavaScript用于响应用户的操作

一、HTML

1. HTML标准结构


doctype html>


<html>

    
    <head>
	    
	    <meta charset="utf-80">
		
		
	    <title>网页的标题title>
	head>
	
	
	<body>
	
	    
	    <h1>网页的大标题h1>
	body>
html>

2. 文档的使用

  • zeal 下载官方文档到本地，以便离线观看。
  • W3school 中文文档

3. IDE

VScode

  • “！”+“Tab” 自动生成标准html结构
DOCTYPE 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>
head>
<body>
    
body>
html>
  • “Ctrl+/” 注释的快捷键
  • 下载插件：live server 可以在保存文件后浏览器自动更新，不需要手动刷新
  • 更改设置：在这里插入图片描述

​ 文件将每个一段时间自动保存，从而达到实时更新的效果，不需要手动保存。

相关文章