以梦为马|不负韶华
以梦为马|不负韶华

html（结构）+css（表现）+js（行为）

目录

  • 注意事项
  • 一、html
    • 1.文档声明（doctype）
      • 1.1 作用
      • 1.2 h5的文档声明
    • 2.字符编码
      • 2.1 编码
      • 2.2 解码
      • 2.3 字符集
      • 2.4 乱码
      • 2.5 utf-8
      • 2.6 设置网页解码所用的字符集编码
    • 3.实体
    • 4.标签
      • 4.1 meta（在head标签中）
      • 4.2 语义化标签
      • 4.3 块元素
      • 4.4 相对路径
      • 4.5 a标签（行内元素）
      • 4.6 图片标签
      • 4.7 iframe内联框架
      • 4.8 音视频播放
      • 4.9 表格
    • 5 表单
      • 5.1 注意事项
      • 5.2 button和input
      • 5.3 相关属性
  • 二、css
    • 1. 编写的位置
      • 1.1 内联样式
      • 1.2 内部样式表
      • 1.3 外部样式表
    • 2.css选择器
      • 2.1 元素选择器
      • 2.2 类选择器
      • 2.3 id选择器
      • 2.4 通配选择器
      • 2.5 交集选择器
      • 2.6 并集选择器
      • 2.6 子元素选择器
      • 2.6 后代选择器
      • 2.6 兄弟选择器
      • 2.7 属性选择器
      • 2.8 伪类选择器[伪类](https://www.w3school.com.cn/css/css_pseudo_classes.asp)
      • 2.9 超链接的伪类
      • 2.10 伪元素选择器
    • 3 样式的继承
    • 4 选择器的优先级
    • 5 像素和百分比/em和rem
      • 5.1 像素
      • 5.2 百分比 em和rem
    • 6 RGB值/hsl
    • 7 文档流
      • 7.1 概念
      • 7.2 元素特点
      • 7.3 盒子的大小
    • 8 盒子模型
      • 8.1 内容区
      • 8.2 边框
      • 8.3 边框宽度
      • 8.4 边框颜色
      • 8.5 边框样式
      • 8.6 内边距
      • 8.7 外边距
      • 8.8 水平方向的布局
      • 8.9 垂直方向布局
      • 8.10 外边距的折叠
      • 8.11 轮廓、阴影和圆角
    • 9 行内元素的盒模型
      • 9.1 display
    • 10 浏览器的默认样式
    • 11 练习
      • 11.1 网易新闻
    • 12 浮动
      • 12.1 特点
      • 12.2 导航条练习
      • 12.3 高度塌陷和BFC
      • 12.4 clear
      • 12.5 clearfix类
    • 13 定位
      • 13.1 相对定位
      • 13.2 绝对定位
      • 13.3 包含块
      • 13.4 固定定位
      • 13.5 粘滞定位
      • 13.6 绝对定位元素的位置
      • 13.7 元素的层级
      • 13.8 轮播图练习
    • 14 字体
      • 14.1 字体族
      • 14.2 图标字体font awesome
      • 14.3 通过伪元素来使用图标字体
      • 14.4 通过实体来使用图标字体
      • 14.5 iconfont
    • 15 行高
    • 16 字体简写
    • 17 文本样式
      • 17.1 水平对齐text-align
      • 17.2 垂直对齐vertical-align
      • 17.3 设置网页处理空白 white-space
    • 18 京东导航条
    • 19 背景
    • 20 雪碧图
  • 三、 综合练习
    • 1 顶部导航栏
      • 1.1 命名
      • 1.2 body
      • 1.3 width
      • 1.4 ul和li浮动
      • 1.5 a标签
      • 1.6 分割线sep
      • 1.7 shopcar下拉框
      • 1.8 下载app下拉框
      • 1.9 过渡效果
    • 2 头部
      • 2.1 logo
      • 2.2 logo的切换效果（视频中有，新版页面没有）
      • 2.3 中间导航栏
      • 2.4 下拉框
      • 2.5 搜索框
      • 2.6 轮播图
    • 3 侧边导航栏
    • 4 广告区
      • 4.1 左侧6宫格
    • 5 标题栏图标
    • 6 代码压缩[视频](https://www.bilibili.com/video/BV1XJ411X7Ud?p=114&spm_id_from=pageDriver)
  • 四、css高级
    • 1 过渡
    • 2 [动画](https://www.w3school.com.cn/css/css3_animations.asp)
    • 3 变形平移（可用于设置居中）
      • 3.1 xy轴平移
      • 3.2 元素浮动效果
      • 3.3 z轴平移
      • 3.4 旋转
      • 3.5 时针案例
      • 3.6 缩放
      • 3.7 变形的原点
  • 五、less（css增强版）
    • 1 简介
    • 2 变量
    • 3 [css到less的映射](https://www.bilibili.com/video/BV1XJ411X7Ud?p=130&spm_id_from=pageDriver)
  • 六、[弹性盒](https://www.w3school.com.cn/css/css3_flexbox.asp)
    • 1 弹性容器的样式
      • 1.1 flex-direction
      • 1.2 主轴/侧轴
      • 1.3 flex-wrap
      • 1.4 flex-flow
      • 1.5 justify-content
      • 1.6 align-items
      • 1.7 align-content
      • 1.8 设置容器中的弹性元素居中
    • 2 弹性元素的样式
      • 2.1 flex-grow
      • 2.2 flex-shrink
      • 2.3 align-self
      • 2.4 flex-basis
      • 2.5 flex
      • 2.6 order
  • 七、移动端布局
    • 1 手机像素
    • 2 视口
    • 3 vw
  • 八、响应式布局
    • 1 定义
    • 2 媒体查询
      • 2.1 定义
      • 2.2 类型
      • 2.3 格式
      • 2.4 特性
    • 3 练习
      • 3.1 logo图片

注意事项

  1. 大局用浮动，细节用定位；
  2. 子绝父相：子元素使用绝对定位时，父元素使用相对定位；
  3. 浮动不会盖住文字，但绝对/固定定位会盖住文字；
  4. 让hover伪元素固定在页面上，可以按下面的步骤操作；如果动画效果是js写的，那么可以在元素的class中添加active属性值；
    html（结构）+css（表现）+js（行为）_第1张图片
  5. 隐藏元素两种方法：display:none; height:0;
  6. 将a设置为block，就可以充满这个li元素；
  7. 行内元素垂直居中设置line-height,水平居中设置text-align；块元素垂直居中可以开启绝对定位，设置top,bottom,margin,width，水平居中同理；
  8. 图片紧贴div，设置图片的vertical-align为top或者bottom；
  9. text-align应该设置给块元素；

一、html

1.文档声明（doctype）

1.1 作用

用来告诉浏览器当前网页的版本

1.2 h5的文档声明

代码位置：html页面的最顶部，在html标签外

<!DOCTYPE html> 大小写皆可

2.字符编码

2.1 编码

将字符转换成二进制的过程

2.2 解码

将二进制装换成字符的过程

2.3 字符集

编码解码所遵循的规则

2.4 乱码

编码解码时所采用的字符集不同导致乱码

2.5 utf-8

万国码，开发时的默认编码

2.6 设置网页解码所用的字符集编码

<head>
	<meta charset='utf-8'>
</head>

3.实体

  1. 实体就是用来表示html中的预留字符的；
  2. 在网页中写多个空格会被浏览器解析成一个空格，所以需要使用**&+符号名**来表示这些特殊的字符；
  3. 空格   大于 > 小于 <

4.标签

4.1 meta（在head标签中）

  1. meta主要是用于设置网页的一些元数据，元数据不是给用户看；
  2. charset:指定页面的字符集；name: 指定数据的名称；content：指定数据的内容；
  3. keyword表示网页的关键字，可以指定多个关键字，用逗号隔开;
  4. http-equiv可以用于页面定时重定向

4.2 语义化标签

  1. 使用html的时候，应该关注标签的语义而不是标签的样式；
  2. h1的重要性仅次于title，一般一个页面中只存在一个h1标签；
  3. hgroup用于标题分组，可以将一组相关的标题同时放进hgroup中
    <hgroup>
        <h1>大标题</h1>
        <h2>小标题</h2>
    </hgroup>
  1. blockquote表示长引用（块元素），q表示短引用(行内元素);
    <blockquote>
        长引用
    </blockquote>
    <q>短引用</q>  // "短引用"
  1. header网页头部，main网页主体（仅能有一个），footer网页尾部；
  2. nav网页导航；
  3. section表示一个独立的区块；
  4. div是一个区块，没有任何语义；span是行内元素，没有任何语义；
  5. 列表之间可以互相嵌套；

4.3 块元素

  1. 在页面中独占一行的元素称为块元素（block element）；在页面中不会独占一行的元素称为行内元素（inline element）；
  2. 在页面中一般通过块元素对页面进行布局；行内元素主要用来包裹文字；
  3. 一般来说，行内元素中不能有块元素，但是a标签例外，a标签可以放置除它自身以外的所有标签；

4.4 相对路径

  1. ./ 表示当前文件所在的目录，也可以省略不写；…/表示当前文件所在目录的上一级目录；

4.5 a标签（行内元素）

  1. 将href属性值设为#，点击a标签将回到页面的顶部回到顶部；
  2. 通过标签的id属性跳转到页面的任意位置；
    <div style="height:1000px;background-color: antiquewhite;" id="div1">
       TEST
    </div>
    <a href="#div1">跳转</a>
  1. 对于暂时不使用的超链接，可以将其href设置为javascript:;，此时点击超链接不会产生任何反应；
  2. 将a标签的display设置为block，a会充满这个li标签；

4.6 图片标签

  1. alt是图片的描述，正常情况下不会显示，只有当图片无法正常显示的时候会显示；搜索引擎会根据alt的内容来识别图片，如果没有alt属性搜索引擎将不会收录图片；
  2. 图片的高度和宽度如果只更改一个，则另一个会等比例缩放；
    html（结构）+css（表现）+js（行为）_第2张图片
    采用base64进行编码的图片
    在这里插入图片描述

4.7 iframe内联框架

  1. 用于向当前页面引入一个其他页面；

4.8 音视频播放

  1. 音频标签audio
方式一
<audio src="" controls loop muted autoplay></audio>
方式二：考虑兼容问题
<audio controls>
    <source src="">
    <embed src="" type='audio/mp3' width='300'> // 兼容IE8
</audio>

controls：手动控制音乐播放；
loop：循环播放；
muted：静音；
autoplay：自动播放，一般没用；

  1. 视频标签 video
    使用方法和audio类似
    <video controls>
        <source src="">
        <embed src="" type='vedio/ma4' width='300'>
    </video>

4.9 表格

  1. 表格可以分成三个部分：thead,tbody,tfoot；分成三部分的优点是三个标签的位置可以随意排列，不会影响三者在页面中的显示位置；
  2. 表格的样式：
        table{
            border:1px solid black;
            width:50%;
            /* 边框之间的距离，边框之间的距离设为0，
                table和td的边框会并在一起 */
            border-spacing: 0;
            /* 边框合并，table和td的边框重叠，
                设置此属性后border-spacing属性失效 */
            border-collapse:collapse;
        }
        td{
            border:1px solid black;
            height:50px;
            /* 默认情况下，td是垂直居中的
                通过设置vertical-align属性调整td中内容的垂直位置 */
            vertical-align:top;
            text-align: center;
        }
        /* tr的父元素是tbody而不是table */
        tbody>tr:nth-child(even){
            background-color: yellowgreen;
        }
  1. 将元素display设置为table-cell， 此元素会作为一个表格单元格显示（类似 和 ），可以通过vertical-align属性来控制其子元素的垂直位置，使子元素居中；
    .outer{
        display: table-cell;
        width:400px;
        height:400px;
        background-color: yellowgreen;
        /* 让inner垂直居中 */
        vertical-align: middle;
    }
    .inner{
        width:200px;
        height: 200px;
        background-color: black;
        /* 水平居中 */
        margin:0 auto;
    }

5 表单

5.1 注意事项

  1. 如果向后台提交数据，需要给元素指定name属性；

5.2 button和input

   <button type="button">登录</button>
   <button type="submit">提交</button>
   <button type="reset">重置</button>

button和input的效果相同，但是由于input使自闭合元素，所以相对来说button操作空间更大；

5.3 相关属性

     <!-- 禁用：数据无法提交到后台 -->
     <input type="text" name="" id="" disabled>
     <!-- 只读 -->
     <input type="text" name="" id="" readonly>
      <!-- 自动获取焦点 -->
 	<input type="text" name="" id="" autofocus>

二、css

1. 编写的位置

1.1 内联样式

缺点：一个样式只能作用于一个元素，不可复用；如需修改，维护困难；

1.2 内部样式表

在head中的style标签中编写样式。
优点：可以为多个标签设置一个样式，且维护方便；
缺点：其它html页面使用当前页面的样式时不方便；

1.3 外部样式表

将样式编写在css文件中，然后在html中引入外部样式；
优点：多个html页面可以复用同一个css文件，方便维护；可以利用浏览器的缓存机制，加快了页面的加载速度，提高用户体验；

2.css选择器

2.1 元素选择器

2.2 类选择器

2.3 id选择器

2.4 通配选择器

选中页面中的所有元素

*{

}

2.5 交集选择器

作用：选中同时符合多个条件的元素
格式：选择器1选择器2选择器3…选择器n{}
注意：如果有元素选择器，元素选择器一定要放到最前边

  p.p1{
      color:blue;
  }
  .a.b.c{}

2.6 并集选择器

格式：选择器1，选择器2，…，选择器n{}

2.6 子元素选择器

格式：父元素 > 子元素{}

2.6 后代选择器

格式：祖先 后代{}

2.6 兄弟选择器

  1. 选择紧挨着的下一个兄弟元素前一个 + 后一个{}
  2. 选择后边的所有兄弟元素 兄 ~ 弟{}

2.7 属性选择器

[属性名]{} 选择包含指定属性的元素
[属性名=属性值]{} 选择包含指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值包含指定值的元素

2.8 伪类选择器伪类

伪类：不存在的类，特殊的类，用来描述一个元素的特殊状态，比如第一个元素，被点击的元素；
伪类一般都是使用：开头；

  1. :first-child第一个子元素
  2. :last-child最后一个子元素
  3. :nth-child(a) 第a个子元素，从0开始，a等于n时全选，a等于2n或者even时选择偶数位的子元素，a等于2n+1或者odd时选择奇数位子元素
    以上伪类是根据所有的子元素进行排序的
  4. :first-of-type第一个子元素
  5. :last-of-type最后一个子元素
  6. :nth-of-type(a) 第a个子元素，从1开始，a等于n时全选，a等于2n或者even时选择偶数位的子
    以上伪类是根据同类型的子元素进行排序的

例：

    <div>
        <p>123123</p>
        <span>0</span>
        <span>1</span>
        <span>2</span>
    </div>

     div span:first-child{
         color:brown
     } //此时0的颜色不会改变
     div span:first-of-type{
         color:brown
     } //此时0的颜色会改变

2.9 超链接的伪类

  1. :link 表示没有访问过的链接；
  2. :visited 表示访问过的链接（由于隐私的原因，只能修改元素的颜色）；
  3. :hover 表示鼠标放上去时的状态；
  4. :active 表示鼠标点击时的状态；

2.10 伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（操作元素中的特殊位置），用：：开头；

  1. ::first-letter{} 第一个字母
  2. ::first-line{} 第一行
  3. ::selection{} 鼠标选中的内容
  4. ::before{} 元素的开始（必须配合content属性使用）
  5. ::after{} 元素的最后（必须配合content属性使用）
   p::before{
       content:"abc";
       color:red
   }

3 样式的继承

并不是所有的样式都会被继承，可以去w3school中查看；

4 选择器的优先级

html（结构）+css（表现）+js（行为）_第3张图片

5 像素和百分比/em和rem

5.1 像素

  1. 屏幕是由一个个小点点组成，每个小点就是一个像素；像素点越小，屏幕显示得就越清晰；
  2. 像素分为css像素和物理像素。物理像素是固定的，由屏幕决定；而css像素则是编写网页时所用的像素；
  3. 浏览器会将css像素转换成物理像素，所以一个css像素对应物理像素的个数由浏览器决定，默认一个css像素对应一个物理像素；
  4. 视口就是屏幕中用来显示网页的区域，可以通过缩放来调整css像素和物理像素的比例；

5.2 百分比 em和rem

  1. 将元素属性值设置为相对于其父元素属性的百分比，这样其大小会随着父元素的变化而变化；
  2. em是根据元素自身的字体大小来计算的，1em=1font-size;
  3. rem是根据根元素的字体大小来计算的；

6 RGB值/hsl

html（结构）+css（表现）+js（行为）_第4张图片
html（结构）+css（表现）+js（行为）_第5张图片

 color:hsl(250, 10%, 50%)

7 文档流

7.1 概念

网页是一个多层结构，一层摞着一层，我们看到的是最顶层，而文档流是最底层，是网页的基础，我们创建的元素默认都是在文档流中进行排列的；对我们来说，元素主要有两种状态：在文档流中和不在文档流中；

7.2 元素特点

  1. 块元素：独占一行，默认高度是被内容撑开的高度，默认宽度是父元素的宽度；
  2. 行内元素：不独占一行，默认高度是被内容撑开的高度，默认宽度是其中内容的宽度；

7.3 盒子的大小

html（结构）+css（表现）+js（行为）_第6张图片

8 盒子模型

html（结构）+css（表现）+js（行为）_第7张图片
一个盒子的可见大小由内容区、内边距、边框共同决定，计算盒子大小时需将三者加起来

8.1 内容区

  1. 所有子元素和文本内容都在内容区中排列；
  2. 内容区的大小是由width和height两个属性决定的；

8.2 边框

  1. 边框属于盒子的边缘，边框里面就是盒子内部，出了边框就是盒子的外部；
  2. 边框的大小会影响整个盒子的大小；
  3. 边框有三个属性：宽度border-width、颜色border-color、样式border-style；
  4. border简写，通过border可以同时设置边框的三个属性，并且没有顺序要求；border:10px red solid;
  5. 除了border外，还有border-xxx(xxx可以是top,left,right,bottom)；

8.3 边框宽度

  1. 边框的默认宽度是3px;
  2. border-width: 上 右 下 左（顺时针）；border-width:上 左右 下； border-width: 上下 左右；border-width:上下左右；
  3. 单独设置各边的宽度：border-xx-width:10px（xx可以是top,left,right,bottom）；

8.4 边框颜色

  1. border-color可以省略不写，默认是color的颜色；
  2. 各边颜色的设置和border-width相同；

8.5 边框样式

  1. border-style如果不写，则其默认值是none，此时没有边框；
  2. border-style有solid,double,dashed,dotted四个属性值；
  3. 各边样式的设置和border-width相同；

8.6 内边距

  1. 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距；
  2. padding简写，可同时指定上下左右的内边距；

8.7 外边距

html（结构）+css（表现）+js（行为）_第8张图片

  1. 外边距不会影响盒子可见区域的大小，但会影响盒子的位置；
  2. margin-top和margin-left会使盒子自身移动，而margin-bottom和margin-right会使其它元素移动；
  3. margin-top可以设置负值来向上移动；

8.8 水平方向的布局

html（结构）+css（表现）+js（行为）_第9张图片
html（结构）+css（表现）+js（行为）_第10张图片

  1. 元素在水平方向的布局由margin-left,border-left,padding-left,width,padding-right,border-right,margin-right共同决定；
  2. 一个元素在其父元素中的水平布局必须满足margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素width；
  3. 如果等式不成立，则会自动调整。没有属性等于auto时，则会调整margin-right的值；如果某个值是auto，则会调整auto；
  4. margin:0 auto;会使元素居中是因为设置width后如果左右外边距都是auto，则两个外边距相同，那么元素自然就处于居中的位置；

8.9 垂直方向布局

html（结构）+css（表现）+js（行为）_第11张图片

  1. overflow的几个属性；

8.10 外边距的折叠

html（结构）+css（表现）+js（行为）_第12张图片

8.11 轮廓、阴影和圆角

  1. outline用来设置元素的轮廓，用法和border一样；区别在于outline不会增加元素的可见大小，不会影响页面布局；
  2. box-shadow用来设置元素的阴影，阴影不会影响页面的布局；box-shadow:10px 10px 50px rgba(0, 0 , 0, .3);四个参数分别是水平偏移量（正值向右偏移）、垂直偏移量（正值向下偏移）、阴影的模糊半径、阴影颜色；
  3. border-radiushtml（结构）+css（表现）+js（行为）_第13张图片

9 行内元素的盒模型

html（结构）+css（表现）+js（行为）_第14张图片

9.1 display

html（结构）+css（表现）+js（行为）_第15张图片

  1. display可以将行内元素转化成块元素，也可以将块元素转换成行内元素；
  2. inline-block行内块：既可以设置高度和宽度，又不会独占一行；

10 浏览器的默认样式

  1. 通常情况下浏览器会为一些元素设置默认样式，默认样式的存在会影响浏览器的布局，所有要去除默认样式；
  2. 一般方法：
*{
 margin:0;
 padding:0;
}
  1. 进阶方法，引入外部css文件
    html（结构）+css（表现）+js（行为）_第16张图片

11 练习

11.1 网易新闻

  1. 将h2设置为inline-block,既可以设置高度和宽度，又不会独占一行；
  2. 父子元素的边框想要重叠，可以将子元素的margin-top设置为负值；

12 浮动

12.1 特点

html（结构）+css（表现）+js（行为）_第17张图片

  1. 文字不会被浮动元素所覆盖，因为浮动最初设计的目的就是为了实现文字环绕效果的；
  2. 设置浮动之后，块元素和行内元素都会具有行内块的特点；

12.2 导航条练习

  1. 使a标签充满整个li标签，可以将a标签的display设置为block；

12.3 高度塌陷和BFC

html（结构）+css（表现）+js（行为）_第18张图片

  1. 高度塌陷的原因是什么？
    父元素的高度是由子元素撑起来的，当子元素浮动后，其会脱离文档流，将无法撑起父元素的高度，导致父元素的高度丢失；
  2. 高度塌陷&外边距重叠的解决方法
    方法一： 设置父元素的高度
    我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
    方法二： BFC
    根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块状格式化环境）
    简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
    当开启元素的BFC以后，元素将会具有如下的特性：
    1.父元素的垂直外边距不会和子元素重叠
    2.开启BFC的元素不会被浮动元素所覆盖
    3.开启BFC的元素可以包含浮动的子元素
    如何开启（父）元素的BFC
    1.设置（父）元素浮动
    使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
    而且使用这种方式也会导致下边的元素上移，不能解决问题
    2.设置（父）元素绝对定位
    3.设置（父）元素为inline-block
    可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
    4.将（父）元素的overflow设置为一个非visible的值
    推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
    方法三：
    可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
    方法四： 通过after伪元素(方法三的升级版)
    通过after伪元素向父元素中添加一个空白的块元素，然后使用clear清除浮动元素的影响，这样做的效果与方法三相同，而且不会再页面中添加多余的结构。
.clearfix::after{
	//添加空白内容
	content: "";
	//因为伪元素是一个行内元素，即使清除了浮动也不会独占一行，所以需要转换为一个块元素
	display: block;
	//清除两侧的浮动
	clear: both;
}

12.4 clear

使用clear属性来清除浮动元素对当前元素的影响；
原理：就是给当前元素添加了一个上外边距；
html（结构）+css（表现）+js（行为）_第19张图片

12.5 clearfix类

html（结构）+css（表现）+js（行为）_第20张图片

  1. clearfix可以同时解决高度塌陷和外边距重叠的问题，只需要将clearfix添加到对应元素的class属性中即可；

13 定位

html（结构）+css（表现）+js（行为）_第21张图片
开启定位后就可以设置偏移量
html（结构）+css（表现）+js（行为）_第22张图片

13.1 相对定位

  1. 将元素的position属性设置为relative，即可开启相对定位；
  2. 开启相对定位后不设置偏移量，元素不会发生任何变化（重要特性，子孙元素需要绝对定位时可以设置此属性）
  3. 相对定位是参照于元素在文档流中的位置进行定位的（就是以元素当前位置的左上角为原点进行偏移）
  4. 相对定位会提高元素的层级，但是不会使元素脱离文档流；
  5. 相对定位不会改变元素的性质，块元素依然是块元素，行内元素依然是行内元素；
  6. 相对定位相当于灵魂脱壳，之前的位置依然被其占用；
  7. 开启相对定位的元素，其设置偏移量的效果和调整margin的效果相同；

13.2 绝对定位

  1. 将元素的position属性设置为absolute，即可开启绝对定位；
  2. 开启绝对定位后，元素的位置不会发生变化，但是会脱离文档流，提高一个层级；
  3. 绝对定位会使元素具有行内块的性质；
  4. 绝对定位相对于最近的开启定位的祖先元素进行的定位；
  5. 会盖住文字；

13.3 包含块

html（结构）+css（表现）+js（行为）_第23张图片

13.4 固定定位

html（结构）+css（表现）+js（行为）_第24张图片

13.5 粘滞定位

html（结构）+css（表现）+js（行为）_第25张图片
可以用来实现导航栏的吸顶效果；

13.6 绝对定位元素的位置

html（结构）+css（表现）+js（行为）_第26张图片

  1. 如何让元素居中
    设置以下这些属性即可，即可让元素在其包含块中居中
      position:absolute;
      margin:auto;
      left:0;
      right:0;
      top:0;
      bottom:0;

13.7 元素的层级

html（结构）+css（表现）+js（行为）_第27张图片

13.8 轮播图练习

  1. 给包含块开启相对定位且不设置偏移量，既可以使子孙元素进行绝对定位，又不会影响页面的布局；

14 字体

14.1 字体族

html（结构）+css（表现）+js（行为）_第28张图片

  1. @font-face{}写在style中；
  2. font-family: '楷体', Courier, monospace; 最后一个属性值monospace指的是一类字体，如果前两个都没有，则去这类字体中找一个；

14.2 图标字体font awesome

html（结构）+css（表现）+js（行为）_第29张图片

  1. 可以通过font-size和color来调整字体的颜色和大小；
  2. 图标字体的类名可以去官网查看；
  3. 类名中的fas或fab是必须要加的；

14.3 通过伪元素来使用图标字体

 li::before{
     content:'\f1b0';
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color:blue
 }
  1. 首先要找到图标的代号；
  2. 然后在all.css文件中查找其font-family，因为只有
    .fab { font-family: 'Font Awesome 5 Brands'; font-weight: 400; }和.fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; }是免费的，所以只用从这两种中找即可；
    3.可以通过color和font-size来调整颜色和大小；

14.4 通过实体来使用图标字体

<i class="fa">&#xf0f3;</i>
  1. &#x;是固定的，f0f3和14.3中的代码是一样的；

14.5 iconfont

  1. 登录iconfont，将自己想要使用的图标添加到购物车中，一般选择纯色的图标字体，便于操作；
  2. 在购物车中点击添加至项目；
  3. 点击我的项目页面中的在线链接–预览字体查看使用方法；

15 行高

html（结构）+css（表现）+js（行为）_第30张图片

  1. 行高指的是单行文字的高度；

16 字体简写

html（结构）+css（表现）+js（行为）_第31张图片

  1. font: 加粗 斜体 大小/行高 字体族;

17 文本样式

17.1 水平对齐text-align

left,right,center,justify

17.2 垂直对齐vertical-align

  1. baseline 默认值 基线对齐
  2. top 顶部对齐
  3. bottom 底部对齐
  4. middle 居中对齐
  5. 对于图片不能紧贴父元素的情况，可以将图片的vertical-align值设为top或者bottom；

17.3 设置网页处理空白 white-space

  1. normal 默认值
  2. nowrap 不换行
  3. pre 保留空白
设置文字过多省略号效果
  // 设置文本不换行
   white-space: nowrap;
   // 设置隐藏溢出的文本
   overflow: hidden;
   // 显示省略符号来代表被修剪的文本
   text-overflow: ellipsis;

18 京东导航条

  1. 不需要超链接用span；
  2. 分割符可以用li标签，设置宽度和高度即可；
  3. 使用hover伪类就可以实现下拉框出现隐藏的功能；
父元素:hover 子元素{
         display: block;
	}

下拉框：

  1. 首先结构上要和上边的元素处于同一级别（兄弟元素），设置好宽高，然后开启绝对定位（子绝父相），通过调整属性right可以控制下拉框的朝向；
  2. 去除上下两个div接触部分的边框：设置上方div的padding-bottom值，设置下方div的top值，这两部的目的是让上方的div盖住下方div的边框，由于下方div开启定位后，层级变高，此时需要提高上方div的层级，先开启上方div的相对定位，然后设置其z-index使其大于下方div的层级，这样就完成了两个部分的无缝链接；

19 背景

html（结构）+css（表现）+js（行为）_第32张图片
html（结构）+css（表现）+js（行为）_第33张图片
html（结构）+css（表现）+js（行为）_第34张图片
html（结构）+css（表现）+js（行为）_第35张图片

20 雪碧图

html（结构）+css（表现）+js（行为）_第36张图片

  1. 因为左上角是坐标原点，所有偏移量都是负的；

三、 综合练习

1 顶部导航栏

1.1 命名

在这里插入代码片

1.2 body

    body{
        font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;           
        color:#333;
        /* 防止body过小的时候，容器溢出 */
        min-width: 1226px;
    }
  1. min-width是页面内容区的宽度，防止body过小的时候，容器溢出；

1.3 width

    /* 给内容区设置宽度 */
    .w{
        width:1226px;
        margin:0 auto;
    }
  1. 设置一个w类，所有的内容区容器可以通用；

1.4 ul和li浮动

ul根据其位置设置向左向右浮动，li一般都设置为向左浮动；

1.5 a标签

    a{
        /* 取消文本样式 */
        text-decoration: none;
        /* 设置字体颜色 */
        color:#b0b0b0;
        /* display设置为block，a会充满整个li标签 */
        display: block;
    }

1.6 分割线sep

方法一：直接使用“|”来当分割线，然后设置其字体大小，颜色即可；

结构
<li class="sep">|</li>
样式
```javascript
   .sep{
       /* 字体大小 */
       font-size: 12px;
       /* 左右外边距 */
       margin:0 .3em;
       /* 颜色 */
       color:#424242;
   }

``
方法二：直接设置li标签的宽度高度颜色；

结构
<li class="spacer"></li>
样式
.spacer{
    width:1px;
    height: 10px;
    background-color: #ccc;
    margin:11px 5px 0;
    padding:0;
}

1.7 shopcar下拉框

  1. 为了保证在鼠标在下拉框时hover效果不消失，所以要把hover绑定在外层元素上面；
  2. 通过调整下拉框的right值，可以设置下拉框的位置；
   .shopcar-bar{
       width:300px;
       height: 100px;
       /* 子绝 */
       position:absolute;
       /* 右边界对齐 */
       right:0;
       background-color: white;
       display: none;
   }
  1. 整体结构
    a自身是行内元素，但是上边的样式将a设置成block了；
<li class="shopcar">
    <a href="#" class=""><i class="iconfont icon-gouwuche"></i><span> 购物车（0）</span></a>
    <div class="shopcar-bar"></div>
</li>

1.8 下载app下拉框

  1. 因为下拉框也在超链接的范围内，所以把下拉框放到a标签中；
  2. 文字放到外部div中（与img同级），当div的宽度设置后，文字将被挤到二维码的下面，通过设定text-align：center让文本居中；
结构
 <li class="load-app">
<a href="#" >下载app
    <div class="QR-code">
        <img src="img/download.png" alt="">
        小米商城App
    </div>
</a>
</li>
样式
 .QR-code{
      width: 124px;
      height: 148px;
      position:absolute;
      right:-50px;
      display: none;
  }
  .QR-code img{
      width: 90px;
      height: 90px;
      /* 通过设置margin值让二维码居中 */
      margin:17px;
      margin-bottom:10px;
  }
  .load-app:hover .QR-code{
      box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
      line-height: 1;
      /* 让文本居中 */
      text-align: center;
      color:#333;
      font-size: 14px;
      display: block;
  }
  1. 小三角：利用div来实现；
 .load-app:hover a::after{
      content:"";
      /* 创造一个小三角 */
      border:6px solid transparent;
      width:0;
      height:0;
      border-top: none;
      border-bottom-color: #fff;
      /* 开启绝对定位 */
      position:absolute;
      /* 贴在下边沿 */
      bottom:0;
      /* 设置水平居中 */
      left:0;
      right:0;
      margin:auto;
  }

1.9 过渡效果

height:0;
只要高度发生变化，需要0.3s的时间去切换
transition：height 0.3s;

先将需要隐藏的元素高度设置为0，然后通过hover将其元素设为原值；这样不用设置display来隐藏元素，而且可以设置过渡效果；

2 头部

2.1 logo

logo放在h1标签中，在h1中加入“小米官网"，有利于被搜索引擎收录；
将“小米官网"的font-size设置为0或者将text-indent设为-9999 即可隐藏文字；

结构
  <h1 class="logo" title="小米官网">
  		小米官网
      <a href="#"></a>
  </h1>
  样式
.header .logo a{
 background: url(img/logo-mi2.png) no-repeat;
 display: block;
 background-size: 56px 56px;
 height:56px; 
}

2.2 logo的切换效果（视频中有，新版页面没有）

2.3 中间导航栏

  1. 隐藏元素并且占位置visibility:hidden;

2.4 下拉框

  1. 根据下拉框的宽度，确定其定位父元素（子绝父相）；
  2. hover的时候，要注意使用什么选择器；

2.5 搜索框

  1. 两个input标签之间存在空隙，是因为input标签换行了，让两个input标签紧挨着或者让两者都浮动起来 ；
  2. input中默认存在border和padding，可以手动调整；
  3. button中存在默认属性box-size:border-box,边框内边距也会算在width和height中；

2.6 轮播图

  1. 图片放在div中，图片底部和div会有缝隙，此时需要设置图片的vertical-align为left或者right；
  2. 箭头位置
结构：两个箭头写在一个div中就可以
   <div class="jiantou">
       <a href="javascript:;" class="iconfont icon-xiangzuojiantou prev"></a>
       <a href="javascript:;" class="iconfont icon-jiantou next"></a>
   </div>
样式
  .jiantou a{
      width:41px;
      /* line-height和height设置相同值，可以让a中的元素垂直居中 */
      height: 69px;
      line-height: 69px;
      position:absolute;
      /* 同时设置top,bottom,margin,width,可以让a在包含块中垂直居中 */
      top:0;
      bottom:0;
      margin:auto;
  }
  分别设置两个箭头的水平位置
   .prev{
      left: 234px;
  }
  .next{
      right:0;
  }

3 侧边导航栏

**目的：**让侧边框固定在视口的某个位置，并随着视口宽度的变化而自动调整；
实现原理：left + margin-left +border-left + padding-left + width + padding-right + +border-right + margin-right + right = 视口的宽度 其中left和right在默认情况下为auto，其余属性默认值都是0；利用left和right的默认值为auto的特性，将其中一个属性（right）设为视口宽度的百分比，此时另一个属性（left）为auto，通过调整margin-right的值来调整left的值，从而将其置于固定的位置；
注意事项： left和margin-left同时调整的时候元素的位置不会改变，因为两者都是以左边界为基准，一个增加一个减少，二者会抵消；

/* 设置回到顶部的元素 */
.back-top{
    width: 26px;
    height: 206px;
    background-color: orange;
    /* 开启固定定位 */
    position: fixed;
    bottom: 60px;
    right: 50%; /*将right值设置为视口宽度的50%*/
    margin-right: -639px;
    /* 
        布局的等式
            left + margin-left + width + margin-right + right = 视口的宽度
            auto + 0 + 26 + 0 + 60 = 视口宽度
            auto + 0 + 26 + -639px + 50% = 视口宽度
    */
}

4 广告区

4.1 左侧6宫格

html（结构）+css（表现）+js（行为）_第37张图片

  1. 图标字体单独占用一行，所以display设置为block；因为此时是两行，所以垂直方向不能通过设置line-height来居中了，可以设置margin或者padding来居中；
  2. 关于内部的小边框，是通过伪元素来实现的；
        ul{
            list-style: none;
            margin:0;
            padding:0;
            padding-top:2px;
            padding-left: 6px;
            // 开启bfc，防止父子元素外边距重叠
            overflow: hidden;
        }
        ul li{
            float:left;
            // 子绝父相，伪元素也是li的子元素
            position: relative;
        }
        ul li::after{
            content:"";
            height:1px;
            width:67px;
            background-color: red;
            position:absolute;
            // 设置水平居中
            left:0;
            right:0;
            margin:0 auto;
            top:0;
        }
        ul li::before{
            content:"";
            height:60px;
            width:1px;
            background-color: red;
            position:absolute;
            // 设置垂直居中
            left:0;
            top:0;
            bottom:0;
            margin:auto 0;
        }

5 标题栏图标

  1. 在网站的根目录后加favicon.ico，即可访问网站的标题栏图标；https://www.mi.com/favicon.ico
  2. 通过link设置自己网页的标题栏图标即可；

6 代码压缩视频

目的：缩小代码体积，增快访问速度，提高用户体验；
原理：去除文件中的注释、空格、换行；

四、css高级

1 过渡

html（结构）+css（表现）+js（行为）_第38张图片

html（结构）+css（表现）+js（行为）_第39张图片

  1. 四个属性，延时时间要在持续时间之后，其余参数位置任意；
  2. 不同属性值之间以空格分隔；transition:margin-left 2s 2s;

2 动画

 div{
	  /* width是每个动作的宽度 */
	 width:136px;
	 height:180px;
	 margin:0 auto;
	 border:1px solid red;
	 background-image: url(img/2.jfif);
	 /* steps()中的值是图片中动作的数量 */
	 animation: test 1s steps(4) infinite;
}
@keyframes test{
	 from{
	     background-position:0 0;
	 }
	 to{
	     /* 水平偏移量是图片宽度的相反数 */
	     background-position:-487px 0;
	 }
}

3 变形平移（可用于设置居中）

html（结构）+css（表现）+js（行为）_第40张图片

3.1 xy轴平移

1. 指定宽高时使用绝对定位的特性来设置元素居中
 div{
       width:100px;
       height:100px;
       background-color: aqua;
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
   }

2. 未指定宽高时使用平移来实现定位
  div{
      background-color: aqua;
      position:absolute;
      /* left和top的百分比是相对于其最近的定位祖先元素 */
      left:50%;
      top:50%;
      /* transform 中的百分比是相对于元素自身 */
      transform:translateX(-50%) translateY(-50%)
  }

3.2 元素浮动效果

transform设置元素平移并不会影响页面的布局

body{
    background-color: #f5f5f5;
}
div{
    width:234px;
    height: 300px;
    background-color: #fff;
    margin:50px auto;
    transition:all .3s;
}
div:hover{
    box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
    transform:translateY(-5px);
}

3.3 z轴平移

3.4 旋转

html（结构）+css（表现）+js（行为）_第41张图片

3.5 时针案例

结构
 <div class="clock">
        <!-- 外边的div进行旋转，而里面的指针随div一起旋转 -->
        <!-- 秒针 -->
        <div class="second-wrapper">
            <div class="second"></div>
        </div>
        <!-- 分针 -->
        <div class="minute-wrapper">
            <div class="minute"></div>
        </div>
        <!-- 时针 -->
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>
    </div>
样式
 <style>
        .clock{
            width:150px;
            height:150px;
            border:5px solid black;
            border-radius:50%;
            margin:150px auto;
            position: relative;
        }
        .clock>div{
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
        .second-wrapper{
            width:140px;
            height:140px;
            animation: run 10s steps(60)  infinite ;
        }
        .second{
            height:70px;
            width:3px;
            background-color: black;
            margin:0 auto;
        }
        .minute-wrapper{
            width:120px;
            height:120px;
            animation: run 600s steps(60) infinite;
        }
        .minute{
            height:60px;
            width:5px;
            background-color: black;
            margin:0 auto;
        }
        .hour-wrapper{
            width:100px;
            height:100px;
            animation: run 7200s linear delay infinite;
        }
        .hour{
            height:50px;
            width: 5px;
            background-color: red;
            margin:0 auto;
        }
        @keyframes run{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>

3.6 缩放

html（结构）+css（表现）+js（行为）_第42张图片
鼠标键入图片放大效果

结构
    <div>
        <img src="img/mi1.jpg" alt="">
    </div>
样式
  <style>
      div{
          width:400px;
          border:1px solid red;
          overflow: hidden;
      }
      img{
          width:100%;
          vertical-align:top;
          transition:.3s;
      }
      img:hover{
          transform:scale(1.2);
      }
  </style>

3.7 变形的原点

html（结构）+css（表现）+js（行为）_第43张图片

五、less（css增强版）

1 简介

  1. 安装easy-less插件后，创建less文件会自动编译成css文件；
  2. less文件中单行注释//，其内容在对应的css文件中不会显示；也可以有css中的多行注释，会显示在css文件中；

2 变量

// 变量
@a:white;
@b:box1;
@c:200px;

// 使用变量时，如果是直接使用，则以 @变量名 的形式使用即可
.box2{
    background-color: @a;
    width:@c;
}
// 作为类名或者是一部分值使用时必须以 @{变量名} 的形式使用
.@{b}{
    width: @c;
    background-image:url("@{b}/1.png");
}
// extend共享box2的样式并另外添加自己的样式
.box3:extend(.box2){
    height:@a;
    // & 表示外层元素box3
    &:hover{
        border:1px solid red;
    }
    // 复制box1中全部属性，性能比extend差 
    .box1()
}

3 css到less的映射

六、弹性盒

1 弹性容器的样式

html（结构）+css（表现）+js（行为）_第44张图片

1.1 flex-direction

作用：指定容器中弹性元素的排列方式；
属性值：row 默认值 弹性元素在容器中自左向右水平排列（相当于float：left）
row-reverse 弹性元素在容器中自右向左水平排列（相当于float：right）
column 弹性元素在容器中自上向下垂直排列
column-reverse 弹性元素在容器中自下向上垂直排列

1.2 主轴/侧轴

主轴：弹性元素的排列方向；
侧轴：与主轴垂直的方向；

1.3 flex-wrap

html（结构）+css（表现）+js（行为）_第45张图片

1.4 flex-flow

可以同时设置flex-direction和flex-wrap，位置任意

1.5 justify-content

html（结构）+css（表现）+js（行为）_第46张图片

1.6 align-items

html（结构）+css（表现）+js（行为）_第47张图片

1.7 align-content

辅轴空白空间的分布，取值和justify-content相同；

1.8 设置容器中的弹性元素居中

display:flex;
justify-content: center;
align-items: center;

2 弹性元素的样式

2.1 flex-grow

作用：弹性元素的伸展系数
弹性容器有剩余空间时，弹性元素会按照比例进行伸展；

flex-grow:1;

2.2 flex-shrink

作用：弹性元素的收缩系数
弹性容器不足以容纳弹性元素的时候，按比例进行收缩；
缩减多少是根据元素的大小和缩减系数共同决定的；

2.3 align-self

用来覆盖当前元素上的align-items

2.4 flex-basis

html（结构）+css（表现）+js（行为）_第48张图片

2.5 flex

可以同时设置三个属性：伸长 缩短 基础；
html（结构）+css（表现）+js（行为）_第49张图片

2.6 order

决定弹性元素的排列顺序

七、移动端布局

1 手机像素

一般情况下，移动端将视口的宽度设置为980px，如果pc端网页超出了这个宽度，那么移动端会将整个网页进行缩放从而将整个页面全部显示出来；

2 视口

  1. 视口是屏幕中用来显示网页内容的区域；
  2. 可以通过调节视口的大小，来调整css像素和物理像素的像素比；
  3. 将像素比设置为最佳像素比的视口大小称为完美视口，为了在移动端完美显示pc端网页，需要设置完美视口；
  4. 通过meta标签来设置视口，device-width将页面的宽度设置为跟随设备屏幕的宽度，initial-scale设置页面的初始缩放比例；

3 vw

  1. 100vw=视口宽度；

八、响应式布局

1 定义

响应式布局是指网页根据不同的设备或者窗口大小呈现不同的状态；

2 媒体查询

2.1 定义

媒体查询为不同的设备或者不同的状态来分别设置样式，响应式布局的关键在于媒体查询；

2.2 类型

  1. all 全部设备
  2. print 打印设备（一般不用）
  3. screen 带屏幕的设备
  4. speech 屏幕阅读器（一般不用）

2.3 格式

可以写多个类型，用逗号隔开即可；

 @media screen,print {
            div{
                width:100px;
                height: 100px;
                background-color: black;
            }
        }

only关键字用于解决浏览器的兼容问题，有的浏览器不支持媒体查询但是认识screen，为了避免出现错误，在screen之前加上only，浏览器就不会识别出screen了；

   @media only screen {
       div{
           width:100px;
           height: 100px;
           background-color: black;
       }
   }

2.4 特性

  1. and表示与，逗号表示或；
  2. min-width和max-width设置断点，断点是样式切换的分界点；
  @media only screen and (min-width:600px) and (max-width:1000px){
      body{
          background-color: black;
      }
  }

3 练习

3.1 logo图片

  1. 所给的图片是二倍图，所以需要将其大小减半；width和height减半的同时，也要将背景图片大小background-size减半；
  2. logo要使用h1标签，a标签中要写上title并隐藏；

    meitu美图

你可能感兴趣的:(前端技术,css,html5,html)

  • 前端--深入理解HTTP协议 菜鸡想成为大佬 前端前端http网络协议
    HTTP协议简介HTTP（HyperTextTransferProtocol，超文本传输协议）是一个应用层协议，用于在客户端（通常是浏览器）和服务器之间传输超文本数据（如HTML、CSS、JavaScript等）。它是万维网（WorldWideWeb）的核心协议，通过HTTP，用户能够在浏览器中访问网站。HTTP的特点无状态：HTTP协议是无状态协议，即服务器不会自动保存每次请求之间的上下文信息。
  • 原生html页面弹窗_JavaScript 弹窗 weixin_39598584 原生html页面弹窗
    JavaScript弹窗可以在JavaScript中创建三种消息框：警告框、确认框、提示框。警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法window.alert("sometext");window.alert()方法可以不带上window对象，直接使用alert()方法。实例functionmyFunction(){alert("你好，
  • 原生html页面弹窗_html 页面弹窗 weixin_39609483 原生html页面弹窗
    第一种：alertalert("hello!")第二种：window.confirm()A:弹出窗口returntrue;}else{//alert("取消");returnfalse;}第三种：promptprompt方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框vartheResponse=window.prompt("欢迎？","请在此输入您的姓名。");页面代码测试fun
  • html5 原生 弹窗,HTML5 Popmotion.js实现的弹窗控件 weixin_39564527 html5原生弹窗
    JavaScript语言：JaveScriptBabelCoffeeScript确定const{css,transform,chain,delay,tween,easing,parallel}=window.popmotion;const{interpolate}=transform;lettrigger;letisClosing=false;//SelectDOMconstmodalTrigge
  • Python爬虫网安-beautiful soup+示例
    目录beautifulsoup:解析器：节点选择器：嵌套选择：关联选择：子节点：子孙节点：父节点：祖先节点：兄弟节点：上一个兄弟节点：下一个兄弟节点：后面所有的兄弟节点：前面所有的兄弟节点：方法选择器：CSS选择器：beautifulsoup:bs4用于解析htmlandxml文档解析器：html.parser、lxml解析器和XML的内置解析器文档遍历：跟xpath差不多，也是整理成树形结构搜索
  • vue路由，本地存储，刷新页面（学习心得） 2301_78876497 vue.js前端javascript
    简介：在使用vue单独做一个网站时，会使用到路由和本地存储，这次主要介绍我在学习路由和本地存储使用到的一种方法。路由：vue里面的路由类似于html内的a标签，使用前需要导入路由的包；这个一般使用了路由后会自动导入的，可以去main.js内查看是否有router的包导入。那么使用路由可以有三种方法:第一种：使用name+params的方法，这里的name是index.js内路由的namethis.
  • 【Python爬虫实战】全面抓取网页资源（图片、JS、CSS等）——超详细教程与源码解析 Python爬虫项目 python爬虫javascript新浪微博开发语言css旅游
    前言在互联网时代，网页数据已经成为重要的信息来源。许多时候，我们不仅需要抓取网页中的文字信息，还需要将网页中的各种资源文件（如图片、CSS样式表、JavaScript脚本文件等）一起抓取并保存下来。这种需求广泛应用于网页备份、离线浏览、数据分析等场景。本篇文章将带你从零开始，系统讲解如何使用Python最新技术，一步步实现抓取网页中所有静态资源的完整流程，包括：页面结构分析爬虫基本架构搭建异步爬取
  • 使用Python爬虫抓取免费音乐下载网站：从数据抓取到下载 Python爬虫项目 2025年爬虫实战项目python爬虫开发语言
    目录：前言爬虫基础知识什么是Web爬虫爬虫的工作原理抓取音乐下载网站的目标目标网站分析确定抓取数据的元素爬虫技术栈介绍Python爬虫的常用库requests库BeautifulSoup库Selenium库aiohttp和异步抓取抓取音乐下载网站的步骤选择目标网站并分析页面结构使用requests获取网页内容使用BeautifulSoup解析HTML解析音频文件下载链接使用Selenium抓取动态
  • centos使用wget下载jdk8 任意放逐 centosjavalinux
    首先官网找需要的的jdk版本https://www.oracle.com/java/technologies/javase/javase8u211-later-archive-downloads.html我这里选择的是弹出下载提示框：勾选点Downloadjdk…这里需要使用一个账号登录，可以自行在网上搜一个账号，我就不给了。然后退回原来的页面下载，用一个能看到下载链接的软件下载，我使用的是idm
  • 【jdk】使用wget下载jdk8 催化开天地 java开发语言
    因为在oracle官网下载jdk需要如果直接在linux中使用wget命令下载，实际下载是一个html文件，所以需要通过一下命令wget--no-check-certificate--no-cookies--header"Cookie:oraclelicense=accept-securebackup-cookie"http://download.oracle.com/otn-pub/java/j
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock（主题时钟） sunbyte TailiwindCSS实战指南vue.js前端javascripttailwindcsscss前端框架
    我们继续50个小项目挑战！——ThemeClock组件仓库地址：https://github.com/SunACong/50-vue-projects项目预览地址：https://50-vue-projects.vercel.app/使用Vue3的CompositionAPI和语法结合TailwindCSS构建一个能够动态切换主题（深色与浅色）的时钟组件。该组件不仅显示当前时间（包括小时、分钟和秒
  • 从数据抓取到智能分类：用 LangChain + 爬虫构建自动化工作流的实战笔记 大模型之路 大模型（LLM）人工智能langchain
    一、从人工到自动化的迫切需求在数字化时代，信息的快速获取与处理成为个人和组织高效运转的关键。然而，许多重复性强、耗时长且缺乏创造性的任务，如定期收集和整理网络信息并制作成特定格式的内容，依然占据着人们大量的时间和精力。本文作者就面临这样的困境：每两周需花费数小时访问多个大学网站，提取活动信息，手动将其整理成繁琐的HTML表格，并确保在Outlook中格式正确无误。这一过程不仅涉及大量枯燥的重复劳动
  • Java代码实现Excel表格导入 IT莫染 FunctionModuleSpringBootDemojava教程面试题等exceljavapoi
    Java代码实现Excel表格导入/***Excel解析成员工数据集合**@paramfile*@paramallNations*@paramallPoliticsstatus*@paramallDepartments*@paramallPositions*@paramallJobLevels*@return*/publicstaticListexcel2Employee(MultipartFil
  • Netty案例：WebSocket开发网页版聊天室 熙客 12_计算机网络websocket网络协议网络
    目录1、开发流程2、具体代码实现2.1添加依赖(pom.xml)2.2配置文件(application.yml)2.3配置类读取设置2.4Netty服务器实现2.5WebSocket初始化器和处理器2.6SpringBoot启动类2.7HTML5客户端(src/main/resources/static/chat.html)2.8启动与测试1、开发流程创建SpringBoot项目添加Netty依赖
  • CSS3 常见选择器（属性、伪类、伪元素、组合）面试详解 1加1等于 javascript实战javascript前端css3
    本文详细介绍了日常中常用的几种选择器，包括属性选择器、伪类选择器、伪元素选择器、组合选择器等等本文目录1.属性选择器2.伪类选择器3.伪元素选择器4.组合选择器1.属性选择器属性选择器允许根据元素的属性及其值来选择元素。常见的属性选择器有以下几种形式：[attribute]：选择具有指定属性的元素。[attribute=value]：选择属性值精确等于指定值的元素。[attribute^=valu
  • 基于 WebGL 与 GIS 的智慧垃圾分类三维可视化技术方案 图扑可视化 数字孪生三维可视化垃圾分类智慧环卫
    图扑自主研发的HT可视化引擎，基于HTML5的WebGL与Canvas技术构建，形成了完整的2D/3D图形渲染体系。该引擎无需依赖第三方插件，通过纯JavaScript脚本调用API，即可实现跨平台的可视化交互体验，支持PC端、移动端及大屏终端的多屏协同。在三维渲染技术层面，引擎深度集成WebGL底层图形接口，构建了高效的轻量化处理体系。HT还支持3DTiles格式航拍倾斜摄影实景数据、城市建筑群
  • 基于nodejs+vue.js服装商店电子商务管理系统
    如果你是一个小白,你不懂得像javaPHP、Python等编程语言，那么Node.js是一个非常好的选择。采用vscode软件开发,配套软件安装.包安装调试部署成功,有视频讲解前端:html+vue+elementui+jQuery、js、css数据库：mysql,Navicatvue框架于Node运行环境的Web框架,随着互联网技术的飞速发展，世界逐渐成了一个地球村，空间的距离也不再是那么重要。
  • css实现优惠券效果 全
    效果如下：样式一：样式一左半圆效果左右半圆效果左内圆四角收缩六角收缩凹边中排圆点两边凹陷.coupon1{width:240px;height:100px;margin-top:15px;background-color:#f56c6c;-webkit-mask:radial-gradient(circleatleftcenter,transparent20px,red20px);}.coupon
  • Chart.js 安装使用教程 小奇JAVA面试 安装使用教程javascript开发语言ecmascript
    一、Chart.js简介Chart.js是一个简单而灵活的JavaScript图表库，支持8种常用图表类型（折线图、柱状图、饼图等），基于HTML5Canvas渲染。它轻量易用，适合快速构建响应式图表，广泛应用于仪表盘、可视化后台、统计图展示等场景。二、Chart.js安装方式2.1使用CDN引入（推荐快速使用）2.2使用npm安装（适合前端工程项目）npminstallchart.js--sav
  • 一份来自前端开发工程师的规范简历 追影的React开发者 前端javascriptphotoshop
    个人资料姓名：嘻嘻性别：女电话：12132323613邮箱：[email protected]现居地：上海市工作年限：3年求职意向期望职位：前端开发工程师期望薪资：面议工作性质：全职到岗时间：离职,一周内入职专业技能精通DIV+CSS页面布局，重构,掌握JavaScript，熟悉w3c标准，了解HTML语义化有一定的了解。熟练运用浏览器兼容技术，熟练进行前端性能优化设计。熟练掌握HTML5技术
  • AJAX 安装使用教程 小奇JAVA面试 安装使用教程ajax前端javascript
    一、AJAX简介AJAX（AsynchronousJavaScriptandXML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页内容的技术。它不是一种新语言，而是使用现有的标准组合：JavaScript+XMLHttpRequest（或Fetch）+HTML+CSS。二、AJAX是否需要安装？不需要单独安装！AJAX是浏览器原生支持的技术，主流浏览器均内置XMLHttp
  • SpringBoot 配置文件 application.yml(application.properties) 配置大全 你邻座的怪同学 springbootjavaspring
    参考网址：https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html＃===================================================================＃COMMONSPRINGBOOTPROPERTIES##此
  • axure 生成html手机,用Axure做的原型如何在手机上运行 玩音乐的铝孩纸 axure生成html手机
    一般的开发工作之前，我们通常会设计产品原型，大部分为axure绘制的线框图作为产品的PRD文档，供UI和开发进行前期工作，但是有的时候客户、领导想在开发之前，看到产品的概貌，就必须做产品的高保真原型进行模拟，这时如果做出来的原型能运行在手机端，那再好不过！原型制作软件有挺多，不过个人使用之后，最后还是依然坚持使用Axure,优点颇多，也可能是先入为主，这个教程Axure也是必须软件之一，适配为ip
  • axure基础操作 逾非时 photoshopui
    文件关于Axure的文件，能够打开、新建与八寸，或可以从其他RP文件导入原型内容。RP文件指的是Axure保存的源文件，以“.rp”为扩展名，除此之外还有.rp:原型文件;.rplib:元件库文件;.rpteam:团队项目文件;.html:网页文件;备份中恢复在AxureRP9中，会每隔15分钟对正在操作的原型文件做一次备份。若想设置的话，可以在【备份设置】中进行更改。步骤：文件-->备份设置--
  • C# 解决请求被中止：无法建立SSL / TLS安全通道问题 weixin_45866907 C#解决请求被中止：无法建立SSL/TLS安全通道问题[1].Net
    C#解决请求被中止：无法建立SSL/TLS安全通道问题参考文章：（1）C#解决请求被中止：无法建立SSL/TLS安全通道问题（2）https://www.cnblogs.com/SuperMetalMax/p/7286044.html备忘一下。
  • WEB 上一页下一页 半吊子的程序狗 jsWEB
    主页1.html2.html3.htmlvarcurrentPage={pageId:'page0',pageUrl:'index.html',pageIndex:0};varpageList=[{pageId:'page0',pageUrl:'index.html',pageIndex:0},{pageId:'page1',pageUrl:'1.html',pageIndex:1},{pageI
  • 跟着AI学习C#之项目实战-电商平台 Day7 蓝胖子不会敲代码 C#学习c#开发语言
    Day7：部署准备与优化✅今日目标：添加静态资源（CSS、JS、图片）优化页面样式与交互体验添加分页功能（商品、订单列表）配置生产环境设置（appsettings.Production.json）准备发布部署（dotnetpublish）功能概览类型内容静态资源wwwroot/css,wwwroot/js,wwwroot/images页面样式优化使用Bootstrap+自定义CSS增强用户体验分页
  • 请求被中止: 未能创建 SSL/TLS 安全通道（.net framework 4.0 解决方法 ） dearbaba_11 请求被中止:未能创建SSL/TLS安全通道请求被中止:未能创建SSL/TLS安全通道.NET4.0未能创建SSL/TLS安全通道
    请求被中止:未能创建SSL/TLS安全通道（.netframework4.0解决方法）参考文章：（1）请求被中止:未能创建SSL/TLS安全通道（.netframework4.0解决方法）（2）https://www.cnblogs.com/wlays/articles/10617013.html（3）https://www.javazxz.com/thread-6848-1-1.html备忘一下
  • 微信小程序入门四：实现table效果 鳄鱼儿 微信小程序小程序入门
    微信小程序中没有table组件，那么怎么实现呢？其实使用多个view组件就可以实现，接下来就直接看代码吧标题1标题2标题3标题4标题5{{item}}{{item}}{{item}}{{item}}{{item}}/*.css*/page{font-size:14px;color:#333;}.table{border:1pxsolid#dadada;border-right:0;border-b
  • 在LINUX下使用模拟器运行Android renjin252252252 linuxandroidpathx86c
    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://glizardy.blogbus.com/logs/42812304.html1到http://developer.android.com/sdk/1.5_r3/index.html下载Linux(i386)android-sdk-linux_x86-1.5_r3.zip178117561bytes350d0211678
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他