CSS拾遗+技巧集合

1、实现尖角符号。

这是内联inline-block标签独有的特性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a{border-top:30px solid #000000 ;border-bottom: 30px solid #2c78d5;border-left:30px solid #1dd537 ;border-right: 30px solid #ff3021;display: inline-block;}.b{border-top:30px solid #000000 ;/*border-bottom: 30px solid #2c78d5;*/border-left:30px solid #1dd537 ;border-right: 30px solid #ff3021;display: inline-block;}.c{border: 30px solid transparent;/*transparent为透明色*/margin-top:20px ;display: inline-block;border-top:30px solid #000000 ;}.c:hover{margin-top:-10px ;border: 30px solid transparent;border-bottom:30px solid #000000;}.bb{border-top:30px solid #000000 ;/*border-bottom: 30px solid #2c78d5;*/border-left:30px solid #1dd537 ;border-right: 30px solid #ff3021;display: inline-block;}/*bb为自己想的方法，不需要改变自身的位置即可。*//*bb和b为长方形，其他为正方形*/.bb:hover{margin-top:15px ;border: 0;border-bottom: 30px solid #2c78d5;border-left:30px solid #1dd537 ;border-right: 30px solid #ff3021;}.a:hover{}</style>
</head>
<body><div class="a"></div>
<div class="b"></div><div class="bb"></div>
<div style="background-color: #ff3021;height: 70px"><div class="c"></div>
</div>
</body>
</html>

View Code

鼠标临幸前:

鼠标临幸后：

2、实现输入框最后有小图标

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .login{ 8             position: relative;
 9             /*父级标签 position为 relative时，子标签才会根据父级标签定位。否则一级一级找，找不到就根据body定位*/
10         }
11         .login input{12             width: 170px;
13             padding-right: 20px;
14             /*达到输入到R处就不增长的效果*/
15             height: 30px;
16         }
17         .ren{18             position: absolute;
19             /*根据父标签 来定位。*/
20             top: 8px;
21             left: 180px;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="login">
27     <input type="text">
28     <span class="ren">R</span>
29 </div>
30 </body>
31 </html>

View Code

输入前：

输入后：

　　文字不会超过“R”的位置，通过设置padding-right.

3、实现购物加减按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.left{float: left;}/*公用left*/.w{width: 96px;border: 1px solid #ddd;height: 22px;}.jia{text-align: center;line-height: 22px;height: 22px;width: 22px;cursor: pointer;/*鼠标放上去时，变成小手*/}.text{height: 22px;width: 50px;padding: 0;border: 0;border-left: 1px solid #ddd ;border-right: 1px solid #ddd ;}/*输入框左右2边各1px边框。*/</style>
</head>
<body>
<div class="w"><div class="jia left">+</div><input type="text" class="text left"><div class="jia left">-</div>
</div>
</body>
</html>

View Code

4、页面布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.top{height: 48px;width: 100%;background-color: #7d7d7d;}.left{position: absolute;top:48px;left: 0px;width: 180px;bottom: 0;background-color: #1dd537;}.right{position: absolute;top:48px;right: 0px;left: 183px;bottom: 0;background-color: #1c6a9e;overflow: auto;/*如果内容超过自动长度，就会生成一个滚动条*/}</style>
</head>
<body>
<div class="top"></div>
<div class="left"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div class="right"><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1> <h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1><h1>333</h1>
</div>
</body>
</html>

View Code

这里最重要的就是：overflow: auto;如果内容超过自动长度，就会生成一个滚动条.

图上这个滚动条是属于蓝色背景的，非页面的滚动条

5、实现模态对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*分为3层 1、最底层内容  2、一个遮罩层 3、对话框层*/.zhezhao{background-color: rgba(0,0,0,0.4);position: fixed;top:0;left: 0;bottom: 0;right: 0;z-index: 2;/*优先级 比较低*/}.kuang{width: 350px;height: 250px;/*5行*/position: fixed;top:50%;left: 50%;margin-left: -175px;margin-top:-125px;/*这5行  实现了真正的居中，margin的是框长宽的一半*/background-color: white;z-index: 3;/*优先级 比较高 在最上边显示*/}</style>
</head>
<body><div><h1>Mr很大的龙</h1></div>
<div class="zhezhao">
</div>
<div class="kuang"></div>
</body>
</html>

View Code

6、伪类选择器补充

伪类选择器可以对别的标签样式修改，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.touch{background-color: #1c6a9e;width: 300px;height: 300px;overflow: hidden;position: relative;/*用来给子标签提供定位参考*/}.touch .content{position: absolute;top: 0;left: 0;right: 0;bottom:0;/*占满父级标签*/background:rgba(0,0,0,0.6);/*设置透明度*/color: white;text-align: center;visibility: hidden;/*隐藏起来*/}.touch:hover .content{visibility: visible;}/*当touch被鼠标临幸时，修改content为显示*/.touch .c1{font-size: 32px;/*padding: 60px 0;*/line-height: 300px;}</style>
</head>
<body><div class="touch"><div class="img"><img src="http://pic.iqshw.com/d/file/qita/weixin/2016/07/04/74af10abec5420f74c6c172dab6969a4.jpg"></div><div class="content c1">大龙</div></div>
</body>
</html>

View Code

鼠标临幸前:

鼠标临幸后：

7、css代码保护样式不被修改（优先级）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a{color: #ff3021 !important;/*当一句css代码 后边跟!important的时候，下边的普通代码改变不了*/font-size:50px ;}.b{color: #1dd537 ;/*试图改变颜色*/}</style>
</head>
<body>
<div class="a b">Mr很大的龙</div>
</body>
</html>

View Code

按照CSS执行顺序来说，文字应该是绿色，但文字为红色，因为被后边的“!important”保护

8、用position进行定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="height: 2000px;width: 1000px">
<div style="width: 500px;height: 200px;margin: 0 auto;background-color: #2c78d5"><!--有一定的宽度在设置margin：0 auto 可以让该标签左右居中--><div style="width: 300px;height: 100px;margin: 0 auto;background-color:#Fc78d5;position: relative"><!--父级设置了relative--><div style="width: 30px;height: 30px;margin: 0 auto;background-color:#f7fc42;position:absolute;bottom: 0;left: 0"></div><!--子标签会根据最近的relative来进行定位--></div>
</div>
<div style="width: 50px;height: 50px;margin: 0 auto;background-color: #1dd537;position: fixed;top: 30px;right: 50px;"><!--fixed 用来绝对定位，根据窗口来定位，滑动滚轮，位置也不会改变-->
</div>
</body>
</html>

View Code

当滚动条在最顶端时：

当滚动条在下边时：可以看到绿色块保持的位置是不变的。这就是position的 fixed属性

转载于:https://www.cnblogs.com/shenwenlong/p/5642730.html

CSS拾遗+技巧集合相关推荐

css hack技巧_5种减少Hack的编码技巧
css hack技巧在本文中,我们将探讨五种方法,这些方法可以使用有效的编码来帮助垃圾回收器花费更少的CPU时间分配和释放内存,并减少GC开销. 较长的GC通常会导致我们的代码在回收内存时停止(也称 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
css好用吗,比较好用的 CSS 的技巧，总有一个你需要的！
原标题:比较好用的 CSS 的技巧,总有一个你需要的! 一.黑白图像当你需要让一张彩色的图片显示为黑白照片的时候,你可以用下面的一段代码. 二.使用 :not() 在菜单上应用/取消应用边框三.页 ...
转载：CSS hack技巧大全
原文地址:http://www.duitang.com/static/csshack.html part2 -- CSS hack技巧大全 --作者:吴雷君兼容范围: IE:6.0+,FireFox ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
再发些CSS常用技巧和兼容方案
基本上配合我以前所发的:Html+css小技巧收集,制作网页中经常 .. 和浏览器兼容性测试工具可以做到所向无敌. CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !importan ...
CSS书写技巧（转）
/*******************************************************************************/ 不同的浏览器,比如Int ...
html透明度_学好Web前端开发，必要了解的HTML+CSS的技巧有哪些
HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CS ...
python图标的演变_python day 22 CSS拾遗之箭头，目录，图标
lanxing 4. CSS拾遗之箭头画法 .up { border-top: 30px solid green; border-right: 30px solid transparent; bord ...

CSS拾遗+技巧集合

CSS拾遗+技巧集合相关推荐

最新文章

热门文章