css样式 | 易学教程

JQuery - 改变css样式

阅读更多关于 JQuery - 改变css样式

jQuery提供 css() 的方法来实现嵌入式改变元素样式， css() 方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给 css() 方法。示例如下： var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： $("#61dh a").css

W3C 代码标准规范

阅读更多关于 W3C 代码标准规范

W3C 代码标准规范 W3C通过设立领域（Domains）和标准计划（Activities）来组织W3C的标准活动，围绕每个标准计划，会设立相关的W3C工作组织（包括工作组、社区组、商务组等）。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。截至2014年7月，W3C共设立5个技术领域，开展24个标准计划。查看所有工作组列表（英文）。 w3cinteraction domain 交互技术标准领域主要关注Web与用户交互的接口和技术标准，包括(X)HTML及其他用于Web的标记语言（如CSS, MathML，SMIL，SVG，XForms等），同时提供技术途径将这些技术集成到客户端环境中。下设10个标准计划：图形（Graphics Activity） HTML（HTML Activity）国际化（Internationalization Activity）数学表示（Math Activity）富Web客户端（Rich Web Client Activity）样式（Style Activity）级联样式单（CSS） Web视频（Video in the Web Activity）媒体标记（Annotations）、媒体片段、时间序列文本（Timed Text）。 XForms（XForms Activity），电子表单

jQuery如何改变css伪元素样式

阅读更多关于 jQuery如何改变css伪元素样式

首先我们看一下css伪元素是什么： CSS 伪元素用于向某些选择器设置特殊效果。伪元素有哪些： :first-line 伪元素："first-line" 伪元素用于向文本的首行设置特殊样式。 :first-letter 伪元素："first-letter" 伪元素用于向文本的首字母设置特殊样式。 :before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。 :after 伪元素：":after" 伪元素可以在元素的内容之后插入新内容。伪元素例子： .flow_ball1:after { content: ""; position: absolute; top: 50%; margin-top: -1px; left: 100%; margin-left: 0.133333rem; width: 1.786667rem; height: 2px; background-color: #ff6600; border-radius: 0.053333rem; }在名为flow_ball1的class标签后面添加一道橘色横线（类似于流程图那种）那么，问题来了，怎么用jquery改变伪元素的样式呢？答案在这里： $('.flow_ball1').append("<style>#fafang::after{display:none}</style>");

基于HTML5和CSS的登录页面

阅读更多关于基于HTML5和CSS的登录页面

简介：初学小萌新一个，一个简单的登录页面，只用到了html和css 其中，背景图可以自行更换，在css样式下的.login background里面。顶部text文本绝对布局position: absolute;在屏幕上方。底部floor绝对布局position: absolute;在底部。中间的登录框和welcome固定游览器中部，不随滚动条改变。，只为了完成简单的登录功能，form的action默认的是百度，需要连接别的网址的小伙伴可以自行修改。利用H5的placeholder来默认提示请输入用户名和密码，输入字符就会消失。最后，如果有什么错误和问题欢迎各位大神指导。效果图展示：整体代码如下：在这里插入代码片 `<!doctype html> <html> <head> <meta charset="utf-8"> <title>login</title> <style type="text/css"> * { margin: 0; padding: 0; } .login { min-height: 960px; background: url(image/sea.jpg); } .login-tip { position: absolute; /* 相对于浏览器进行定位 */ top: 15px; text-align: center; width:

Vue-cli2.0 + webpack4.0 项目结构及内容详细分析

阅读更多关于 Vue-cli2.0 + webpack4.0 项目结构及内容详细分析

总体结构安装了node, webpack 、vue-cli 等工具之后，打开VS Code控制台 vue init webpack <Project Name>命令创建了基于vue-cli2.0的项目 1、build文件夹： 1.1、build.js 'use strict' require('./check-versions')() //调用版本检查 process.env.NODE_ENV = 'production' //将环境配置为生产环境 const ora = require('ora') //npm包 loading插件 const rm = require('rimraf') //npm包用于删除文件 const path = require('path')//npm包文件路径工具 const chalk = require('chalk')//npm包在终端输出带颜色的文字 const webpack = require('webpack')//引入webpack.js const config = require('../config')//引入配置文件 const webpackConfig = require('./webpack.prod.conf')//引入生产环境配置文件 // 在终端显示loading效果，并输出提示 const

软件测试学习笔记——web前端

阅读更多关于软件测试学习笔记——web前端

一、web前端 1. web前端三大标准： html结构标准、css样式标准、js行为标准 2. 表单表单数据必须要放在form中，form中的属性 action=“表示交给哪个后台数据处理” method=“传输数据中使用哪种方法” =get：表示不加密的传输 =post：表示加密传输 3. input标签 input标签的type类型不同则实现效果不同 type=“text”：普通文本框 =“submit”：提交按钮 =“radio”：单选框 =“checkbox”：复选框 =“button”：普通按钮 =“password”：密码框 =“reset”：恢复到默认状态 select=“select”：下拉框 textarea：文本域 4. css css:级联样式表、层叠样式表、样式表，就是给网页中的内容设置样式，css的代码要写在style标签中，而style标签要放在head标签中的最后位置（即title的下面） 5. 标签选择器：只需要写要找的标签名字即可 6. id选择器：给标签设置id属性，在css代码中使用 #id名的方式来寻找页面中的标签 7. 类选择器：给标签设置class属性—在css中设置.class 名字 8. id和class命名规则不能以数字开头、不能设成中文、不能使用特殊符号（除了-和_） ——① id命名不可重复

在css使用自定义字体

阅读更多关于在css使用自定义字体

在css文件中通过@font-face自定义字体，src 为字体文件的相对路径。 @font-face { font-family: "LED";//为字体取名字 src: url("fonts/HD_UnidreamLED.ttf") format('truetype');//字体文件 } //在样式中使用该字体 .led { font-size:50px; font-family: LED; } 注：每种格式的字体文件，format()的值可能不一样。 src: url('YourWebFontName.eot?') format('eot');src:url('YourWebFontName.woff') format('woff');src:url('YourWebFontName.ttf') format('truetype');src:url('YourWebFontName.svg') format('svg'); 如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！来源： https://www.cnblogs.com/CatcherLJ/p/11207226.html

css- @media @font-face 的理解

阅读更多关于 css- @media @font-face 的理解

在我的博客园定制的css中有2个之前没有遇到的csss属性 @font-face @media @media 在css文件中的使用如下 ` @media screen and (max-width: 1260px) { body { margin: 0 30px; } } @media screen and (max-width: 600px) { body { font-size: 13px; } } ` @media查询 @media 属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。以上的代码意思是当是屏幕而且宽度小于1260px的时候把body的margin改成xxx 当是屏幕而且宽度小于600px的时候把body的字体改成xxx @font-face规则网页设计师再也不必使用的"web-safe"的字体之一。字体的名称，font - face规则： font-family: myFirstFont;

【HTML学习笔记】link标签中的href路径

阅读更多关于【HTML学习笔记】link标签中的href路径

在index.html中引用外部css样式，需要索引css文件路径，但是css文件可能在不同目录下，需要根据具体情况写路径。【情况1】css文件在同一个目录下，直接写文件名即可 <link rel= "stylesheet" type= "text/css" href= "style.css" /> 或者这样写，文件名前缀 ./ 代表当前目录下 <link rel= "stylesheet" type= "text/css" href= "./style.css" /> 【情况2】索引的文件在上级目录中，则需要前缀 ../ 代表上一级目录 <link rel= "stylesheet" type= "text/css" href= "../style.css" /> 如果在上好几级目录中，则需要知道具体在第几级目录，打几个 ../ 其实就相当于从index开始返回到上级目录再进入到css文件所在的目录 <link rel= "stylesheet" type= "text/css" href= "../../style/style.css" /> 来源： CSDN 作者：凯文斯坦森链接： https://blog.csdn.net/m0_46349113/article/details/104594898

高度塌陷的产生条件和解决方法

阅读更多关于高度塌陷的产生条件和解决方法

高度塌陷的产生条件：父元素没有设置高度，所有的子元素都浮动父元素在文档流中高度默认是被子元素撑开的, 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷</title> 6 <style type="text/css"> 7 body{margin: 0;padding:0;} 8 .container{border: 5px solid red;} 9 .box1{width: 100px;height:100px;background: yellow;} 10 .box2{width: 200px;height:200px;background: green;} 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="box1"></div> 16 <div class="box2"></div> 17 </div> 18 </body> 19 </html> 当子元素脱离文档流以后,将无法撑起父元素的高度,也就会导致父元素的高度塌陷 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷<

订阅 css样式