摘要： 网页做三角形图片，你还在拿ps调整吗？out了，老铁，来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成，然后我想保留上边的三角形，那下边、左边、右边的三角形就没了（设置背景色transparent或者与背景相近的颜色），最终结果就是一个保留上边，方向朝下的三角形，需要注意一点的是设置的css样式中width=0，如果不是就不能构成正方形，而是一个梯形；此外还可以通HTML实体里的三角形符号，朝上▲朝下▼朝左◄朝右►，最后通过font的大小颜色控制三角形！ 阅读全文

摘要： 边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成;边框方位分为border-top,bottom,left,right 边框属性样式整理：border-style:none;/*无边框*/border-style:hidden;/*隐藏边框*/border-style:dotted;/*点状虚线*/border-style:dashed;/*块状虚线*/border-style:solid;/*实线*/border-style:double;/*双线*/（至于border-style:groove;border-style:ridge;border-style:inset;border-style:outset;效果用到较少，通常solid,dashed,none） 阅读全文

摘要： 是谁在耳边对我说！important提升权重优先级，只为这一句，我用了3600s研究通配符与标签!important的背景展示，也是让我怀疑人生了！选择器权值:标签选择器1,类选择器和伪类选择器:10,ID选择器:100,通配符选择器:0,行内样式:1000,!important 在一定条件下，优先级最高。根据百度官方介绍body是用在网页中的一种HTML标签，那就说明它是个标签呀，然而通配符选择器(曾怀疑*不是，不过通配符选择器介绍)和标签body同时定义页面背景色，展示的却是通配符定义的，咋办？曰：/*如果非在通配符定义背景的前提下，让body背景颜色正常展示，加高*/，除了body外，其他标签正常展示，适用于这个css选择器优先级！ 阅读全文

摘要： background如何简写？如何在背景图像不变的情况下，依旧实现页面文字滚动，为之奈何？别担心，快用background-attachment: fixed;/*固定定位*/常用的background样式如下，1.background-color2.background-image3.background-repeat4.background-attachment5.background-position，废话不多扯，直接代码页面展示： 阅读全文

摘要： 常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/ 字体:1.font-family/*字体类型*/2.font-size/*字体大小*/3.font-style/*字体样式*/4.font-weight/*字体粗细*/ 阅读全文

摘要： 常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素，层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b，伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色，属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。 阅读全文

摘要： 通过学习CSS3游戏介绍、CSS样式和优先级章节，了解到html5+css3+js不光可以实现动画，其次可以往这个游戏与建模方向发展，更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种：内联、内部、外部、写法上推荐的是外部，便于代码复用性；样式表的写法是选择器{设置样式}；css中常见的注释为/**/；css的优先级：内联style>id选择器>class选择器>标签；在css中，文本默认字体大小16px，长度单位分为px像素与em倍数；除此之外，颜色写法形式如下：#ffff16进制、yellow英文单词、rgb(216, 17, 173)其中当#ff0000可以简写为#f00,闲话不多扯，直接代码展示： 阅读全文

摘要： 常见的CSS3选择器包含：常用基本、属性、伪类、层级（组合）选择器，具体使用情况建议先阅读css选择器四大类：基本、组合、属性、伪类对于选择器的使用有一个基本了解，选择器的作用在于通过它找到元素，并且给它添加属性样式。 常用的选择器有：标签、id、类、关联（通过父集找到子集）组合选择器，注意html页面中id是唯一的；基本选择器有（/*代表注释*/），/*:first-child第一个元素*/，/*:last-child最后一个元素*/，/*:nth-child(n)第几个元素*/，/*::first-line 第一行*/，/*::first-letter 第一个单词/字符*/，然后层级选择器有a b后代，a>b子元素，a+b后面的元素（相邻选择器），其次伪类选择器有:hover，:focus焦点，::selection更改鼠标选择文本背景色，最后属性选择器（属性选择器的目的在于可以直接把标签身上的一种属性拿来用）有基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束。 阅读全文

摘要： css3和css有什么区别？首先css33是css（层叠样式表）技术的升级版本，而css是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。然后是内容上css3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。而css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。最后在特点上css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 阅读全文

摘要： 阿基米德说“给我一个支点,我能翘起整个地球”，在HTML页面中，给你一个坐标，可以把任何一个元素定位目标点，这就是定位！CSS有三种基本的定位机制：相对定位、绝对定位、固定定位，决定定位的position属性的值有static默认标准流，当然这个就不用多说了；fixed固定定位，releative相对定位，absoulte绝对定位，结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减，坐标起点是原来所在位置;3.absolute绝对定位找最近的position属性，没有的话，就找父集进行定位。 阅读全文

摘要： 布局是什么？根据功能划分小块，再根据设计稿还原，书写静态页面，然后再在块里面填充内容，完善功能，js施加交互效果。div作为一个容器，独占一行，代码书写习惯从上至下属于标准流，而浮动float的css样式则打破div（标准流）独占一行的传统！具体代码展示如下： 阅读全文

摘要： 盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容区域的宽度+2（内边距+外边距+边框），也就是该示例中的元素宽度为170px，需要注意的是在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。（浏览器查看的时候记得打开控制台F12，点击对应的元素查看） 阅读全文

摘要： 在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有（/*内容注释部分*/）list-style-type:circle;/*空心圆*/list-style:none;/*去除标志*/list-style:square;/*方块*/list-style:upper-roman;/*罗马数字*/list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/list-style-type: decimal;/*序号数字展示*/等！ 阅读全文

摘要： 常见的color, font-family, background 等css属性都能够设置链接的样式，a链接的特殊性在于能够根据它们所处的状态来设置它们的样式。a标签与人交互的4个状态属于伪类状态切换，常见的链接四种状态为：a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻，具体看下面的代码展示： 阅读全文

摘要： CSS文本属性可定义文本的外观，这是毫无疑问的，其次css可以通过以下属性改变文字的排版，比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距，direction改变文本从左至右的阅读顺序，white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐，至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐，尽在下面代码详情中一一介绍。 阅读全文