随笔分类 -  HTML/CSS

CSS---让div居中的方法
摘要：第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：<div class="div1"><div clas 阅读全文
posted @ 2018-12-07 10:15 墨VS雪 阅读(17146) 评论(0) 推荐(0)
CSS浮动(三)---Float
摘要：float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。 1. 清除float 《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮 阅读全文
posted @ 2018-12-05 15:40 墨VS雪 阅读(476) 评论(0) 推荐(0)
CSS浮动(二)---Float
摘要：重新认识float 2.1. 误解和“误用” 既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。 这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使 阅读全文
posted @ 2018-12-05 15:39 墨VS雪 阅读(670) 评论(1) 推荐(0)
CSS---display详解
摘要：inline 常用的inline就是文字和图片，其实inline真没什么好说的，大家可以把它想象成一个杯子里的水，它是“流”，是没有大小和形状的，它的宽度取决于父容器的宽度。 因此，针对inline的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是auto，并不是我们设定 阅读全文
posted @ 2018-12-05 15:13 墨VS雪 阅读(10884) 评论(1) 推荐(6)
CSS层级关系--z-index
摘要：做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 阅读全文
posted @ 2018-12-05 15:02 墨VS雪 阅读(10519) 评论(0) 推荐(1)
CSS浮动(一)---Float
摘要：1.浮动模型也是一种可视化格式模型，浮动的框可以左右移动。直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。 如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,,直到有足够的扣减,如果浮动元素的 阅读全文
posted @ 2018-12-05 14:44 墨VS雪 阅读(374) 评论(0) 推荐(0)
CSS位置（一）---Position
摘要：Position： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 生成相对定位的元素，相对于其正常位置进行定位。 生成绝对定位的元素，相对于浏览器窗口进行定位。 1.relative，相对定位： （1）单模块从原点位置相对移动，从原来的位置移动对应的距离：如下，父元素从 阅读全文
posted @ 2018-12-05 11:47 墨VS雪 阅读(990) 评论(0) 推荐(0)
CSS--阴影效果
摘要：1.曲线阴影： 曲线阴影的实现原理是通过阴影的叠加效果产生的。即一个主元素设置阴影后，在主元素下面再添加一个副元素。使副元素和主元素重合，且副元素为一个弧形元素。此时主元素和副元素的阴影效果叠加产生曲线阴影。 第一步： 为主元素添加内部阴影，v和h方向的大小都设置为0，但是模糊半径设置的要较大，从而 阅读全文
posted @ 2017-06-11 15:05 墨VS雪 阅读(1962) 评论(0) 推荐(0)
CSS制作图片墙
摘要：通过CSS3的动画效果完成的一个简单的图片墙效果 效果图： 目标： 1. 用10张图片作为照片。2. 照片以不同的位置和旋转角度随意摆放。3. 鼠标移动到某一张照片上时，此照片由倾斜缓慢旋转成端正，并且放大显示在最上层。 用到的知识点： 1. box-shadow：给元素的边框添加阴影的效果 前两个 阅读全文
posted @ 2017-06-11 11:47 墨VS雪 阅读(692) 评论(0) 推荐(0)
CSS--隐藏元素的四种方法及其他方法
摘要：display：none； 元素被隐藏且不占位置。 position:absolute;left:-9999px; 元素被隐藏，且不占位。 visibility:hidden; 元素被隐藏且站位。 opacity：0； 元素被隐藏，且站位，透明度变为0； 2.backface-visibillity 阅读全文
posted @ 2017-06-08 17:45 墨VS雪 阅读(788) 评论(0) 推荐(0)
CSS--border
摘要：1、border-width不支持百分比。 2.border-style: solid实线，dashed虚线，dotted点线；double双线；inset内凹；outset外凹；groove沟槽;ridge山脊; 3.border-color:上边距颜色 右 下 左 通常设置border-colo 阅读全文
posted @ 2017-06-08 16:51 墨VS雪 阅读(318) 评论(0) 推荐(0)
CSS---transform属性的3D效果
摘要：1.3D transform中有下面这三个方法： rotateX( angle ) rotateY( angle ) rotateZ( angle ) rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴 2.perspective属性：（透视属性） perspective属性的存 阅读全文
posted @ 2017-06-05 18:01 墨VS雪 阅读(577) 评论(0) 推荐(0)
CSS的属性
摘要：1.overflow： 值: visible （元素的内容在元素框之外也可见）| hidden （元素的内容会在元素框的边界处剪裁，并且超出剪裁区域的内容不可见）| scroll（元素的内容会在元素框的边界处剪裁，但浏览器会显示滚动条以便查看其余的内容） | auto （如果内容被剪裁，则浏览器会显 阅读全文
posted @ 2017-06-05 17:12 墨VS雪 阅读(274) 评论(0) 推荐(0)
CSS3布局样式
摘要：1.多列布局--columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。 参数 参数说明 <column-width> 主要用来定义多列中 阅读全文
posted @ 2017-06-03 23:03 墨VS雪 阅读(256) 评论(0) 推荐(0)
CSS3动画
摘要：一、通过transform的一些动画效果： 1.rotate: 旋转45度。 通过设置rotate属性，添加图片动画效果： 通过设置第一张和第三张图片的偏转角度和transform-origin属性，从5度变为25度，从而实现这个动画效果 2.skew: 扭曲skew()函数能够让元素倾斜显示。它可 阅读全文
posted @ 2017-06-03 21:36 墨VS雪 阅读(300) 评论(0) 推荐(0)
CSS3边框、颜色、伪选择器
摘要：1.CSS3圆角效果： 2.边框阴影： （外部投影）(内部投影) 以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： 以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： 3.边框图片 阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为 阅读全文
posted @ 2017-06-03 19:10 墨VS雪 阅读(934) 评论(0) 推荐(0)
网页布局
摘要：1.W3C标准 网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 对应的标准也分三方面：结构化标准语言主要包括HTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。 CSS存在 阅读全文
posted @ 2017-05-30 09:39 墨VS雪 阅读(293) 评论(0) 推荐(0)
CSS
摘要：1.什么是CSS CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示： 选择符：又称选择器，指明网页中要应用样式规则的元素， 阅读全文
posted @ 2017-05-27 17:22 墨VS雪 阅读(300) 评论(0) 推荐(0)
HTML5
摘要：一，什么是HTML. 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外 阅读全文
posted @ 2017-04-25 22:07 墨VS雪 阅读(235) 评论(0) 推荐(0)