一、如何让一个不定宽高的div,垂直居中？ 1、使用flex布局，只需要在盒子的父级设置如下代码即可：.className{display:flex;justify-content:center;align-items:center; } 2、使用css3transform布局: 父级盒子设置：{ position:relative;} div设置：{ transform:translate(-50%,-50%);position:ansolute;top:50%;left:50%;} 3、使用 display:table-cell 方法 父级盒...
CSS指层叠样式表(Cascading Style Sheets)，CSS 是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS 由 W3C 发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。样式 (style) 定义如何显示 HTML 元素；样式通常存储于样式表中；外部样式表存储于 CSS 文件中。CSS可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> *{margin: 0;padding: 0;} .hover {width: 500px;height: 500px;background-color: red;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;} .hover:hover, .hover:focus, .hover:active {-webkit-transition: all 0.5s linear;-moz-transition: al...
原文:CSS中伪类及伪元素用法详解伪类的分类及作用：注：该表引自W3School教程伪元素的分类及作用：接下来让博主通过一些生动的实例（之前的作业或小作品）来说明几种常用伪类的用法和效果，其他的读者可以自己尝试： :active 大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。 写法：这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后需要修改的样式。未点击时：...
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...
1.shengluohao 就是这个...加： overflow: hidden;/*超出部分隐藏*/white-space: nowrap;/*不换行*/text-overflow:ellipsis;/*超出部分文字以...显示*/2.div内容过多，一般它是自己自动换行，但是当自己输入测试数据全是英文字母时，它不会自动换行，需要加一个style="word-break: break-all" 原文：https://www.cnblogs.com/myfirstboke/p/9552940.html
一原理：其实原理很简单，就是使用background-position在一张大图中定位裁剪出我们需要的一个部分，然后用这个部分当作单个的图片使用。background-position(x,y).简单描述：以图片的左上角为原点坐标，两个参数分别为x,y轴。 原文：https://www.cnblogs.com/qianxunpu/p/8249947.html
原文地址今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG上使用CSS过渡，可能无法得到...
相关链接：http://blog.csdn.net/libertea/article/details/11662661今天在这里看到了关于一个定位的博客，感觉讲的挺好的，在这里分享一下链接。原文：http://9993849.blog.51cto.com/9983849/1939500
如今做网页为了使网站丰富多彩，富于表现力，往往需要应用大量的图片/图标。如何处理这些图片，使其尽量不影响网页载入，解析等速度，是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无比，但是需要等待较长的时间加载，那么相信很多用户会等不及而离开。尽量将图片做的小些，可能是大部分人选择的解决之道。但是100张1kb的图片加载与一张100kb的图片加载，这之间又是不同的，这涉及到网站服务器的同时连接数，网络质...
1、效果演示2、完整代码<!DOCTYPE html> <html> <head><title>Flip Button</title><style>.flip-button {/* 设置翻转按钮的大小，包括宽度（width）和高度（height） */width: 240px;height: 60px;/* 为 transform 属性设置过渡效果，作用时间为 0.8s */transition: transform 0.8s;-webkit-transition: -webkit-transform 0.8s;/* 规定在三维空间中保留嵌套元素的空间位置 */transform-style: preserve-3d;-webkit-transform-styl...
在我创建的每一个互联网应用中，我都试图避免创建完全由图片组成的菜单。在我看来，网页菜单系统中应该使用文字。这样做也会让菜单变得更干净利落、清晰和易读，不用考虑应用程序如何读取它，以及页面放大的时候也不会失真等。或许这只是我的想法？但是我们不能创建即好看又好用的菜单吗？下面是创建下面的有图标支持的导航菜单的代码和样式。基本标签 <!--navigation.html--><ul class="nav"><li class="home"><a href="#link">h...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三种导入css的方式</title><!--内部导入--><style>body {margin: 0;}</style><!--外部导入--><link rel="stylesheet" href="选择器的复习.css"></head><body><!--行内样式--><p style="color: red">这是一个有颜色的标题</p></body></html>/*注释是代码之母 这就是单行注释*//*这是一个多行注释 多行注释 123 *//*css有叫做层叠样式表 每一个css 都由 两部分组...
在线演示 本地下载原文：https://www.cnblogs.com/datiangou/p/9986695.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css样式4</title><style type="text/css">@import url("style.css");</style></head><body><p>1.什么是web标准？</p><p>2.web标准的目的？</p><p>3.采用web标准的好...