2017年07月_liu1992452008

原创 7：---（3）CSS3中的变形--缩放 scale()

CSS3中的变形--缩放 scale()缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况：1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）例如：div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5

2017-07-24 11:00:05 292

原创 1: ---(1)点击变色

Document #div1 { width: 100px; height: 100px; background: green; } function getColor(color) { var oDiv = document.getElementById('div1');

2017-07-19 23:37:38 170

原创点击变色

Document #div1 { width: 100px; height: 100px; background: green; } function getColor(color) { var oDiv = document.getElementById('div1');

2017-07-19 23:36:07 161

原创 5---（1）语义化标签

2.1语义化标签对于语义化标签我们并不陌生，如表示一个段落、表示一个无序列表 ~ 表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内《》容。传统的做法我们通过添加类名如class="header"、class="footer"，使HTML页面具有语义性的，但是不具有通用性（如class="header"也可能被写成cl

2017-07-19 10:16:51 179

原创 7：---（5）动画

二：动画动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。1、必要元素：a、通过@keyframes指定动画序列；b、通过百分比将动画序列分割成多个节点；c、在各节点中分别定义各属性d、通过animation将动画应用于相应元素；2、关键属性a、animation-name设置动画序列名称b、animat

2017-07-19 09:39:51 169

原创 7：----（4） CSS3中的变形--位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。translate我们分为三种情况：1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）2、translateX(x)仅水平方向移动（X轴移

2017-07-19 09:38:46 331

原创 7：----（2） CSS3中的变形--扭曲 skew()

CSS3中的变形--扭曲 skew()扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。Skew()具有三种情况： x , y的值应该是写角度1、skew(x,y)使元素在水平和垂直方向同时扭曲

2017-07-19 09:35:10 348

原创 7：---（1）2D转换（transform)-旋转

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果一：2D转换（transform）CSS3变形--旋转 rotate()旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的

2017-07-19 09:14:30 350

原创 4-14z-index从父现象.html

Document * { margin: 0; padding: 0; } .shayi { width: 200px; height: 200px; background: skyblue;

2017-07-18 23:55:47 261

原创 4-13z-index值大的压住小的

Document * { margin: 0; padding: 0; } .box1 { width: 200px; height: 200px; background: yellowgreen;

2017-07-18 23:53:21 160

原创 4-12固定定位的用途顶部导航栏

Document * { margin: 0; padding: 0; } .nav { position: fixed; top: 0; left: 0; width: 100%

2017-07-18 23:47:51 181

原创 4-11固定定位的用途返回顶部按钮

Document .backtop { position: fixed; bottom: 100px; right: 30px; width: 60px; height: 60px; background-color: gray;

2017-07-18 23:44:04 219

原创 4-10固定定位

Document p { width: 100px; height: 100px; background-color: orange; position: fixed; top: 100px; left: 100px;

2017-07-18 23:39:36 144

原创 4-9绝对定位盒子居中

Document /* 绝对定位的盒子居中：1：left：50% 2：margin-left：-宽度的一半 */ div { width: 600px; height: 60px; position: absolute; left

2017-07-18 23:35:39 156

原创 4-8绝对定位儿子无视父亲的padding

Document * { margin: 0; padding: 0; } div { width: 200px; height: 200px; border: 10px solid red;

2017-07-18 23:31:51 512

原创 4-7绝对定位的参考点的就近原则

Document /*绝对定位的盒子参考点:就近原则,任何定位都可以作为参考*/ * { margin: 0; padding: 0; } .box1 { width: 400px; heigh

2017-07-18 23:27:13 324

原创 4-6绝对定位以盒子为参考点

Document * { margin: 0; padding: 0; } div { width: 400px; height: 400px; border: 10px solid red;

2017-07-18 23:21:02 477

原创 4-5绝对定位脱标

Document /*绝对定位：脱标，可以让行内元素设置宽高*/ span { position: absolute; top: 100px; left: 100px; width: 100px; height: 100

2017-07-18 23:18:53 628

原创 4-4绝对定位

Document div { width: 200px; height: 200px; } .box1 { background: yellowgreen; } .box2 {

2017-07-18 23:15:00 124

原创 4-3相对定位的用途

Document /* 相对定位的用途：做位置的调整*/ .btn { position: relative; top: 30px; right: 180px; }

2017-07-18 23:11:16 213

原创 4：--2相对定位

Document div { width: 200px; height: 200px; } .box1 { background: yellowgreen; } .box2 {

2017-07-18 23:08:53 129

原创 4：--1margin的塌陷现象.html

***源代码 Document /* margin的塌陷现象：在标准文档流中，竖直方向的margin不会叠加，以较大的为准*/ div { width: 300px; height: 900px; border: 1px solid bla

2017-07-18 23:02:17 194

原创医药网站（2）HTML代码

返回首页 | 联系我们 | 客户登录化学试剂标准品大包装产品试验仪器耗材 CAS号 ECN号 MDL号分子式英文名称产品编号

2017-07-18 20:24:47 570

原创医药公司的html和CSS文件1

***HTML文件返回首页 | 联系我们 | 客户登录化学试剂标准品大包装产品试验仪器耗材 CAS号 ECN号 MDL号分子式英文名称产品编号

2017-07-18 20:12:12 211

原创 13:隐藏文件的两种方法

p:nth-of-type(5) { visibility:hidden;} 隐藏，原来位置会被保留p:nth-of-type(6){ display:none;} 隐藏，原来位置不会被保留

2017-07-18 19:47:09 189

原创 12：多背景设置

***相应效果***相关图片***相关代码 Document /*多背景：1：设置多张图片在同一个盒子中 2：图片不重复 3：规定图片的显示位置 */ .box { width: 300px; height: 140p

2017-07-18 18:44:01 122

原创 11：图片起始位置

***相应效果***相关图片***相关代码 Document .div1 { border: 20px solid black; padding: 60px; background: url(images/img2.jpg) no-repea

2017-07-18 17:27:54 197

原创 10：背景尺寸

***相应效果***相关图片***相关代码 Document .box1 { height: 500px; width: 800px; background: url(images/img3.jpg) no-repeat;

2017-07-18 17:22:03 259

原创 9：图片边框

***相应效果***相关图片***相关代码 Document div { border: 15px solid transparent; width: 250px; padding: 10px 20px; margin: 20

2017-07-18 17:14:25 179

原创 3：选择器-2.3伪元素选择器

1、E::first-letter文本的第一个字母或字（如中文、日文、韩文等） p { width: 200px; padding: 5px 10px; border: 1px solid#ddd; font: 14px/1.5simsun; } p::firs

2017-07-18 16:30:05 173

原创 8：渐变(背景-属性)-1.1.4 径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是ellipse（表示椭圆形），渐变的大小是farthest-corner（表示

2017-07-18 15:22:20 372

原创 7：渐变(背景-属性)-1.1.3 线性渐变

7：渐变(背景-属性)渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。1.1.1 线性渐变linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。1、必要的元素：a、方向b、起始色c、终止色 2、关于方向设置渐变方向，

2017-07-18 14:59:57 387

原创 6：边框-1.1.2边框阴影

1.1.1 边框阴影box-shadow与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];如box-shadow: 5px 5px 5px #CCC1、水平偏移量正值向右负值向左；2、垂直偏移量正值向下负值向上；3、模糊度是不能

2017-07-18 14:41:56 194

原创 3：颜色

颜色的表达方式 red、rgb(,,) 、#ffff00 新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。Red、Green、Blue、Alpha即RGBAR、G、B 取值范围0~255,A为透明度参数，取值在0~1之间，不可为负值。 Hue、Saturation、Lightnes

2017-07-18 14:07:12 166

原创 5：边框-1.1.1 边框圆角

其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，我们需要重点掌握。1.1.1 边框圆角border-radius圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。支持简写模式，具体如下：1、bord

2017-07-18 14:01:46 267

原创 4：文本：

Font line-height text-indent（首行缩进） text-align：center text-decoration text-indent：50px; 可以为负值。1：text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须

2017-07-18 13:57:56 173

原创 2：选择器-2.1属性选择器

其特点是通过属性来选择元素，具体有以下5种形式：选择器示例含义E[attr] 存在attr属性即可E[attr=val] 属性值完全等于valE[attr*=val]

2017-07-18 13:04:13 300

原创 1.CSS3简介

1.CSS3简介CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。文本，背景，动画，2d 3d转换伸缩布局，多列布局在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS

2017-07-18 12:57:12 299

空空如也

空空如也