AlexZ33
AlexZ33

CSS教程：CSS（下）

CSS（下）

历史

  • CSS 最早被提议是在1994年；
  • 最早被浏览器支持是1996年；

  • 1996年 W3C 正式推出了CSS1；

    • 在这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性

  • 1998年 W3C 正式推出了CSS2；

    • 开始使用样式表结构

  • CSS2.1 是 W3C 现在正在推荐使用的（2004年2月）；

    • 在CSS2的基础上略微做了改动，删除了许多诸如text-shadow等不被浏览器所支持的属性

  • CSS3 现在还处于开发中；

    • 现在所使用css基本是在css2基础上发展而来
    • 2010年推出了全新版本css3
  • CSS 3 在包含了所有 CSS 2 所支持的基础上更有所改进，所以不必担心兼容问题。

CSS 支持多种设备，例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。

回顾

用到的知识点

  • 双栏布局

【CSS布局】左边定宽右边自适应

  • 进度条实现
  • 显色选取器

https://codepen.io/AlexZ33/pen/PowGpGj

CSS其他重要知识

BFC

BFC全称：Block Formatting Context，BFC翻译过来就是块级格式化上下文。

BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

说白了，他就是一个规则。

具体戳这篇文章:  什么是BFC?

  • IFC（行级格式化上下文）
  • GFC（网格布局格式化上下文）
  • FFC（自适应格式化上下文）

层叠上下文和层叠顺序

  • z-index  

思考： 

  1. z-index 什么情况下不会生效
  2. z-index 为 -1 的含义
  3. 两个 div 竖排，下边 div 上移，两者层叠顺序是怎样的？为什么？

尺寸单位及使用场景

外边距折叠

重绘&回流


渲染引擎

  1. 解析html结构生成DOM Tree
  2. 解析css生成CSS Rule Tree
  3. 遍历DOM Tree，逆向解析每一个样式规则，为每一个DOM Tree中的节点都应用上合适的规则，生成Render Tree
  4. 计算Render Tree种的每个元素的的位置，触发重排(reflow)、重绘(repaint)
  5. 调用Native GUI的API绘制

好用的工具

https://imgbin.com/


形状

正方形


https://codepen.io/AlexZ33/pen/rNaWJrL

长方形

https://codepen.io/AlexZ33/pen/wvBoyXN

圆


https://codepen.io/AlexZ33/pen/JjobpBJ

三角形


https://codepen.io/AlexZ33/pen/qBEqEvZ

 弯箭头符号

https://codepen.io/AlexZ33/pen/jOEVZQN

椭圆

  • 原理：使用border-radius:50%实现

https://codepen.io/AlexZ33/pen/WNbGZMe

半椭圆

  • 原理：利用border-radius可以使用/分隔开水平和垂直方向上的圆角值特性来分别设置不同方式上的圆角半径

https://codepen.io/AlexZ33/pen/vYEXeQQ

1/4椭圆

  • 原理：border-radius只设置一个角的圆弧

https://codepen.io/AlexZ33/pen/GRgjMPe

平行四边形

  • 原理：transform:skew()变形。（注意：行内元素无效）


https://codepen.io/AlexZ33/pen/yLyazrV

平行四边形伪元素方案

  • 原理：利用伪元素来变形，从而不影响元素内部正常内容（变形元素内部的内容也会变形）

https://codepen.io/AlexZ33/pen/OJPRxKL

菱形图片裁切

  • 原理：嵌套元素，内外反向rotate，内部图片宽度与对角线平齐.(内部反向rotate是为了摆正图片)


https://codepen.io/AlexZ33/pen/MWYjOwm

菱形裁切方案二

  • 原理：利用clip-path裁切路径属性，设置其值为polygon()多边形来实现

https://codepen.io/AlexZ33/pen/mdyrqVZ

元素切角

  • 原理：利用渐变（透明到实色）实现角度，利用background-size控制多个渐变互不影响实现多个切角

https://codepen.io/AlexZ33/pen/QWwKOKG

元素弧形切角

  • 原理：利用径向渐变实现，多个圆角与上述同理

https://codepen.io/AlexZ33/pen/ZEYpaBX

border-image实现切角

  • 原理：运用border-image结合svg图实现切角边框，通过background-clip限制背景色

https://codepen.io/AlexZ33/pen/KKwgyaW

裁切路径实现切角

  • 原理：运用clip-path:polygon()实现，局限兼容性不好，裁切会忽略内部文本内容。优点：可裁切任意内容，不受背景图限制

https://codepen.io/AlexZ33/pen/RwNGjKX

梯形导航tab效果

  • 原理：运用transform:perspective()实现穿透变形

https://codepen.io/AlexZ33/pen/abzmVJj

静态饼图


https://codepen.io/AlexZ33/pen/abzmVwa

动态饼图

  • 原理：伪元素遮盖旋转

https://codepen.io/AlexZ33/pen/jOEMamB

svg 实现饼图

https://codepen.io/AlexZ33/pen/povEdrr

视觉效果

单侧投影

  • 原理：利用box-shadow的3个大小值外，第4个长度参数（扩张半径），当扩张半径为负的模糊半径时，即可实现单侧投影

https://codepen.io/AlexZ33/pen/YzPpwGy

邻边投影

  • 原理：设置双侧位移，并设置扩张半径为模糊半径值一半

https://codepen.io/AlexZ33/pen/gObLPLg

对侧投影

  • 原理：叠加两个单侧投影

https://codepen.io/AlexZ33/pen/rNaWxmP

字体排版

连字符断行

效果不理想（兼容性不好）
  • hyphens: none // 隐藏连字符
  • hyphens: manual //显示连字符
  • hyphens: auto //自动

https://codepen.io/AlexZ33/pen/YzPwMWE

插入换行

  • 原理：运用unicode中的换行符0x000A,在CSS中即为\000A（简写为\A）来作为伪元素的content值，同时注意保留换行符和空白符white-space:pre
传统做法：通过
标签来进行换行
新的思路：可以通过:before或:after伪类选择器中的content设置为“A”来进行换行，因为Unicode字符中代表换行符的为“0x000A”，在CSS中可以写为“000A”或者简化为“A” 
div::after {
    content: "\A";
    white-space: pre; // 能够保留源代码中空白和换行符，否则content中的换行符将被忽略。
}

https://codepen.io/AlexZ33/pen/povgBEM

文本行斑马条纹

  • 原理：利用条纹背景实现条纹，再利用背景em值作为条纹大小

https://codepen.io/AlexZ33/pen/KKwVYWO

调整tab的宽度

  • tab-size属性
  • 原理：通过CSS3新增文本属性tab-size:2;来设置每个tab占2个字符宽度
在需要展示代码的网页上时，通过设置tab-size属性能够指定一个tab缩进几个字符。

https://codepen.io/AlexZ33/pen/BayjEZv

为某些字符单独设置字体(华丽的&符号)

传统做法：为需要单独设置字体的字符设置class，通过class为它们设置独特的字体。
新的思路：@font-face中的unicode-range属性可以设置字体的适用于哪些字符。 
@font-face {
    font-family: demoFont;
    src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'); /* 应用于指定字符的字体 */
    unicode-range: U+26; /* 设置生效字符，'&'的Unicode码位，可以通过'&'.chatCodeAt(0).toString(16)获取'&'的十六进制码位'26'，然后前面加上'U+'前缀 */
}
p {
    font-family: demoFont, Helvetica; /* demoFont字体只应用于'&'字符，其他字符会适用后续的字体'Helvetica' */
}

自定义文本下划线

传统做法：通过text-decoration:underline;
新的思路：
1、通过background与background-size设置一条自定义格式的下划线；
2、通过text-shadow可以让字符周围出现一圈白边，使的显示为下划线遇到字母的降部自动断开避让。
3、文本最好放置在行内元素内，这样下划线才能随这文本的换行也进行换行。 
span {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.2em;
    text-shadow: .05em 0 white, -.05em 0 white;
}

波浪下划线

凸版印刷效果

空心字效果/文字外发光效果/文字凸起效果

通过text-shadow为文本添加效果来实现。

文字发光效果

环形文字

1、通过SVG的path画出一个圆形。
2、通过text与textPath添加文本，并通过xlink:href属性将文本链接到路径上。 

    
        
        
            fdsfdsfdsfdsfsdfdsfsdfds        
        
    


.demo {
    width:300px;
    height:300px;
    margin: 4em auto 0;
}
svg{
    display:block;
    overflow: visible;
}
path {
    fill:none;
}
注：这种方法不但适用于环形文字还适用于所有需要特殊路径排序的文字。

用户体验

选用合适的鼠标指针

  • 原理：在不同场景下选用不同的鼠标指针。cursor属性设置
  • 隐藏光标：cursor:none,对于老版本浏览器可以通过cursor:url(transparent.gif)来传入一张1*1的透明gif模拟隐藏

扩大可点击区域

  • 原理：通过伪元素扩大按钮范围

自定义复选框

  • 原理：利用checkbox的:checked属性区分选中状态，再结合相邻label元素控制，通过伪元素实现想要的效果，再隐藏掉原复选框

开关式按钮

CSS遮罩层

  • 原理：通过box-shadow实现。缺陷：遮罩层下还是可以操作

原生modal遮罩层

  • 原理：通过 ::backdrop伪类实现遮罩

模糊背景弱化

  • 原理：通过滤镜模糊filter:blur()模糊背景

自定义滚动条样式

https://codepen.io/AlexZ33/pen/WdvrZz
https://codepen.io/AlexZ33/pen/QWwKpNr
https://codepen.io/AlexZ33/pen/abzmJNe

结构布局

自适应内部元素

  • 原理：通过CSS3新增属性min-content让元素宽度最大宽度为其内部不可断行的元素宽度
Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.



    
    

        这个小猫特别可爱，她的名字叫做镜心。按时发发发发发生发发的方法发发发
    




We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

如果没有设置任何样式时，效果如下：

如何让文字去自适应图片的宽度呢？这就是问题的关键点了，如何让元素去自适应内部元素？而不是去自适应它的父元素呢？答案就是 width: min-content: 表示该元素的宽度将被解析为它内部最大的不可断行的元素的宽度（例如：最宽的单词，图片，或者具有固定宽度的盒元素） 
figure {
/*   表示该figure的宽度是由内部最大的不可断行元素的宽度所决定 */
    max-width: min-content;
}

由于min-content是css3特性，部分浏览器可能不支持，所以我们需要一个平稳的回退方案，那就是提供一个固定的max-width值

figure {
    max-width: 300px;
    margin: auto;
}

figure > img { max-width: inherit }

https://codepen.io/AlexZ33/pen/rNaeNbB

精准控制表格列表

  • 原理：通过设置table-layout:fixed把表格更多的控制权交到开发者手里，而不是让浏览器决定内容多少时变更理想的渲染宽度
大家在实际开发的过程中，尤其是后台管理系统，表格的使用会非常频繁，但是对于，表格的宽的控制，可能有时候并没有达到我们想要的效果，原因可能还是我们对于表格的相关属性不是很清楚，尤其是table-layout：auto/fixed；
  1. auto为默认值，表示自适应单元格中的内容，此时设置宽度无效。
  2. fixed表示均等分割，即宽度是等分均分的，当然，我们也可以设置宽度。

首先，我们看一下auto的效果：


    

        序号
        文案1
        文案2
        操作
    

    

        1
        科比布莱恩特，一个伟大的时代，一个伟大的球员，还有一群伟大的球迷
        科比布莱恩特，一个伟大的时代，一个伟大的球员，还有一群伟大的球迷科比布莱恩特，一个伟大的时代，一个伟大的球员，还有一群伟大的球迷科比布莱恩特，一个伟大的时代，一个伟大的球员，还有一群伟大的球迷
        
            编辑
        
    




//css
table{
    width: 800px;
    border-collapse: collapse;
    width: 100px;// 此时设置了宽度也不会生效，因为此时table-layout为auto。
}
table tr td, table tr th {
    border: 1px solid #ddd;
}

那我们在上面的基础上，给table加一个table-layout:fixed，效果如下：

此时，我们看到部分单元格文本较多，如何隐藏呢？这时，我们可以用text-overflow:ellipsis , 该属性要同时配合：overflow:hidden;white-space:nowrap;以及一个指定的宽度才可以生效。 代码如下：

table{
    width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
}
table tr td, table tr th {
    border: 1px solid #ddd;
}
table tr th:nth-child(3) {
    width: 100px; 
}
table tr td:nth-child(3) {
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

最终的效果如下：

此时，有个细节要注意：我们直接设置td的宽度为100px,效果是没有生效的，必须设置th的宽度为100px，单元格的宽度才生效。
这是因为table渲染的时候，一般是根据第一行的样式去渲染，此时第一行是th构成的，所以此时th没有设置宽度，即使td设置了宽度，渲染的时候同一列的其他单元格还是根据th去渲染，所以此处，我们直接设置td的宽度是无效的，当然大家也可以把th构成的这一行删掉，然后再设置td的宽度，这时就可以生效了,因为此时第一行就是td构成的

https://codepen.io/AlexZ33/pen/mdyPyOx


全背景等宽内容居中

绝对底部 （Stricky Footer）

什么是绝对底部或粘性页脚（stricky footer）， 指页脚紧密的连接到视口的底部  。
如果内容尺寸足够长， 则页脚位于内容的正下方。

效果图：

  • calc()： 用于计算所应用区域的最小高度（window height - header height - footer height）
  • flex

过渡动画

动画调速函数

  • 弹跳球动画

    • CSS在提供了内置了几种缓动函数ease,linear,ease-in,ease-out,ease-in-out外，还提供了cubic-bezier()用于开发者定定义调速函数。
    • animate.css动画库

https://codepen.io/AlexZ33/pen/mdyOJOx
https://codepen.io/SebL/pen/pqJzn

  https://codepen.io/AlexZ33/pen/yLyVEJW

逐帧动画-CSS实现Loading动态图

  • 原理：通过把所有帧全部拼合到一张PNG图中，以一个一帧大小元素来容纳，变换background-position值实现帧过度，通过animation的steps()函数实现不平滑过度，从而显示每帧动画

https://codepen.io/AlexZ33/pen/NWPbzVQ

3D翻转

https://codepen.io/AlexZ33/pen/xJEYGX

上下循环滚动效果

https://codepen.io/AlexZ33/pen/MWYjpKz

实战技巧

使用CSS复位

CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

现在元素的 margin 和 padding 已为0，box-sizing可以管理您的CSS盒模型布局。

https://codepen.io/AlexZ33/pen/VwwoJGJ
注意：如果你遵循接下来继承 box-sizing讲解的这个技巧, 你不需要在以上代码中添加 box-sizing 属性。

继承 box-sizing

从 html 元素继承 box-sizing ：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

如此在插件或其它组件里改变 box-sizing 变得简单。

每日一拓展（长期学习目标）

https://juejin.im/post/5cf5f358e51d45778f076ce5

https://codepen.io/AlexZ33/pen/xxbVbKV

实战技巧

1、适配技巧

2、不同浏览器兼容
3、不同设备兼容
4、业务中常见样式bug和解决

常用组件 

CSS导航栏下划线跟随效果
纯CSS实现简单骨骼动画
扫二维码CSS动画

https://codepen.io/AlexZ33/pen/WNbQKez

拓展阅读

  1. 理解CSS的 z-index属性
  2. 层叠上下文
  3. font-face 详解
  4. CSS字典
  5. box-sizing
  6. The Shapes of CSS
  7. transition in css-trick

《CSS揭秘》

你可能感兴趣的:(css)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的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
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 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动画的优缺点优点：灵活度、可控性、性能
  • 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
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • 清除 Conda 缓存 Dmatteratall conda缓存
    清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 前端HTML+CSS+JS的入门学习 俊昭喜喜里 前端htmlcss
    一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
  • 10/24 每周学习总结5 木木ainiks 1024程序员节
    1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
  • HTML5概述 WFIT~SKY Web前端html5前端html
    1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
    JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
  • 【H2O2|全栈】关于CSS（3）CSS基础（三） 过期的H2O2 【H2O2】CSS入门css前端
    目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
    效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
  • unocss 一直热更新打印[vite] hot updated: /__uno.css 柳雾青烟紫燕穿 csscss3vue
    控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他