<!doctype html> <html> <head> <meta charset="utf-8"> <title>浮动盒子居中</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 300px; background-color: red; } .main{ width: 100px; overflow: hidden; margin: 0 auto; } .child{ width: 100px; height: 100px; background-color: blueviolet; margin: 0 auto; float: left; } </style> </head> <body> <div class="father"> <div class="main"> <div class="child"> </div> </div> </div> </body> </html>
font-family: "microsoft yahei", "微软雅黑", "arial", sans-serif
1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装, 比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体, 那么就会变成宋体 页面中,中文我们只使用: 微软雅黑、宋体、黑体。 如果页面中,需要其他的字体,那么需要切图。 英语:arial 、 times new roman 2.为了防止用户电脑里面,没有微软雅黑这个字体。 就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面, 没有安装微软雅黑字体,那么就是宋体: font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。 3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体, 就自动的变为后面的中文字体: font-family: "times new roman","微软雅黑","宋体"; 4.所有的中文字体,都有英语别名, 我们也要知道: 微软雅黑的英语别名: font-family: "microsoft yahei"; 宋体的英语别名: font-family: "simsun"; font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "times new roman","microsoft yahei","simsun"; 5.行高可以用百分比,表示字号的百分之多少。 一般来说,都是大于100%的,因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来,比如: font:16px/48px “宋体”; 等价于 font:16px/300% “宋体”
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> body{ text-decoration: underline; } div{ width: 200px; height: 240px; /*line-height: 200px;*/ background-color:red; /*text-align: right;*/ /*两端对齐*/ /*text-align: justify;*/ /*首行缩进*/ /*text-indent: 2em;*/ /*font-size: 14px;*/ /*text-decoration: inherit;*/ /*font-weight: 800;*/ /*font-family: "microsoft yahei"*/ /*font-family: '华文行楷'*/ font: 12px/240px '华文行楷'; } a{ text-decoration: none; } a:hover{ text-decoration: line-through; } </style> </head> <body> <div> 武小猪武小猪 </div> <a href="#">百度一下</a> </body> </html>
css雪碧 即css sprite,也有人叫它css精灵,是一种css图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分 css 雪碧图应用原理: 只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢? 其实就是 截取 大图一部分显示,而这部分就是一个小图标。 使用雪碧图的好处: 1、利用css sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是css sprites最大的优点,也是其被广泛传播和应用的主要原因; 2、css sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便 不足: 1)css雪碧的最大问题是内存使用 2)拼图维护比较麻烦 3)使css的编写变得困难 4)css 雪碧调用的图片不能被打印
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 100px; width: 200px; /*background-color: rgb(0,255,255);*/ /*background-color: rgba(0,0,0,.6);*/ background: #999; } </style> </head> <body> <div></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>相对定位</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: green; position: relative; top: 20px; left: 100px; /*设置元素的堆叠顺序*/ z-index: 5; } .box3{ width: 200px; height: 200px; background-color: blue; position: relative; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: green; position: absolute; top:40px; left:0; } .box3{ width: 250px; height: 200px; background-color: blue; } </style> </head> <body style="height: 2000px;"> <!-- --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ padding: 0; margin: 0; } .father{ width: 992px; height: 460px; background-color: red; float: right; /*相对定位*/ position: relative; } .prev{ width: 50px; height: 50px; line-height: 50px; text-align: center; /*绝对位置*/ position: absolute; background-color: #000; color: #fff; top: 50%; left: 0px; } .next{ width: 50px; height: 50px; line-height: 50px; text-align: center; /*绝对位置*/ position: absolute; background-color: #000; color: #fff; top: 50%; right: 0; } </style> </head> <body> <div class="father"> <span class="next">></span> <span class="prev"><</span> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <!-- <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="content.css"> --> <!-- <link rel="stylesheet" href="main.css"> --> <style> *{ padding: 0; margin: 0; } body{ font-size: 14px; } ul{ list-style: none; } a{ text-decoration: none; } input{ border: 0; outline: 0; } .father{ width: 100%; height: 200px; background-color: red; position: relative; } .box{ width: 400px; height: 100px; background-color: green; position: absolute; /**/ left: 50%; margin-left: -200px; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> *{ padding: 0; margin: 0; } body{ padding-top: 80px; } .header{ width: 100%; height: 80px; background-color: red; /*脱离了标准文档流*/ /*参考点:是以浏览器的左上角*/ position: fixed; top:0; left: 0; z-index: 10000; } .active{ position: relative; } </style> </head> <body> <div class="header"></div> <p>alex1</p> <p>alex2</p> <p>alex3</p> <p>alex4</p> <p>alex5</p> <p>alex6</p> <p>alex7</p> <p>alex8</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p class="active">alex6666</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> </body> </html>
如对本文有疑问, 点击进行留言回复!!
深入理解CSS background-blend-mode的作用机制
网友评论