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>
鼠标临幸前:
鼠标临幸后：
2、实现输入框最后有小图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
position: relative;
/*父级标签 position为 relative时，子标签才会根据父级标签定位。否则一级一级找，找不到就根据body定位*/
}
.login input{
width: 170px;
padding-right: 20px;
/*达到输入到R处就不增长的效果*/
height: 30px;
}
.ren{
position: absolute;
/*根据父标签 来定位。*/
top: 8px;
left: 180px;
}
</style>
</head>
<body>
<div class="login">
<input type="text">
<span class="ren">R</span>
</div>
</body>
</html>
输入前：
输入后：
文字不会超过“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>
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>
这里最重要的就是：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>
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>
鼠标临幸前:
鼠标临幸后：
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>
按照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>
当滚动条在最顶端时：
当滚动条在下边时：可以看到绿色块保持的位置是不变的。这就是position的 fixed属性
CSS拾遗+技巧集合的更多相关文章
- css常用技巧集合
1 不想让按钮touch时有蓝色的边框或半透明灰色遮罩(根据系统而定) /*解决方式一*/ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-use ...
- css 实战技巧
css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...
- css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
- 2天驾驭DIV+CSS （技巧篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 教你50招提升ASP.NET性能（十三）：精选技巧集合
(19)A selection of tips 招数19: 精选技巧集合 Including height and width in <img /> tags will allow you ...
- CSS hack技巧
CSS hack技巧一览,原文来自CSDN freshlover的博客专栏<史上最全CSS Hack方式一览> 什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6- ...
- CSS编码技巧
前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
随机推荐
- CentOS6.2编译安装codelite5.3
这两天实验室要求在服务器上安装一个codelite,于是由我对服务器下手,上网看了下悲剧的发现codelite不支持在centos上直接安装,只能编译安装,经过一番折腾之后,成功的装上了,下面是我的安 ...
- 智能会议白板系统CodeMap
4个人3个月,1个项目,47个工程->白板系统 白板部分: 识别部分: 望多指教.
- 二、python 函数
1.定义函数 def max(x,y): if x>y: return x else: return y 如果定义空函数(函数还没想好怎么编写,只是为了让整个代码能够运行起来) def max( ...
- 第四次作业——WORDSEARCH小游戏
“谁想出来的这么缺德的题目啊!!!!”一个声音在我心中回荡 这个题目很早就在课堂上公布了,我和我的小伙伴都惊呆了! 这是个毛?根本无从下手的感觉 总是觉得这个小游戏不是程序能给出答案的,因为我的第一印 ...
- RTMP、RTSP、HTTP视频协议详解（转）
一.RTMP.RTSP.HTTP协议 这三个协议都属于互联网 TCP/IP 五层体系结构中应用层的协议.理论上这三种都可以用来做视频直播或点播.但通常来说,直播一般用 RTMP.RTSP.而点播用 H ...
- VMware搭建12.0搭建Mac OS10.11详细过程
1.软件准备 1.1VMware12.0 1.2VMware增强包 1.3Mac OS10.11 cdr(相当于dmg) 1.4securable.exe 2.软件破解 2.1VMware输入序列号破 ...
- 使用PUT方法上传文件无法工作原因分析
现象 在Spring Framework中,使用HTTP的PUT方法上传文件时,在服务器端发现Multipart参数为空. 原因 Spring中的StandardServletMultipartRes ...
- plsql developer导入导出数据库方法
导出步骤: 1 tools ->export user object 选择选项,导出.sql文件 2 tools ->export tables-> Oracle Export 选择 ...
- PHP之路,Day1 - PHP基础
本节内容 1.PHP介绍 2.第一个PHP脚本程序 3.PHP语言标记 4.指令分割符 5.程序注释 6.在程序中使用空白符的处理 7.变量 8.变量的类型 9.数据类型之间相互转换 ...
- 数据返回[数据库基础]——图解JOIN
废话就不多说了,开始... 一.提要 JOIN对于接触过数据库的人,这个词都不生疏,而且很多人很清楚各种JOIN,还有很多人对这个懂得也不是很透辟,此次就说说JOIN操纵. 图片是很容易被接受和懂得, ...