css3
文章平均质量分 63
css3样式总结以及开发技巧总结
H_Cisco
路在脚下,只要走起来离目标会近一点。
展开
-
CSS3——对其规则
对其规则:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; pad原创 2018-11-24 15:51:19 · 6844 阅读 · 0 评论 -
CSS3——span问题
Span问题:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; p原创 2018-11-24 15:49:17 · 7302 阅读 · 0 评论 -
CSS3——去掉图片之间的空格
元素一共就有三种:inline,inline-bolck,block,其中inline,inline-bolck都带有inline,凡是带有inline的元素都是文本类元素。文本有什么特点呢?比如现在有一堆文字,中间用很多个空格隔开,在浏览器中你会发现文字之间只有一个空格,因为空格表示的是文字分隔符,所以中间会有一个小的空隙。文本类元素也符合这个概念,比如<span>123&l...原创 2018-11-24 15:48:10 · 8931 阅读 · 0 评论 -
CSS3——淘宝留白
做一个淘宝的留白:当你在缩小浏览器页面的时候他的内容区并没有缩小,是留白的变小。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css&quo原创 2018-11-24 15:46:49 · 7201 阅读 · 0 评论 -
CSS3——元素嵌套规则
元素嵌套规则:行级元素只能嵌套行级元素,块级元素可以嵌套任何元素。Div里面可以加任何东西,但是span就只能加行级元素,行级元素嵌套行级元素很正常,行级元素本来空间就小,不可能嵌套块级元素,但是有个特殊的,p标签是块级元素,p标签里面套个div是不是无可厚非,就不行,这就是规定,P标签里面就是不能嵌套块级元素,咱写一写试试。<!DOCTYPE html><...原创 2018-11-24 12:45:25 · 8105 阅读 · 0 评论 -
CSS3——在网速不好的情况下,如何让一个网站还可以用
第一种方法:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } a{ display: inline-block原创 2018-11-23 17:24:26 · 6975 阅读 · 0 评论 -
CSS3——给div设置背景图片
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 200px; height: 2原创 2018-11-19 17:43:53 · 29675 阅读 · 0 评论 -
CSS3——溢出容器,打点展示
溢出容器,打点展示:1.但行文本2.多行文本 单行文本:三件套 white-space: nowrap;/* 强制不换行 */ overflow: hidden;/* 超过的部分隐藏 */ text-overflow: ellipsis;/* 打点展示 */<!DOCTYPE html><...原创 2018-11-19 17:43:01 · 7659 阅读 · 0 评论 -
CSS3——解决父级元素包裹子级元素的方法(伪元素+其他)
利用伪元素清除浮动:你要解决浮动的为题必须在父级的逻辑的后面加上一个p元素来清除浮动吧,你加完p元素之后破坏结构了,不好,咱相加,又不能加,就用伪元素最合适了吧!<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"&原创 2018-11-18 10:49:23 · 12314 阅读 · 2 评论 -
CSS3——伪元素
伪元素天生存在于任意元素里面,任意元素里面有两个特殊的伪元素,一个叫before一个叫after。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; paddi原创 2018-11-18 10:17:12 · 7561 阅读 · 0 评论 -
CSS3——浮动模型
咱们一共有三大模型,盒模型,层模型,浮动模型。浮动模型最恶心,就一条float:left/right;,你别看这一条,他能引发很多问题。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{原创 2018-11-18 09:53:36 · 7246 阅读 · 0 评论 -
CSS3——margin合并,塌陷与合并的总结
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .demo1{ background-color: red;原创 2018-11-17 10:37:21 · 7790 阅读 · 0 评论 -
CSS3——垂直定位的小bug(margin塌陷)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; width: 0; } .demo1{ /* margin-left: 100px;原创 2018-11-16 16:19:04 · 8607 阅读 · 0 评论 -
CSS3——两栏布局
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; width: 0; } .demo1{ height: 100px; width:原创 2018-11-16 16:11:58 · 8635 阅读 · 0 评论 -
CSS3——五元环
练习2:写出一个五元环,让这个五环在屏幕的正中间,永远居中。提示:.demo1{ height: 100px; width: 100px; border: 10px solid black; border-radius:/* 50%;设置四个角都是50%的圆角,他就会形成一个园 */ z-index: 1;/* 默认为0,值越大,他就越...原创 2018-11-15 14:01:54 · 8703 阅读 · 0 评论 -
CSS3网页定位技术(3)——fixed浮动定位
三:Position还有第三个值:fixedFixed和absolute差不多,有一点小的不同。你会发现一些广告的页面,无论你怎样滚动滑轮,广告是不东的。 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"&a原创 2018-11-15 13:29:34 · 9479 阅读 · 0 评论 -
CSS3网页定位技术(2)——相对定位
二:position: relative;——相对定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .demo{原创 2018-11-15 13:27:16 · 8494 阅读 · 0 评论 -
CSS3的网页定位技术(1)——绝对定位
一:position: absolute;——绝对定位div{ height: 100px; width: 100px; background-color: red; position: absolute; } ...原创 2018-11-15 13:21:02 · 9626 阅读 · 2 评论 -
远视图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> .demo6{ height: 10px; width: 10px; background-color: #fff; }原创 2018-11-15 13:18:11 · 10466 阅读 · 0 评论 -
CSS初始化标签
自定义标签-标签选择器比如你在百度搜索的时候,你搜索的关键词会变红,他就是用em写的。 所以用这样的方式咱们可以初始化很多标签。 还比如ul和li出生的时候有大圆点,咱么可以通过ul{list-style:none;}把它去掉,他天生还带与padding和margin,你如果把他的padding和margin值都设成0,他的间距和空格就会全部没有了。这就叫做初始...原创 2018-11-13 21:19:10 · 9113 阅读 · 0 评论 -
css-企业团队开发技巧
在实际开发中,我们大多采用先定义功能再选配功能,而不是先写内容再写功能。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> .demo1{ height: 100px; width: 10原创 2018-11-12 11:23:38 · 8523 阅读 · 0 评论 -
css-淘宝网站——实现几张图片横排中间没有空隙
淘宝网站——实现几张图片横排中间没有空隙凡是带有inline的元素都有文字特性,有文字属性就该被分割。 1.<img src="1.jpg"> <img src="1.jpg"> <img src="1.jpg"> <img src="1.jpg">把img之间的原创 2018-11-12 11:21:52 · 9469 阅读 · 4 评论 -
css小技巧-元素分类、字体的样式、画三角形、光标样式
行级元素(span,strong,em,a,del)-内联元素Feature:内容决定元素所占位置 不可以通过css改变宽高display:inline;2.块级元素(div,p,ul,li,ol,form,address)-块元素Feature:独占一行 可以通过css改变宽高display:block;3.行级块元素 Featu...原创 2018-11-12 11:20:00 · 8600 阅读 · 0 评论 -
css权重
!important>行间样式>id>class或属性或伪类>标签选择器>通配符 infinity 1000 100 10 1 0 256进制父子选择器/派生选择器 <!DOCTYPE html><html> <head> ...原创 2018-11-10 21:28:59 · 4995 阅读 · 0 评论