包小黑
包小黑

CSS基础汇总——点击标题跳转详细博客【学习笔记】

CSS 网页的美容师
理想中的结果： 结构(html)与样式(css)相分离

1.引入CSS样式表（书写位置）

  • 行内式（内联样式） :
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名>
  • 内部样式表（内嵌样式表）:
<head>
<style type="text/CSS">
   选择器（选择的标签） {
       
     属性1: 属性值1;
     属性2: 属性值2; 
     属性3: 属性值3;
   }
style>
head>
  • 外部样式表（外链式）:
<head>
 <link rel="stylesheet" type="text/css" href="css文件路径">
head>

2.CSS样式规则

CSS基础汇总——点击标题跳转详细博客【学习笔记】_第1张图片

3.css基础选择器

选择器 作用 缺点 使用情况 用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 不推荐使用 * {color: red;}

4.CSS字体样式属性

font:

属性 表示 注意点 用法
font-size 字号 我们通常用的单位是px 像素，一定要跟上单位 font-size:20px;
font-family 字体 实际工作中按照团队约定来写字体 font-family: Arial,“Microsoft Yahei”, “微软雅黑”;
font-weight 字体粗细 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 font-weight=400;
font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal font-style=" italic";
font 字体连写 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 font: italic 700 16px “微软雅黑”;

字体外观属性：

属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

5.CSS 列表和表单

表格是用来显示数据的，列表是用来布局的。
列表：

标签名 定义 说明
    		无序标签 里面只能包含li 没有顺序，我们以后布局中最常用的列表
      		有序标签 里面只能包含li 有顺序， 使用情况较少
      		自定义列表 里面有2个兄弟， dt 和 dd

      表单：

      • input控件
      属性 说明 作用
      type 表单类型 用来指定不同的控件类型
      value 表单值 表单里面默认显示的文本
      name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
      checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

      input常用属性：

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第2张图片
      h5新增的表单属性placeholder也很常用，显示用户提示文字。

      • label标签

      label标签绑定元素:

      1. 第一种用法就是用label直接包括input表单。
      <label> 用户名： <input type="radio" name="usename" value="请输入用户名">   label>

      适合单个表单选择

      1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
      <label for="sex">男label>
<input type="radio" name="sex"  id="sex">
      • textarea控件(多行文本输入框)
      <textarea >
  文本内容
textarea>
      • select下拉列表
      <select>
  <option>选项1option>
  <option>选项2option>
  <option>选项3option>
  ...
select>
      • form表单域
        常用属性：
      属性 属性值 作用
      action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
      method get/post 用于设置表单数据的提交方式，其取值为get或post。
      name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。
      • fieldset表单字段集

      标签可以将表单内的相关元素分组。

      标签会在相关表单元素周围绘制边框。

      标签为

      元素定义标题

      
<fieldset style="border: 1px solid #01567F">
    <legend style="font-size: 15px; font-family: 黑体; color: #0A467E; margin-left: 15px;">用户信息legend>
    <div>用户名称：<input type="text">div>
    <div>用户密码：<input type="password">div>
fieldset>

      6.CSS复合选择器

      选择器 作用 特征 使用情况 隔开符号及用法
      后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
      子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是**>** .nav>p
      交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
      并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
      链接伪类选择器 给链接更改状态 较多 重点记住 a{} 和 a:hover 实际开发的写法

      7.标签显示模式（display）

      • 块转行内：display:inline;
      • 行内转块：display:block;
      • 块、行内元素转换为行内块： display: inline-block;
      元素模式 元素排列 设置样式 默认宽度 包含
      块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
      行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
      行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度

      8.CSS 背景(background)

      属性 作用 值
      background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
      background-image 背景图片 url(图片路径)
      background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
      background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
      background-attachment 背景固定还是滚动 scroll/fixed
      背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
      背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值

      9.CSS三大特性

      • CSS层叠性

      • CSS继承性

      • CSS优先级

        • 权重计算公式
      标签选择器 计算权重公式
      继承或者 * 0,0,0,0
      每个元素（标签选择器） 0,0,0,1
      每个类，伪类 0,0,1,0
      每个ID 0,1,0,0
      每个行内样式 style="" 1,0,0,0
      每个!important 重要的 ∞ 无穷大

      10.CSS盒子模型

      标准盒子模型

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第3张图片

      1. 盒子边框（border）

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第4张图片

      • 语法：
      border : border-width || border-style || border-color
      属性 作用
      border-width 定义边框粗细，单位是px
      border-style 边框的样式
      border-color 边框颜色
      • 边框的样式：
      • none：没有边框即忽略所有边框的宽度（默认值）
      • solid：边框为单实线(最为常用的)
      • dashed：边框为虚线
      • dotted：边框为点线

      表格的细线边框

      通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

      • 但是两个单元格之间的边框会出现重叠，从而使边框变粗

      • 通过css属性：

        table{ border-collapse:collapse; }
        • collapse 单词是合并的意思
        • border-collapse:collapse; 表示相邻边框合并在一起。

      圆角边框(CSS3)
      在这里插入图片描述

      • 语法：
      border-radius:length;
      • 其中每一个值可以为 数值或百分比的形式。

      盒子阴影(CSS3)

      在这里插入图片描述

      • 语法:
      box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第5张图片

      • 前两个属性是必须写的。其余的可以省略。
      • 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
      2. 内边距（padding）

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第6张图片

      属性 作用
      padding-left 左内边距
      padding-right 右内边距
      padding-top 上内边距
      padding-bottom 下内边距

      当我们给盒子指定padding值之后， 发生了2件事情：

      1. 内容和边框 有了距离，添加了内边距。
      2. 盒子会变大了。

      padding简写：

      值的个数 表达意思
      1个值 padding：上下左右内边距;
      2个值 padding: 上下内边距 左右内边距 ；
      3个值 padding：上内边距 左右内边距 下内边距；
      4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；
      • 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

      内边距产生的问题

      • 问题：会撑大原来的盒子
      • 解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

      padding不影响盒子大小情况

      如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

      3. 外边距（margin）

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第7张图片

      属性 作用
      margin-left 左外边距
      margin-right 右外边距
      margin-top 上外边距
      margin-bottom 下外边距

      margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

      块级盒子水平居中

      • margin-left: auto; margin-right: auto;
      • margin: auto;
      • margin: 0 auto;

      清除元素的默认内外边距

       * {
     
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

      外边距合并

      • 相邻块元素垂直外边距的合并:

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第8张图片

      解决方案：尽量给只给一个盒子添加margin值。

      • 嵌套块元素垂直外边距的合并（塌陷）

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第9张图片

      解决方案：

      1. 可以为父元素定义上边框。
      2. 可以为父元素定义上内边距
      3. 可以为父元素添加overflow:hidden。

      还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题

      盒子模型布局稳定性: width > padding > margin

      • margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
      • padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
      • width 没有问题,经常使用宽度剩余法 高度剩余法来做。

      11.浮动（float）

      • 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
      1. 脱离标准普通流的控制
      2. 移动到指定位置。
      选择器 { float: 属性值; }
      属性值 描述
      none 元素不浮动（默认值）
      left 元素向左浮动
      right 元素向右浮动

      浮动口诀
      float ----- 浮 漏 特

      特点 说明
      浮 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
      漏 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
      特 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙

      1). 浮动元素与父盒子的关系

      • 子盒子的浮动参照父盒子对齐
      • 不会与父盒子的边框重叠，也不会超过父盒子的内边距

      2). 浮动元素与兄弟盒子的关系

      在一个父级盒子中，如果前一个兄弟盒子是：

      • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
      • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

      浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

      清除浮动

      什么时候用清除浮动呢？

      1. 父级没高度
      2. 子盒子浮动了
      3. 影响下面布局了，我们就应该清除浮动了。
      清除浮动的方式 优点 缺点
      额外标签法（隔墙法） 通俗易懂，书写方便 添加许多无意义的标签，结构化较差。
      父级overflow:hidden; 书写简单 溢出隐藏
      父级after伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题
      父级双伪元素 结构语义化正确 由于IE6-7不支持:after，兼容性问题

      12.定位(position)

      在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

      选择器 {
      position: 属性值; }

      定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

      值 语义
      static 静态定位
      relative 相对定位
      absolute 绝对定位
      fixed 固定定位

      在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

      边偏移属性 示例 描述
      top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
      bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
      left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
      right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
      定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 使用情况
      静态static 不脱标，正常模式 正常模式 不能 几乎不用
      相对定位relative 不脱标，占有位置 相对自身位置移动 不能 基本单独使用
      绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定位父级元素搭配使用
      固定定位fixed 完全脱标，不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级

      定位改变display属性:

      display 是 显示模式， 可以改变显示模式有以下方式:

      • 可以用inline-block 转换为行内块
      • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
      • 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

      所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

      13.CSS高级技巧

      13.1 显示与隐藏

      属性 区别 用途
      display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
      visibility 隐藏对象，保留位置 使用较少
      overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

      display:隐藏之后，不再保留位置

      display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第10张图片
      visibility:隐藏之后，继续保留原有位置。

      visibility：visible ; 　对象可视

visibility：hidden; 　  对象隐藏

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第11张图片
      overflow:

      属性值 描述
      visible 不剪切内容也不添加滚动条
      hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
      scroll 不管超出内容否，总是显示滚动条
      auto 超出自动显示滚动条，不超出不显示滚动条

      13.2 用户界面样式

      属性 用途 用途
      鼠标样式 更改鼠标样式cursor 样式很多，重点记住 pointer
      轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
      防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

      鼠标样式:

      属性值 描述
      default 小白 默认
      pointer 小手
      move 移动
      text 文本
      not-allowed 禁止

      轮廓线 outline:

       outline : outline-color ||outline-style || outline-width

      防止拖拽文本域resize:

      <textarea  style="resize: none;">textarea>

      13.3 vertical-align对齐

      (1)水平居中对齐

      • 有宽度的块级元素居中对齐，是margin: 0 auto;
      • 让文字居中对齐，是 text-align: center;

      (2)vertical-align 垂直

      vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

      vertical-align : baseline |top |middle |bottom

      图片、表单和文字对齐: 默认的图片会和文字基线对齐
      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第12张图片

      (3)去除图片底侧空白缝隙
      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第13张图片
      解决的方法就是：

      • 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
      • 给img 添加 display：block; 转换为块级元素就不会存在问题了。

      13.4 溢出的文字省略号显示

      首先强制一行内显示，再次和overflow属性 搭配使用

       /*1. 先强制一行内显示文本*/
     white-space: nowrap;
 /*2. 超出的部分隐藏*/
     overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
     text-overflow: ellipsis;

      13.5 CSS精灵技术（sprite)

      CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第14张图片

      这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

      我们需要使用CSS的

      • background-image、
      • background-repeat
      • background-position属性进行背景定位，
      • 其中最关键的是使用background-position 属性精确地定位。

      13.6. 滑动门

      核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

      一般的经典布局都是这样的：

      <li>
  <a href="#">
    <span>导航栏内容span>
  a>
li>

      css样式

      * {
     
      padding:0;
      margin:0;

    }
    body{
     
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
     
      padding-top:20px;
    }
    li {
     
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
     
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
     
      background-image:url(./images/ao.png);
    }

      ao.png：
      在这里插入图片描述
      to.png：
      在这里插入图片描述

      总结：

      1. a 设置 背景左侧，padding撑开合适宽度。
      2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
      3. 之所以a包含span就是因为 整个导航都是可以点击的。

      13.7 margin负值之美

      1). 负边距+定位：水平垂直居中

      一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。

      2). 压住盒子相邻边框

      CSS基础汇总——点击标题跳转详细博客【学习笔记】_第15张图片

      13.8 CSS三角形之美

       div {
     
 	width: 0; 
    height: 0;
    line-height:0；
    font-size: 0;
	border-top: 10px solid red;
	border-right: 10px solid green;
	border-bottom: 10px solid blue;
	border-left: 10px solid #000; 
 }
      1. 我们用css 边框可以模拟三角效果
      2. 宽度高度为0
      3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
      4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

      你可能感兴趣的:(#,前端,javaweb,css)

      • Long类型前后端数据不一致 igotyback 前端
        响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
      • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
        ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
      • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
        加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
      • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
        ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
      • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
        Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
      • webpack图片等资源的处理 dmengmeng
        需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
      • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
        这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
      • 博客网站制作教程 2401_85194651 javamaven
        首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
      • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
        最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
      • 补充元象二面 Redstone Monstrosity 前端面试
        1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
      • 微信小程序开发注意事项 jun778895 微信小程序小程序
        微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
      • 字节二面 Redstone Monstrosity 前端面试
        1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
      • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
        点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
      • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
        一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
      • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
        第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
      • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
        html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
      • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
        1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
      • 360前端星计划-动画可以这么玩 马小蜗
        动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
      • Vue + Express实现一个表单提交 九旬大爷的梦
        最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
      • 探索Zebra4J：构建高效企业级Web应用的微服务框架 叶准鑫Natalie
        探索Zebra4J：构建高效企业级Web应用的微服务框架ZebraZebra4J/Zebra4Js基于SpringBoot的JavaWeb/Nodejs框架项目地址:https://gitcode.com/gh_mirrors/zebra/Zebra项目介绍在当今快速发展的技术环境中，构建高效、可扩展的企业级Web应用是每个开发团队的追求。Zebra4J作为一款基于SpringBoot的全新微服务
      • css2中的透明 琪33
        .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
      • Nginx从入门到实践(三) 听你讲故事啊
        动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
      • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
        Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
      • 前端知识点 ZhangTao_zata 前端javascriptcss
        下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
      • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
        1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
      • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
        1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
      • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
        数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
      • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台 网顺技术团队 成品程序项目javavue.js汽车课程设计springboot
        基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
      • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
        最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
      • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
        Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
      • 面向对象面向过程 3213213333332132 java
        面向对象：把要完成的一件事，通过对象间的协作实现。 面向过程：把要完成的一件事，通过循序依次调用各个模块实现。 我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian
      • Java Hotspot: Remove the Permanent Generation bookjovi HotSpot
          openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122   JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/
      • 正则表达式向前查找向后查找,环绕或零宽断言 dcj3sjt126com 正则表达式
        向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。     对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的
      • BaseDao 171815164 seda
        import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn
      • Ant标签详解--Java命令 g21121 Java命令
                这一篇主要介绍与java相关标签的使用         终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。           1
      • [简单]代码片段_电梯数字排列 53873039oycg 代码
               今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下:       import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S
      • Hessian原理 云端月影 hessian原理
        Hessian 原理分析 一．      远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协
      • 区分Activity的四种加载模式----以及Intent的setFlags aijuans android
          在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。 这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。 加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop
      • hibernate几个核心API及其查询分析 antonyup_2006 html.netHibernatexml配置管理
        (一)  org.hibernate.cfg.Configuration类         读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.)         Configuration co
      • PL/SQL的流程控制 百合不是茶 oraclePL/SQL编程循环控制
        PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有   流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop
      • 强大的Mockito测试框架 bijian1013 mockito单元测试
        一.自动生成Mock类        在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类  &nbs
      • 精通Oracle10编程SQL(11)开发子程序 bijian1013 oracle数据库plsql
        /* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E
      • 【EhCache一】EhCache版Hello World bit1129 Hello world
        本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍   环境准备 1.新建Maven项目   2.添加EhCache的Maven依赖 <dependency> <groupId>ne
      • 学习EJB3基础知识笔记 白糖_ beanHibernatejbosswebserviceejb
        最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。   EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基
      • angular.bootstrap boyitech AngularJSAngularJS APIangular中文api
        angular.bootstrap 描述：     手动初始化angular。     这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。   使用方法：     angular .
      • java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数 bylijinnan java
        public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl
      • 天使还是魔鬼？都是我们制造 ducklsl 生活教育情感
        ----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！     从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！     自己挑了两部先看了看，但是发现看完之后，心里久久不能平
      • [机器智能与生物]研究生物智能的问题 comsci 生物
              我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别....       但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把
      • 获取Android Device的信息 dai_lm android
        String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph
      • 最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现 datamachine java算法字符串匹配
        原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------
      • 小学5年级英语单词背诵第一课 dcj3sjt126com englishword
        long 长的 show 给...看，出示 mouth 口，嘴 write 写   use 用，使用 take 拿，带来 hand 手 clever 聪明的   often 经常 wash 洗 slow 慢的 house 房子   water 水 clean 清洁的 supper 晚餐 out 在外   face 脸，
      • macvim的使用实战 dcj3sjt126com macvim
        macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳   1. 下载macvim https://code.google.com/p/macvim/   2. 了解macvim :h               vim的使用帮助信息 :h macvim  
      • java二分法查找 蕃薯耀 java二分法查找二分法java二分法
        java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/
      • Spring Cache注解+Memcached hanqunfeng springmemcached
        Spring3.1 Cache注解  依赖jar包： <!-- simple-spring-memcached --> <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s
      • apache commons io包快速入门 jackyrong apache commons
        原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html   Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍：   1）  工具类   2
      • 如何学习编程 lampcy java编程C++c
        首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有
      • 架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy nannan408 Spring3
        1.前言。    如题。 2.描述。    @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp
      • Spring4+quartz2的配置和代码方式调度 Everyday都不同 代码配置spring4quartz2.x定时任务
        前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API……   quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发
      • Hibernate入门 tntxia Hibernate
          前言   使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。   Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。   如
      • Math类 xiaoxing598 Math
        一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round
      按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他