CSS - 技术教程文章

CSS样式-如何消除img下的空白【图】

默认情况下,图片是以基线对齐的,也就是下方会留有一条白色的边<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style type="text/css"> div { border: 2px solid #000; } </style></head><body> <div> <img src="images/video.jpg" />yg </div></body></html> 修改方式一:<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style ty...

浅谈 css3 box盒子模型以及box-flex的使用【代码】

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 一、使用以及介绍:1、要实现水平或者垂直切分,必须先满足以下要求 i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性 ii. .panel的元素定义box-flex,来实现按比例切分。如下图:就是将三个div水...

html和css命名标准以及常用的框架【图】

前端的工作很细,涉及的东西也很多,静态页面和js开发,调接口之类,有时还要自己设计。现在css管理使用less和sass,新东西起码要支持下,具体用与不用看公司的业务需求。前端人员之间的配合也很重要要有统一的文档,命名和一些规范。现在介绍一下网易的NEC,我觉得很不错。起码在命名和一些规范,动画效果上可以快速开发,代码写的快是王道我喜欢这句话。原文:http://www.cnblogs.com/heboliufengjie/p/4149600.html

python+selenium自动化测试——CSS选择元素(二)

id、class都是web元素的属性,因为他们是很常用的属性,所以css选择器专门提供了根据id、class选择的语法。那么其他的属性呢?比如:<a href="https://www.baidu.com"> 百度</a> 根据href选择,也可以使用css选择器 css选择器支持通过任何属性来选择元素,语法是用一个方括号[ ]比如:要选择上面的 a元素,可以使用 [ href = "https://www.baidu.com" ] 即选择属性href值为 https://www.baidu.com 的元素当然,前面可以加上css表达...

认识CSS中精灵技术(sprite)和滑动门【代码】【图】

前端之HTML,CSS(十)  精灵技术与精灵图  精灵技术本质  精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时,每一个图片显示都是浏览器向服务器发送一次请求的结果,精灵技术是把多个小图片拼接为一个大图,有效减少了浏览器请求服务器的次数,与此同时也提高了页面的加载速度。  精灵技术使用  精灵技术实际是通过background属性限定...

CSS实现div居中【代码】【图】

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<title>CSS实现div居中</title> 6<style> 7/*外层div居中*/ 8 #main { 9 position: absolute;/*极为重要*/10 background-color: blue;11 width:400px;12 height:200px;13 left:50%;14 top:50%;15 margin-left:-200px;16 margin-top:-100px;17 border:1px solid #00F;18}1920 #content {21 ...

css系列---【如何让文字水平垂直居中?】【代码】

1.如何让文字水平垂直居中?<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>css练习</title><style>a {/* 行内元素转行内块级元素,因为行内元素无法改变宽高,若想改变,必须先转成行内块级元素 */display: inline-block;width: 70px;/* 行高等于高度,文字才会垂直居中 */height: 30px;line-height: 30px;background-color: aqua;/*...

CSS的三种使用方式以及常用的选择器

一、CSS的三种使用方式:1. 内联样式 * 在标签内使用style属性指定css代码 * 如:<div style="color:red;">hello css</div>2. 内部样式 * 在head标签内,定义style标签,style标签的标签体内容就是css代码 * 如: <style> div{ color:blue; } </style> <div...

2014年辛星解读css第一节【代码】

CSS是Cascading Style Sheets的缩写。即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制。 *************时代的呼唤*************1.在之前,我们直接把网页的格式写到HTML中去,这样会造成格式的混乱,并且难以阅读和改动,只是这不是最大的问题,最大的问题在于我们想给网页换一个表达样式的时候,须要改动的地方不仅非常多关键是非常零散,须要花费非常大的力气去定位这些...

转发-css(动画,过渡,转换)【代码】【图】

此文章仅为转发,非原创,原文http://www.cnblogs.com/zhuanggege/p/5754543.html请支持原创 css3动画@keyframes规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性以百分比来规定改变发生的时间,或者通过关键词"from"和"to",等价于0%和100%语法:@keyframes animationname {keyframes-selector {css-styles;}}animation是一个简写属性,用于设置六个动画属性:animation-name规定@keyframes动画的名称anim...

css实现垂直居中的各种方法【代码】

1、行内元素居中 line-height(须知高度).box{height:300px; } p{line-height:300px; } 2、table居中 display:table-cell;vertical-align:middle;.box{display:table; } p{display: table-cell;vertical-align: middle; } 3、绝对定位,top+margin-top:-xxpx(须知高度).box{position:relative; } p{position:absolute;top:50%;margin-top:-50px; width:100px;height:100px; }4、绝对定位 top+tranform.box{p...

用到的css样式(持续更新中)

1 height:auto;min-height:100%;使得最小高度为屏幕高度。2 -webkit-tap-highlight-color:rgba(0,0,0,0);避免移动端点击事件出现背景框3 text-decoration:underline/overline/line-through; 定义文本上的下划线/上划线/中划线原文:http://www.cnblogs.com/yunrundetizi/p/5176943.html

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦【图】

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的一切用法,在此总结一下,以供需要的朋友们,总共30个例子1.长方形#Rectangle{width: 200px;height: 50px;background-color: red;color: white;text-align: center;}2.正方形#square{width: 200px;height: 200px;backgrou...

css左右摇摆动画

@-webkit-keyframes swing {20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }20% { -webkit-transform: rotate(15deg);}40%{-webkit-transform: rotate(-10deg);}60%{-webkit-transform: rotate(5deg);}80%{-webkit-transform: rotate(-5deg);}100%{-webkit-transform: rotate(0deg);}} @-moz-keyframes swing {20% { -moz-transform: rotate(15deg); }40% { -moz-transform: rotate(-10deg); }60% { -moz-tra...

css美化checkbox radio样式【代码】

/*check,radio*/ input.check_txt[type=‘checkbox‘]{display: none; }input.check_txt[type=‘checkbox‘] + label{display: block;float: left;-moz-appearance: none;-webkit-appearance: none;width: 20px;height: 20px;background: #fff;border:2px solid #cecece;border-radius: 3px; cursor:pointer; }input.check_txt[type=‘checkbox‘]:checked + label {background: #f0f0f0 url(../images/check.png) no-repeat cent...

css基础总结

css作用:控制网页的样式 css语法:选择符{属性1:属性值;属性2:属性值;属性3:属性值1 属性值2 属性值3;} css实例: div{ width:300px; height:400px; background:red; } css语法解释: 1、选择符:对标签进行获取 2、所有声明都放在大括号里面,声明和声明之间用分号(“;”)连接 3、声明包括属性及属性值,属性和属性值之间用冒号连接 4、如果一个属性拥有多个属性值,属性值之间用空格隔开 例:border(边框):10px(像...

CSS(之四)

CSS的核心:浮动、盒子模型、定位DIV作为块级元素,每个DIV占据一行。 块元素特点:1.默认显示在父标签的左上角;2.会计元素默认占满一行(占满整个文档流) 常见的块级元素:p、h1-h6、ul li、ol li、div、table、hr等 相对应的是行内元素(内联元素):a、span、img、input等 行内元素特点:1.大小受到文字区域影响,不受height、width影响;2.不会单独占据一行。 span标签的应用:不会单独占满一行,不会受到其他块级...

CSS中的未定义行为,浏览器的差异(一)【代码】

今天看了张鑫旭大佬的新书的有感吧,记录一下。Web标准未对一些场景做出明确规范,所以各大浏览器厂家只能根据自己的理解和喜好去实现,表现差异不是浏览器的bug,用计算机领域的术语描述为"未定义行为"。比如一个例子: CSS中的一个伪类,最常用的一个伪类:active,鼠标按下,执行改伪类对应的CSS样式,鼠标抬起还原。但是这种情况呢:<!DOCTYPE html> <html> <head><meta charset="utf-8" /><style>.active-btn {display: inline...

标准的CSS盒子模型?与低版本IE的盒子模型有什么不同的?【图】

CSS盒子模型:由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不一样  标准的css盒子模型宽高就是内容区宽高;  低端IE css盒子模型宽高 内边距﹢边界﹢内容区;原文:http://www.cnblogs.com/love-sea520/p/5903442.html

高效整洁CSS代码原则【转载】

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:  1. 使用Reset但并非全局Reset  不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:鞍山治疗牛皮癣的医院www.0412n.com  *{ margin:0; padding:0; }  这不仅仅因为...

CSS的命名规则

(壹)常用的CSS命名规则头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title...

HTML&CSS

主要内容:1. HTML标签:表单标签2. CSSHTML标签:表单标签* 表单:   * 概念:用于采集用户输入的数据的。用于和服务器进行交互。   * form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围     * 属性:       * action:指定提交数据的URL       * method:指定提交方式         * 分类:一共7种,2种比较常用   ...

CSS——优先级【代码】

样式优先级:默认样式<标签选择器<类选择器<id选择器<行内样式<!important <!DOCTYPE html> <html> <head><meta charset="utf-8" /><title></title><style>#main {font-size: 80px;color: blue;}.box {font-size: 40px !important;color: yellow;}div{font-size:20px;color:red;} </style> </head> <body><div class="box" id="main" style="font-size:120px;color:gray">哈哈</div> </body> </html>注释:上述代码为了屏蔽样...

readonly背景色(css)

input{ background-color:expression(this.readOnly==true?"#EEEEEE":"#FFFFFF"); } input[readonly]{ background-color:#EEEEEE; }原文:http://www.cnblogs.com/superJF/p/4398770.html

css字体图标的使用方法【代码】

提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~css sprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图片失真,也不容易维护;而当我们运用字体图标来做这个事的时候,好处就多多了(但是字体图标就是颜色单一,一般可忽略)1.首先从https://icomoon.io/ 国外的字体图标库 非常好 下载免费的图标库(...

css实现水平垂直居中的几种方式【代码】

梳理下平时常用css水平垂直居中方式~使用flex布局HTML<div class="box"><div class="child"></div> </div> CSS.box {width: 100vw;height: 500px;background: skyblue;display: flex;align-items: center;justify-content: center; }.child {width: 200px;height: 200px;background-color: deepskyblue; } 利用flex的alignItems:center垂直居中,justifycontent:center水平居中利用相对定位和绝对定位的margin:autoHTML<div class...

CSS滚动条设置【代码】

1/*IE滚动条颜色设置*/ 2body {3 scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ 4 scrollbar-track-color:#1589ce; /*底层背景色*/ 5 scrollbar-face-color:#27aeff; /*滚动条前景色*/ 6 scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/ 7 }8/*chrome滚动条颜色设置*/ 9body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...

CSS实现的几款不错的菜单栏【图】

前言 自从做了智慧城市这个项目之后,我一个做后端的开发者,瞬间转为前端开发,不过我还是很喜欢前端的。前端那些事,其实蛮有意思的,HTML实现的是静态的,使用ajax之后就可以和数据库交互了,加上js和jQuery之后就动起来了,加上CSS之后就更加炫酷了。因为项目中需要,查资料和编写了一些炫酷的二级菜单,分享给大家,好东西就要分享嘛!一、滑动菜单1、代码: View Code2、效果 二、左侧带图标多级下拉菜单1、HTML代码: V...

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b...

CSS,网页样式【代码】【图】

认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。如下列代码:p{font-size:12px;color:red;font-weight:bold; }使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 CSS样式的优势为什么使用css样式来设置网页的外观样式呢?右边编辑器是一段文字,我们想把“超酷的互联网”、“服务...