CSS - 技术教程文章
如何用css给input的placeholder设置颜色【代码】
我在做页面的时候遇到过这种情况，在input标签中有默认字，但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致。虽然我们可以在js中写出，但是有点过于麻烦了。所以我就用css来给它设置了一下（注意css中有可能存在兼容性问题，如果实在不行还得用js。不过一般要求不严可以用这个偷偷懒）。<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#txt{height:100%;width:230px;font-size:12px;colo...
CSS绝对定位详解【图】
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。直线电机生产厂家 元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。CSS 绝对定位 ( 推荐学习：CSS教程 )绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型...
不同CSS布局实现与文字鼠标选择的可用性【图】
一、文字选择的可用性 我们平时因为A原因或B原因，需要复制web页面上的文字内容。常见的操作就是按住鼠标，选中要复制的文字区域，抬起鼠标按键，目标区域的文字就选中了。不知你知不知道，有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。这么说吧，假设你在微博上看见一个名为“屌丝逆袭”的标题，但是，由于孤陋寡闻，不知道这个标题啥意思，于是想百度之，最快的方式就是选择→复制→搜索。结果，像中了邪，这几个文字...
css3 -- 颜色与不透明度【代码】
1、opacity：opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能应用到它的指定元素上，所以子元素可以否决所有的继承Firefox Webkit Opera支持，注意IE 3、颜色变量1p {color:black;} 2p:last-child{ 3 backgorund-color:...
CSS选择器
CSS1&2选择器：包含选择符（E F）：选择E元素中所有的F元素；子选择符（E>F）：选择E元素的子元素F；相邻选择符（E+F）：选择紧贴在E元素之后F元素。E[att]：选择具有att属性的E元素。E[att="val"]：选择具有att属性且属性值等于val的E元素。E[att~="val"]：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。E:fir...
前端之CSS介绍【代码】【图】
CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS的语法CSS语法可以分为两部分： #1、选择器 #2、声明 声明由属性和值组成，多个声明之间用分号分隔，如下图CSS的四种引入方式#1、行内式 <p style="color: red;font-size: 50px;text-align: center">Egon是一个非常了不起的人</p>#2、嵌入式 <head><style>p {color: red;font-...
css水平垂直居中【代码】
margin法（水平居中）需要满足三个条件:元素定宽元素为块级元素或行内元素设置display:block元素的margin-left和margin-right都必须设置为auto<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>.box {width: 100px;height: 100px;background: orange;margin: 0 auto;}</style></head><body><div class="box"></div></body></html>定位法（水平垂直居...
jquery css（）【代码】
css() jquery 改变dom属性方法， （）内放{}对象如下代码：<div id="text"></div> <p>点击按钮换背景</p> <button class="btn">换换换 </button> 样式()#text{width: 50rem;height: 20rem; background: url(‘images/b3.jpg‘) no-repeat;}js$(document).ready(function(){$(".btn").click(function(){$("#text").css({"background":"url(‘images/3.jpeg‘) repeat"})$("#text").css({"width":"40rem","height":"40rem"...
【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器【图】
【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器广东职业技术学院 欧浩源 2017-10-211、引言 目前，除了官方文档之外，市面上及网络详细介绍BeautifulSoup使用的技术书籍和博客软文并不多，而在这仅有的资料中介绍CSS选择器的少之又少。在网络爬虫的页面解析中，CCS选择器实际上是一把效率甚高的利器。虽然资料不多，但官方文档却十分详细，然而美中不足的是需要一定的基础才能看懂，而且没有小而精的演示实例。不过，在本...
简单CSS3代码实现立方体以及3D骰子【图】
1 实现3D立方体首先准备好UL以及6个Li；代码如下ul { position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve-3d; // 使子元素保留其3D视角-webkit-perspective: 0; //视距离，默认值为0 } li { width: 200px; height: 200px; position: absolute; ...
CSS 样式 层裁剪图片
复制代码代码如下:<div style="width: 800px; height: 100px; overflow: hidden;"> <img style="margin-top:-25px;" src="http://www.bjxxd.com/school/images/hult.jpg" alt="hult" /> </div>原图: 复制代码代码如下:<div style="width: 800px; height: 100px;"> <img src="http://www.bjxxd.com/school/images/hult.jpg" alt="hult" /> </div> overflow: hidden //这个样式是说，如果图片宽，高都超过了div的高宽，超出的部分就隐...
纯css3加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="description" content="描述"> <meta name="keywords" content="关键字"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>纯css3加载动画</title> <style> .spinner { width: 100px; height: 100px; bo...
初始化css
雅虎工程师提供的CSS初始化示例代码 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address...
CSS3 边框【代码】【图】
CSS3 边框一、CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image二、CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角：这是圆角边框！ /*在div中添加圆角元素*/ div { border:2px solid; border-radi...
css3 动画最简单的例子【代码】【图】
前言最近开发中遇到的动画特效非常的频繁，加上之前开发是用到animation.js这个动画库，对动画的属性一知半解，so 今天来了解一下做个记录。CSS3动画基础属性其实也就是一张图就能概括了@keyframes的语法属性 /*animationname : 定义一个动画名称keyframes-selector：动画区间百分比 合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。css-styles：一个或多个合法的CSS样式属性*/@keyfra...
CSS3实现的渐变按钮，在IE7、IE6下的滤镜使用。【代码】【图】
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
js编辑器--css 防止元素被切【代码】
做诸葛书的时候遇到一个问题，就是我插入的元素在端上设备分页被切断，显示很丑。最后优秀的产品同学告诉我第一版用到一个神奇的属性，容器中途分割 | break-inside。.actionDom{-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid; }break-insideCSS属性定义页，列或区域断裂的行为方式产生的箱内。如果没有生成的框，则忽略该属性。参考文献：容器中途分割https://cloud.tencent.com/developer/s...
css中的position属性【图】
在css布局中，position发挥了极其重要的作用，很多的网页布局都要用position来完成。position有四个属性值static、absolute、relative、fixed。static这个属性表示默认的位置，在设置它的时候，可以取消继承属性，在一般情况下则不需要设置这个属性。absolute这个属性表示绝对定位。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置就会相对于最初的包含块。元素原先在正常文档流中所...
知识普及：彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对...
CSS布局问题【代码】【图】
原文by无悔铭居中布局 水平居中 1）使用display:inline-block+text-align:center（display问题）（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-block，对父框设置text-align:center。（2）代码实例<div class="parent"><div class="child>DEMO</div> </div>.child{display:inline-block; } .parent{text-align:center; }（3）优缺点优点...
css样式，层叠顺序属性z-index
在做项目的时候，居然单击后显示的顺序一直被别的li标签压着，最后终于找到了，是css的z-index属性赋值了，值越大，显示的层就越高详情推荐百度百科：z-indexz-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 引用方法 z-index : auto...
CSS基础范例【代码】
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style> 7 *{ 8 margin: 0;/*重置*/ 9 padding: 0;10}11 body{12 background-color: whitesmoke;/*页面背景色*/13}14 .top{15 width: 100%;16 height: 60px;17 background-color: black;18 padding-left: 100px;19}20 .bo...
css基础
CSS 是什么？ CSS是Cascading Style Sheets的简称，中文称为层叠样式表。定义如何显示HTML的元素。 CSS样式由两个组成部分：选择器和声明。声明由大括号包裹，声明又包括属性和属性值。每个声明之后用分号结束。CSS 四种引入方式：1.行内式 行内式是在标签的style属性中设定CSS样式。2.选择器 原文：https://www.cnblogs.com/liusouthern/p/8516109.html
详解css-loader配置【代码】【图】
作用css-loader用于将css文件打包到js中, 常常配合style-loader一起使用，将css文件打包并插入到页面中。如下：{test: /\.css$/,use: [{loader: ‘style-loader‘},{loader: ‘css-loader‘,options: {root: ‘/‘, //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的modules: false, //开启css-modules模式, 默认值为flaselocalIdentName: ‘[name]-[local]-[hash:base64:5]‘, //设置css...
CSS单行、多行文本溢出显示省略号【代码】
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>CSS单行、多行文本溢出显示省略号</title><style> .box{width:300px; height:400px; background:#ddd; margin:0 auto;} .box .d1{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .box .d2-1{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .box .d2-2{position:relative; heig...
学习笔记 第十一章 CSS3布局基础【代码】
第11章 CSS3布局基础【学习重点】了解CSS2盒模型。设计边框样式。设计边界样式。设计补白样式。了解CSS3盒模型。11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。11.1.1 盒模型结构Box具有如下特点：每个盒子都有：边界、边框、填充、内容4个属性。每个属性都包括4个部分：上、右、下、左。属性的四部分...
CSS 布局
前提条件：在开始前，你应该已经具备:对HTML的基础了解，在Introduction to HTML部分讨论过的。一定的CSS基础，在Introduction to CSS部分讨论过的。了解如何样式化盒子模型.提示: 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 JSBin 或 Thimble 。指南这些文章将提供在CSS中可用的基本布局工具和技术的指导。介绍 CSS 布局本文将重述一些我们在之前...
认识CSS样式【代码】
1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码： p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明2.内联式CSS样式并且css样式代码要...
CSS3--gradient【代码】【图】
gradient主要用于渐变，来实现一些特效，现在网上已经有了很多较好的文章，以我现在菜鸟的级别估计很难写的比他好，所以在这里直接上链接来自w3cplus：http://www.w3cplus.com/content/css3-gradient在这里我主要来讲一下可以用它来做什么好玩的东西（一下均在谷歌浏览器中运行）案例一：滚动条（先上图）瞧上面那个图就是用线性渐变（当然还有一个镜像渐变）做成的，那是怎么做成的呢，直接上代码（其实很简单）。<!--HTML部分-->...
html全屏背景图css写法【代码】
<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"><img style="position:fixed;" src="www.xxxx.com/images/5.jpg" height="100%" width="100%"/></div>原文：http://www.cnblogs.com/yutaoyao/p/4164415.html