CSS
鸟飞惊了看花人
这个作者很懒,什么都没留下…
展开
-
div块水平居中,垂直居中
水平居中一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可<!DOCTYPE html><html><head> <title></title></head><style>#box{ width: 200px; height: 200px; bord...原创 2019-12-09 11:46:38 · 7450 阅读 · 0 评论 -
文字在div中水平居中,垂直居中
水平居中,给div添加css样式属性text-align: center;文字就会在div内水平居中<!DOCTYPE html><html><head> <title></title></head><style> #box{ width: 200px; height: 200px; bo...原创 2019-12-09 11:23:18 · 10586 阅读 · 0 评论 -
css清除浮动带来的负面影响
来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。 <div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>设计模式&...原创 2019-08-21 12:02:53 · 558 阅读 · 0 评论 -
Div在设置了浮动的情况下水平居中
自己布局的时候发现在设置了div为浮动后再去添加margin:auto属性是无效的;测试一首先简单布局一下,在body里面添加两个div,一个父div(div_box),一个子div (div1),div1设置浮动并且设置margin:auto代码如下:<!DOCTYPE html><head><meta http-equiv="Content-Type" ...原创 2019-08-21 11:46:33 · 1604 阅读 · 0 评论 -
简单了解css3动画与js动画
比较比较兼容性css3兼容性不好,IE10才开始支持。js兼容性好,甚至可以兼容IE6。性能css3在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(新建图层来跑动画)。移动端的开发也有这种hack,开启硬件加速,来解决可能的卡顿问题:css-webkit-transform: translate3d(0, 0, 0);js在现代浏览器中性能的差异可以忽略,但是对于...原创 2019-08-20 18:07:38 · 661 阅读 · 0 评论 -
如何查看网页图片大小
打开图片所在网页;鼠标移至空白处,右击选择检查选中下图鼠标所在位置按钮,然后鼠标移至需要查看的图片上;如图,就会有图片的宽(width)高(height)...原创 2019-08-24 09:33:35 · 1245 阅读 · 0 评论 -
如何查看网页字体大小
鼠标选中字体右击,选择检查。如图,就有文字的大小原创 2019-08-24 09:19:56 · 6516 阅读 · 0 评论 -
CSS overflow 属性
设置 overflow 属性:div { width:150px; height:150px; overflow:scroll; }定义和用法overflow 属性规定当内容溢出元素框时发生的事情。说明这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条...原创 2019-08-20 11:36:07 · 350 阅读 · 0 评论 -
css3 实现鼠标放上去图片外框不变大,里面中心放大
<div class="img-box"> <img src="img/index_11.png" class="img"> </div>css代码.img-box{ width: 390px; height: 296px; overflow: hidden; //这个一定要加上 不然就不是外框不变里面...原创 2019-08-23 18:41:05 · 1445 阅读 · 0 评论 -
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #...原创 2019-08-23 18:39:43 · 1039 阅读 · 0 评论 -
CSS样式小结
字体样式1.color:颜色2.font-size:字体大小3.font-family:字体型号4.font-style:字体样式(斜体等)5.font-weight:bold字体加粗 / bolder更粗6.text-decoration:underline下划线 / overline上划线 / none / blink字体闪烁7.text-align:水平居中8.text...原创 2019-08-03 14:09:55 · 325 阅读 · 0 评论 -
CSS3 动画效果
CSS3 @keyframes 规则要创建CSS3动画,你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。CSS3的...原创 2019-07-30 15:46:42 · 670 阅读 · 0 评论 -
CSS 单位(颜色,尺寸)
尺 寸颜色十六进制颜色所有浏览器都支持十六进制颜色值。十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。实例p{background-color:#0000ff;}...原创 2019-07-30 15:16:46 · 624 阅读 · 0 评论 -
CSS 定位(position)
CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人...原创 2019-07-30 15:07:29 · 312 阅读 · 0 评论 -
CSS 标签选择器(三)
后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:h1 em {color:red;}上面这个规则会把作为 h1 元素后代的 em 元...原创 2019-07-30 14:57:39 · 385 阅读 · 0 评论 -
CSS 标签选择器(二)
CSS ID 选择器在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。语法首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。请看下面的规则:*#intro {font-weight:bold;}与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:#intro {font-weight:bold;}这个选择器的效果将是一样的。第二个区...原创 2019-07-30 14:50:51 · 367 阅读 · 0 评论 -
CSS 标签选择器(一)
CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:html {color:black;}h1 {color:blue;}h2 {color:silver;}类型选择器在 W3C 标准中,元素选择器又称为类型选择器(typ...原创 2019-07-30 14:41:32 · 397 阅读 · 0 评论 -
CSS 浮动(float)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。元素怎样浮动元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。img{ flo...转载 2019-07-30 14:20:13 · 389 阅读 · 0 评论 -
CSS 引入方式
如何插入样式表插入样式表的方法有三种:外部样式表(External style sheet)内部样式表(Internal style sheet)内联样式(Inline style)外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:<...原创 2019-07-30 14:14:24 · 298 阅读 · 0 评论