css 拾遗
1， 实现尖角
<style>
.up{
border-top: 30px solid red;
border-right:30px solid gold;
border-bottom:30px solid teal;
border-left:30px solid royalblue;
display: inline-block;
}
</style> <div class="up"></div>
实现1
效果图：
<style>
.down{
border-top: 30px solid teal;
border-right: 30px solid #e20052;
/*border-bottom: 30px solid transparent;*/
border-left: 30px solid rosybrown;
display:inline-block;
} </style>
<div class="down"></div>
实现2
效果图：
内联 inline-block 是它独有的特性
.c1{
border: 30px solid transparent;
border-top: 30px solid royalblue;
display: inline-block;
margin-top:40px;
}
.c1:hover{
border: 30px solid transparent;
border-bottom: 30px solid royalblue;
margin-top: 0px;
} <div style=" height:100px;background-color: rosybrown">
<div class="c1"></div>
</div>
动态实例
鼠标临幸前 
鼠标临幸后 
将鼠标指在该位置会出现动态效果
<style>
.cc{
border-top:10px solid red;
border-right: 10px solid bisque;
border-left:10px solid cadetblue;
display: inline-block;
}
.cc:hover{
border:0;
border-right: 10px solid salmon;
border-bottom: 10px solid red;
border-left: 10px solid slateblue;
}
</style>
<body>
<div class="cc"></div> </body>
动态实例2
效果图： 鼠标临幸前 
鼠标临幸后
2，伪类 hover：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ele{
background-color: #ff0033;
border: 2px solid white;
}
.ele:hover{
border: 2px solid black;
}
.ele:hover .ele-item{
color: rosybrown;
}
</style>
</head>
<body>
<div class="ele">
<div>123</div>
<div class ="ele-item">123</div>
</div> </body>
</html>
hover 1
效果图: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.touch{
width:405px;
height: 266px;
overflow: hidden;
position: relative;
}
.touch .content{
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
/*background-color: #030911;*/
/*opacity: 0.6;*/ 透明度
background: rgba(0,0,0,0.6); 颜色 加透明
color: white;
text-align: center;
visibility: hidden; 隐藏
}
.touch:hover .content{
visibility: visible; 可见
}
.touch.content .c1{
font-size: 32px;
padding: 30px 0;
}
</style>
</head>
<body> <div class="touch">
<div><img src="27.jpg"></div>
<div class="content">
<div class="c1">价格 RMB </div>
<div class="c2">500--1000(人民币)</div>
</div>
</div> </body>
</html>
hover 2
效果图 鼠标临幸前 
鼠标临幸后 
3.position 定位 ：
position：relative 相对的位置
position：absolute 根据最近的 relative 进行定位
position ：fixed 进行绝对定位， 根据窗口来定位，滑动滚轮，位置也不会改变
<body>
<div style="height:1000px;background-color: rebeccapurple">
<div style="position: relative;background-color:white;width: 500px;height: 150px;margin: 0 auto">
<div style="position: absolute;left:0;bottom:0;width: 40px;height: 40px;background-color:palevioletred">
</div>
</div>
</div>
<div style="position:fixed;right:10px;bottom: 10px;width: 40px;height: 40px;background-color: violet"></div>
</body>
</html>
效果图： 滚轮在顶端时 
滚轮在下面时 
4. 加减按钮：
cursor: pointer; 鼠标指针 为小手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.left{
float: left;
}
.wrap{
height: 22px;
width: 150px;
border: 1px solid #ddd;
}
.wrap .minus{
height: 22px;
width: 22px;
line-height: 22px;
cursor: pointer;
text-align: center;
}
.wrap .plus{
height: 22px;
width: 22px;
line-height: 22px;
cursor: pointer;
text-align: center;
}
.wrap .count input{
padding: 0;
border: 0;
width:104px;
height: 22px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="wrap">
<div class="minus left" onclick="Minus();">-</div>
<div class="count left">
<input id="count" type="text" value="1" /></div>
<div class="plus left" onclick="Plus();">+</div>
</div>
</body>
</html>
5。 输入框尾端的图标：
padding-right:30px;*达到输入到该位置处就不增长的效果*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.user{
position: relative;
width: 250px;
}
.user input{
height: 30px;
width: 170px;
padding-right:30px;
}
.user .ren{
position: absolute;
top:8px;
left:180px
}
</style>
</head>
<body>
<div class="user">
<input type="text">
<span class="ren">R</span>
</div>
</body>
</html>
输入前 
输入后：
5.后台布局：
overflow: auto;如果内容超过自动长度，就会生成一个滚动条.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.pg-header{
height: 50px;
background: rebeccapurple;
}
.pg-body .body-menu{
position: absolute;
width: 180px;
background-color: #666666;
left: 0;
top: 50px;
bottom: 0;
}
.pg-body .body-content{
position: absolute;
top:48px;
left: 182px;
right: 0;
bottom: 0;
background-color: #8C0044;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"> </div>
<div class="pg-body">
<div class="body-menu">
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="body-content">
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
<h1>zzz1</h1><h1>zzz1</h1><h1>zzz1</h1>
</div>
</div> </body>
</html>
7.模态对话框：
分为3层 底层 遮罩层 对话层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.top{
height: 2000px;
background-color: #000fff;
}
.model{
position: fixed;
top:0;
bottom: 0;
left:0;
right: 0;
background:rgba(0,0,0,.5);
z-index: 2;
}
.countent{
height: 300px;
width: 400px;
background-color: white;
position: fixed;
top: 50%;
left:50%;
z-index: 3;
margin-top: -200px;
margin-left:-200px;
} </style>
</head>
<body>
<div class="top">
<h1>ss1</h1><h1>ss1</h1><h1>ss1</h1><h1>ss1</h1><h1>ss1</h1>
</div>
<div class="model"></div>
<div class="countent"></div>
</body>
</html>
css 拾遗的更多相关文章
- CSS拾遗（二）
接CSS拾遗(一). 4. 不透明度 opacity: 0.8; filter: alpha(opacity=80); opacity: 0.8是标准的写法:filter: alpha(opacity ...
- python day 22 CSS拾遗之箭头，目录，图标
目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...
- CSS拾遗+技巧集合
1.实现尖角符号. 这是内联inline-block标签独有的特性. <!DOCTYPE html> <html lang="en"> <head&g ...
- CSS拾遗
1:CSS样式的声明 选择符{ 属性:值; 属性:值; ... } 其中,选择符有: 标签选择器:标签名{样式} 类选择器: .类名{样式} ID选择器: #ID名{样式} 另外:样式属性的书写格式 ...
- CSS拾遗（一）
重新看<精通CSS(第二版)>做一些记录,方便今后巩固. 1.外边距叠加 只有普通文档流中块框的垂直外边距才会发生外边距叠加.行内框.浮动框.或绝对定位框之间的外边距不会叠加. 2.相对定 ...
- css拾遗（一）（inline-block,absolute）
一:inline-block中不要嵌套其他block标签,不然会破坏布局 <style> .left{ float:left; } .hide{ display:none; } a{ di ...
- python之路之css拾遗
做一个鼠标碰到就会自动加边框的效果 下边的代码,主要是使自动加边框的时候,加边框的部分不会跳动 实现一张图片的点击之后出现信息
- 3.CSS使用基础(2)
目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...
- 老男孩Python高级全栈开发工程师【真正的全套完整无加密】
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...
随机推荐
- iOS AFNetworking内存泄漏处理方法
iOS AFN内存泄漏处理方法 细心的你是否也发现AFN的内存泄漏的问题了呢. 在这里给大家提供一个解决AFN内存泄漏的方法. 单例解决AFN内存泄漏 + (AFHTTPSessionManager ...
- Servlet的生命周期+实现方式
1.Servlet的生命周期: (1)被创建: 默认情况下,Servlet第一次被访问时,被服务器创建.会调用init()方法. 一个 ...
- mac osx get postgresql path
sudo lsof -i :5433 ps xuwww -p 91 sudo port install py27-psycopg2
- [AlwaysOn Availability Groups]排查：AG超过RPO
排查:AG超过RPO 在异步提交的secondary上执行了切换,你可能会发现数据的丢失大于RPO,或者在计算可以忍受的数据都是超过了RPO. 1.通常原因 1.网络延迟太高,网络吞吐量太低,导致Pr ...
- PHP命名规范
以下文字全部摘自<PHP从入门到精通>这本书,谨以此作为标准. 就一般约定而言,类.函数和变量的名字应该是能够让代码阅读者能够容易地知道这些代码的作用,应该避免使用凌磨两可的命名. 1. ...
- 大数据系列（2）——Hadoop集群坏境CentOS安装
前言 前面我们主要分析了搭建Hadoop集群所需要准备的内容和一些提前规划好的项,本篇我们主要来分析如何安装CentOS操作系统,以及一些基础的设置,闲言少叙,我们进入本篇的正题. 技术准备 VMwa ...
- 设计模式C#实现（十六）——中介者模式
意图 0 适用性 1 结构 2 实现 3 效果 4 参考 5 意图 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变他们之间的交互. 适用 ...
- JavaScript中function的多义性
JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错 ...
- shell中各种括号的作用()、(())、[]、[[]]、{}
一.小括号,圆括号() 1.单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...
- CentOS RedHat YUM 源扩展补充（32位、64位均有）
一般情况下强烈建议在CentOS6下面使用YUM配置安装LAMP环境,一些兄弟也很喜欢使用编译的安装方法,个人觉得如果不是对服务器做定制,用yum安装稳定简单,何必去download&make ...