CSS - 技术教程文章
CSS—过渡【代码】
过渡（transition）是CSS3中具有颠覆性的特性之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时元素添加效果。 过渡动画：是从一个状态渐渐的过渡到另一个状态。低版本浏览器不支持，但是不影响页面布局。经常和:hover一起搭配使用。 transition:要过渡的属性 花费的时间 运动曲线 何时开始;1、属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性...
CSS3（二）【代码】【图】
6、2D转换转换也是CSS3的特性之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果 所谓2D转换是指二维平面内进行转换 6.1 移动 transform:translate(x, y); /* 或者分开写 */ transform:translateX(n); transform:translateY(n);注意： translate 不会影响到其它元素的位置，不脱标，但是会覆盖其它元素，类似相对定位translate 百分比单位是相对自身的 translate(50%, 50%)切记：对行内标签没有效果 6.2 旋转 rota...
【css/scss】修改input，textarea中的placeholder样式【代码】
input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ input:-moz-placeholder{} /* Firefox版本4-18 */ input::-moz-placeholder{} /* Firefox版本19+ */ input:-ms-input-placeholder{} /* IE浏览器 */ scss语法 @mixin placeholder {&::-webkit-input-placeholder {@content}&::-moz-placeholder {@content}&:-ms-input-placeholder {@content} } input, textarea...
利用CSS的pointerEvents为页面添加水印【代码】
pointer-events属性值详解 auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。 none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。 在项目中的util中建立wartermark.ts const setWatermark = (str: any) => {const id = '1.23452384164.123412...
css基础【代码】
css基础 表单css的介绍css基础语法样式的建立内部样式表（嵌套到页面中）外部样式的2种方法a:外部样式表的创建b:外部样式表的导入 内联样式（表行间样式，行内样式，嵌入式样式）样式表的优先级 选择器css选择符（选择器）element选择器id选择器class选择器群组选择器包含选择器通配符动态伪类选择器 选择符的权重html与css的注释 表单 表单的作用：用来收集用户的信息的； 1、表单框 <form name="表单名称" method="post/get" act...
css基础【代码】
今天复习了css的基础知识，整理了一下 css基础复习 核心概念和知识点 语法： css的核心功能是将css属性设定为特定的值，一个属性与值的键值对，被称为声明，如果有多个声明要用{}包裹起来。 使用{}包裹起来想后要效果生效，要使用css选择选择器将其与HTML元素绑定，选择器和声明块组成了css规则集（css ruleset） css注释 /* 单行注释 */ /*多行注释 */@规则 css规则是样式表的主体，通常样式表会包括大量的规则列表。但是有时候也...
WEB前端开发之CSS核心概念和知识点【代码】【图】
CSS核心概念和知识点 语法 css的核心功能是能够将css属性设定一个特定的值，一个属性与值的键值对被称为声明 color:red;而如果是用{}来声明多个的话，就形成了一个声明块 {font-size:20px;color:red; }声明块如果需要用到对应的HTML元素，必须加上选择器，选择器和声明块组成了CSS 规则集，简称为 CSS 规则效果：其实规则中的最后一条声明可以省略分号，但是并不建议这么做，因为这样很容易出粗css注释 /* 单行注释 */ /*多行注释...
小白学习html&css一些笔记——3.案例_注册页面(html)【代码】【图】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <form action="#" method="post"><table border="1" align="center" width="40%"><tr><td><label for="username">用户名</label></td><td><input type="text" name="username" placeholder="请输入用户名" id="username"></td></tr><tr><td><label for="password">密码</label></td><td><input type="password" name="password...
CSS基本样式
CSS基本样式 选择器字体样式文本样式鼠标样式背景样式列表样式CSS伪类选择器 标签选择器 类选择器 id选择器 ，id具有唯一性优先级 ： id>类>id 字体样式 字体类型：font—family字体大小： font—size字体风格： font—style（italic—斜体）字体粗细：font—weight（定义粗体字符，范围是100~900） 文本样式 文本颜色 color水平对齐方式 text—align首行文本缩进 text—indent设置文本的行高 line—height装饰：文本下划线（under...
版本升级后的Animate.css如何在Vue中使用【代码】
animate.css版本升级前，在vue中做过渡动画时是这么用的（vue目前的开发文档对此也还未变更，下面这个是从vue2.x开发手册搬运而来的代码）： Vue2.x开发手册中这么写的： <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"><div id="example-3"><button @click="show = !show">Toggle render</button><transitionname="custom-classes-transition"enter-active-class="animated tada...
CSS【代码】
html只是搭建初步的结构，css的作用就是美化外观，使得结构和样式分离，各司其职。CSS目录 一、CSS样式的三种方法1.行内式（内联样式）2.内部样式表（内嵌样式表）3.外部样式表（外链式） 二、CSS基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器 三、复合选择器1、后代选择器2、子元素选择器3、交集选择器4、并集选择器5、链接伪类选择器 四、font字体样式1、font-size（字体大小）2、font-family（字体样式）3、font-w...
Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等
用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541在上面搭建好项目以及知道怎样进行调试后如果要想将某些web网页内嵌进来，类似于iframe的效果。显示webview首先在html中添加webview标签<d...
将springboot项目打war包,放入tomcat运行启动后,js css png加载不出来的解决办法【代码】【图】
springboot项目如何达成war包,下面我提供一个链接,大家可以自行参考。 重要讲标题的问题。 首先只要将war文件放入webapps文件夹下，其次双击bin文件夹下的 这个文件进行启动war包. 第一次启动后，打开项目注意路径是 http://localhost:8080(tomcat配置文件 server.xml配置文件中的端口号 )/(webapps文件夹下 war包名称的.前缀) 即可启动项目。 比如我的是 我启动项目的路径就是 http://localhost:8080/lock 完事后打开项目,发现...
HTML与CSS学习 day11【代码】【图】
精灵图的使用 主要借助于背景位置来实现 background-position: x y ; 里面分别填入x轴 和y轴坐标 字体图标 主要适用场景小图标 简单的图标 字体图标的使用先打开下载的字体文件里面的 demo.html 复制字体后边的小框 字体声明 @font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?lck2wb');src: url('fonts/icomoon.eot?lck2wb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lck2wb') format('tru...
CSS笔记2021.03.20【代码】【图】
本文仿照pink老师的视频 效果图知识点 行内元素转为块元素a标签如何去掉下划线文字如何对齐鼠标滑过 hover 代码 <!DOCTYPE html> <html lang="en"> <head><title>Document</title><style>a {display: block;line-height: 40px;width: 120px;height: line-height;color: white;background-color: #55585a;text-decoration: none;text-align: center;}a:hover {background-color: #ff6700;}</style> </head> <body><a href="#">video...
如何为CSS指定对应的Media type【代码】【图】
One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device(盲人使用的设备上), etc.style sheet设置的目的，是为了描述文档如何在不同的media类型上呈现的。Certain CSS properties are only designed for certain media (e.g., the ‘page-break-before’ property only app...
CSS3 笔记
CSS3 边框圆角 背景渐变文字更灵活的字体2D 转换 transform3D 转换 transform过渡 transitionCSS动画 @keyframes多列排布用户界面图片弹性盒子 flex多媒体查询 @media边框 border-radiusbox-shadowborder-image 圆角 border-radius 背景 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张 background-imagebackground-sizebackground-origin =》content-box, padding-box,和 border-box区域内可以放置背景图像。...
Normalize.css
Normalize.css比起reset.css更加温和， Normalize.css优势： ①修复浏览的bug ②统一浏览器通用样式 ③保留浏览器的样式浏览器支持 Google Chrome (latest) Mozilla Firefox (latest) Mozilla Firefox ESR Opera (latest) Apple Safari 6+ Internet Explorer 8+ normalize.css源码 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ===============================================...
CSS初学习（3）【代码】
x# 网页的布局方式 网页的布局方式：浏览器是如何对网页中的元素进行排版的 1.标准流排版方式（文档流/普通流） 标准流排版方式就是浏览器默认的排版方式在CSS中将元素分为三类：块级元素/行内元素/行内块级元素在标准流中有两种排版：（块级元素）垂直排版，（行内元素，行内块级元素）水平排版 2.浮动流排版方式 浮动流是一种半脱离标准流的排版方式浮动流只有一种排版方式：水平排版；只能设置某个单元左对齐或者右对齐浮动流中...
CSS【代码】
[什么是CSS] Casccading Style Sheet 层叠级联样式表[我的第一个css程序] 合并 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范<style>可以编写css的代码--> <style>h1{color: red;} </style> </head> <body> <h1>我是标题</h1> </body> </html>分开, 分别写到html和css <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title>/*与css连接*/<link re...
HTML&CSS 概述【代码】
文章目录 定义执行版本及兼容性定义HTML：hypertesxt markup language 超文本标记语言 HTML是W3C定义的语言标准，用于描述页面的结构（structure）。 HTML相当于毛坯房。 CSS：cascading style sheets 层叠样式表 CSS用于描述网页的样式（presentation），相当于给房子装修。 XML: extension markup language 拓展标记语言 自然语言：下周一北京时间下午两点整到人人下载最新的权力的游戏。<任务><日期>下周一</日期><时间>北京...
CSS初识(四)：四大布局【代码】
布局（四大布局） 什么是布局？就是把一个个盒子放到合适的位置。CSS2.0中有三大布局——1、流式布局。2、浮动布局。3、层布局。CSS3.0中新增一个flex布局。第一大布局：流式布局 最简单的布局方案，也是默认布局方案。其实就是按照标准文档流进行布局。平时开发项目时，只是用流式布局往往无法完成项目。特点：1、块级标签独占一行，行内、行内块可以并排显示。 2、盒子摆放是从上到下进行摆放。第二大布局：浮动布局 初衷，为了实...
css html模板下载插件【图】
前言 经常在仿站的时候会遇到下载别人网站上的图片、css、js 等资源，如果你是一个个的手动下载是很麻烦的，也很慢的。 程序员要学会偷懒，如果这些资源能一键下载下来，并按原来的目录结构放好文件，直接打开就完美复原原来的网站，该多好啊！ 笔者找了大半天，，找了好几个插件，都不太好用，而且会打乱目录结构。 终于找到了一个比较神奇的 Chrome 插件：Save All Resources 完美的满足了我的需求！ 安装 插件 GitHub 地址：htt...
利用css的cubic-bezier函数做出动态的缓冲效果【代码】
cubic-bezier即三次贝塞尔，可以生成贝塞尔曲线，在css中主要是给transition以及animation提供过渡效果的速度曲线 cubic-bezier函数默认接受四个参数，cubic-bezier(x1,y1,x2,y2)，其中y1、y2是可以大于或小于0的，基于此可以做出一些缓冲的过渡效果<template><div class="menu"><div v-for="item in menuList"><div class="menu-item" @mouseover="mouseover($event, item)" @mouseleave="mouseleave">{{ item.name }}</div></div...
在VS Code中vue引入新版vue-awesome-swiper编译时提示swiper/dist/css/swiper.css无法导入的问题【图】
在安装vue-awesome-swiper时报错swiper/dist/css/swiper.min.css找不到，如下如：有的回答安装6.0版本的话需要引入另外一个css import swiper/swiper-bundle.css 但是，我替换完css 之后又一个问题出现了，vue-awesome-swiper组件pagination小圆点不显示，并且左右两侧的小图标也没有，也不报错。 找来找去发现是swiper的版本太高的问题导致的。 于是卸载已经安装的swiper 卸载完成之后会有如下提示： 提示需要swiper@^5.2.0的版本...
Web前端——CSS
页面美化和布局控制 概念：cascading style sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上，同时生效 优点： 1.功能强大 2.将内容展示和样式控制分离—— 解耦，分工协作更容易，提高开发效率 Css与html的结合方式 1.内联样式：在标签内使用style属性指定css代码； 如：<div style="color: aqua;">hello</div> 2.内部样式 在head标签内，定义style标签的标签体内容就是css代码 如<style> div{ color: antiq...
HTML+CSS：通过li标签制作导航条【代码】【图】
效果如下： 代码如下： 1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>导航</title>6 <style type="text/css">7 .dao{8 list-style: none;9 padding-left: 1px; 10 } 11 .dao li{ 12 float: left; 13 width: 84px; 14 margin-top: 100px; 15 background: #FFAE00; 16 text-align: left;...
css
<title>css学习</title><style type="text/css">p{color:#F00; text-align:center;}</style></head><body><h>静夜思</h2><p>李白</p><p>床前明月光</p><p>疑是地上霜</p><P>举头望明月</P><p>低头思故乡</p></body></html>
从零开始学css-postition
static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： relative 定位 相对定位元素的定位是相对其正常位置。 absolute 定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: sticky 定位 sticky 英文字面意思是粘，粘贴...
html+css笔记12【代码】
folat:left/right/none 特点： 1.脱标：脱离标准流 2.一行内显示并且元素顶部对齐 3.具有行内块元素的特点 <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>取消浮动</title></head><style>.box{background-color: pink;/* overflow:hidden; */}.box div{width: 12.5rem;height: 3.125rem;float: left;border: white 1px solid;background-color: darkred;color: white;font-size: 1.5rem;text-align: center;line-he...