css样式 | 易学教程

CSS如何修改默认滚动条样式

阅读更多关于 CSS如何修改默认滚动条样式

代码如下：　　<divclass="inner"> 　　<divclass="innerbox"> 　　<pstyle="height:200px;">这是内容111</p> 　　<pstyle="height:400px;">这里是内容222</p> 　　<p>这里是内容333</p> 　　</div> 　　</div> 　　　　.inner{ 　　width:265px; 　　height:400px; 　　position:absolute; 　　top:33px; 　　left:13px;/*cursor:pointer;*/ 　　overflow:hidden; 　　} 　　.innerbox{ 　　overflow-x:hidden; 　　overflow-y:auto; 　　color:#000; 　　font-size:.7rem; 　　font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma; 　　height:100%; 　　}/*滚动条样式*/ 　　.innerbox::-webkit-scrollbar{/*滚动条整体样式*/ 　　width:4px;/*高宽分别对应横竖滚动条的尺寸*/ 　　height:4px; 　　} 　　.innerbox::-webkit-scrollbar

CSS 使网页变灰

阅读更多关于 CSS 使网页变灰

给html加上filter样式 grayscale() 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 html{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } 原图：变灰后：来源： https://www.cnblogs.com/dairyDeng/p/12657754.html

前端构建：Less入了个门

阅读更多关于前端构建：Less入了个门

http://www.w3cplus.com/css/less 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。最好的入门教程——官网地址：http://lesscss.org/ 最佳实践之一——Bootstrap 由于内容较多，特设目录一坨：二、搭建学习环境三、内联样式和外联样式四、语法 1. 注释 2. 变量（Variable）列表类型 3. 嵌套（Nested） 4. 父选择器引用（ParentSelector）　 5. 导入指令（Import） 6. 继承（Extend）　　 6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。　　 6.2. 父选择器不支持变量形式　　 6.3. media query影响继承的作用域　　　　 6.3.1. media query内的extend操作

AngularJS 表格(带有CSS样式)

阅读更多关于 AngularJS 表格(带有CSS样式)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <title></title> <meta charset="utf-8" /> <link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" /> <style> table td { border:solid 1px grey; border-collapse:collapse; padding:10px; } table tr:nth-child(odd) { background-color:#f1f1f1; } table tr:nth-child(even) { background-color:#ffffff; } </style> </head> <body> <div class="container"style="padding:50px">

CSS 基础（一）

阅读更多关于 CSS 基础（一）

一、初识 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。二、语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。 CSS声明总是以分号结束，声明总以大括号括起来 p {color:red;text-align:center;} 注意：为了让CSS可读性更强，可以每行只描述一个属性 p { color:red; text-align:center; } 注释 CSS注释以 "/*" 开始, 以 "*/" 结束 /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } 三、ID 和

新手学Web前端有哪些方法？该怎么去规划学习？

阅读更多关于新手学Web前端有哪些方法？该怎么去规划学习？

自学前端，首先的你得搞懂前端是什么，要学习的内容是什么，每天能抽出多少的时间去学习，能不能坚持的问题，很多同学可能就是三分钟的热情去学习，然后过几天就偷懒学不下去了，为了避免这样半途而废，大家选择学习的方式就是很重要的。还有就是重点的学习哪些技术。以下就给大家分享一下Web前端开发中需要掌握的技术： 1、学习HTML，这是很简单，基本的是要掌握div，formtable、Ulli、P、跨度、字体这些标签，这些都是常用的，尤其是DIV和表格，DIV，表也可以用于布局，但不灵活，和用于基本表处理数据。 2、学习CSS，CSS这里说的不包括CSS3 Web前端开发工程师里面我们看到的，一个可以使用HTML或CSS + CSS+DIV的界面布局，所以CSS是用来协助HTML布局和显示，我们称之为“CSS样式”，为什么说DIV+CSS?因为我说div是HTML主要用于布局的，所以div是这个东西的核心!CSS必须配合部。CSS必须掌握浮、位置、宽度和高度，以及较大值和小值，以100%，溢出，边缘、填充等。这些都是与布局相关的样式。 3、然后就是JS的学习。JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格或价值，然后以一个ID或名称元标签，或额外的数据，在HTML，这是对数据的操作有关系，那么数据逻辑的影响，无非是一个跳跃，弹框，隐藏什么，这一切都是结合其他应用

css 自定义滚动条样式

阅读更多关于 css 自定义滚动条样式

以前写的，找不到效果图了，就不上效果图了，直接上代码好啦，免得自己忘了怎么写 .login-box { //login-box就是需要修改样式的盒子 width: 200px; margin-top: 10px; height: calc(100% - 88px); overflow-y: auto; .login { display: flex; justify-content: space-between; z-index: 9999; color: #6f7180; &.backgroundhover { color: #409eff; } &:hover { color: #409eff; z-index: 9999; } } .login:hover { cursor: pointer; } .login-left { margin-top: 10px; width: 200px; } } ::-webkit-scrollbar { //以下是修改滚动条样式的代码 width: 4px; height: 4px; } ::-webkit-scrollbar-track { border-radius: 5px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { border-radius: 0;

css基本选择器

阅读更多关于 css基本选择器

CSS基本选择器（对指定的标签设置样式，要把指定的标签选择出来）：元素选择器、类选择器、id选择器、组合选择器、通用选择器 1. 元素选择器（类型选择器或标记选择器）：声明哪些元素采用css样式　 2. 类选择器（class）：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。　　　　　 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。也可以指定特定的HTML元素使用class 。　　　　　　在HTML中，一个class属性还可能包含多个属性值，各个值之间用空格分隔，表示将多类应用到同一个标记中。可以使用多次，表示类别。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*class 选择器用于描述一组元素的样式*/ /*所有的 p 元素使用 class="special" */ p.special{ color: red; } </style> </head> <body> <h1 class="special">应用类属性</h1> <p class="special"> 应用段落<

【转】Python 之Web编程

阅读更多关于【转】Python 之Web编程

转： https://www.cnblogs.com/chenyanbin/p/10454503.html 一、HTML是什么？ # 　　htyper text markup language 即超文本标记语言　　超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素　　标记语言：标记(标签)构成的语言　　静态网页：静态的资源，如xxx.html 　　动态网页：html代码是由某种开发语言根据用户请求动态生成　　html文档树结构图：二、什么是标签？ # 　　- 由一对尖括号包裹的单词构成，如<html> 所有标签中的单词不可能从数据开头　　- 标签不区分大小写<html>和<HTML>，建议使用小写　　- 标签分两部分：开始标签<a>和结束标签</a>，两个标签之间的部分，叫标签体　　- 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，如：<br/>、<hr/>、<input/>、<img/> 　　- 标签可以嵌套，但不能交叉嵌套。如:<a><b></a></b> 三、标签的属性 # 　　- 通常是以键值对形式出现的，例如 name="alex" 　　- 属性只能出现在开始标签或自闭合标签中　　- 属性名字全部小写，属性值必须使用双引号或单引号包裹，如:name="alex" 　　- 如果属性值和属性名完全一样

在css加载完毕后执行后续代码

阅读更多关于在css加载完毕后执行后续代码

最近在写项目的framework，写个JQueryMessageBox的类，以使用jquery ui中的dialog()来显示消息框，为了使方法方便调用，便加入了自动判断页面是否加入了ui.js和ui.css,代码如下： [javascript] view plain copy print ? //如果没有包含ui.js,则引用 if ($( 'script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $( ""<script src= '/js/jquery-ui-1.8.11.custom.min.js' type= 'text/javascript' /> "").appendTo( 'head'); }} //如果没有加载css,则加载 if ($( 'link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ $( '<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo( 'head'); //dialog() script }} 但CSS代码不会立即加载下来

订阅 css样式