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 ...
随机推荐
- 解决idea中执行maven命令失败的问题
1.问题描述 如上图所示,在使用idea 里的maven命令执行项目打包时,有时候会报如下一个错误. -Dmaven.multiModuleProjectDirectory system proper ...
- HADOOP安装指南-Ubuntu15.10和hadoop2.7.2
Ubuntu15.10中安装hadoop2.7.2安装手册 太初 目录 1. Hadoop单点模式... 2 1.1 安装步骤... 2 0.环境和版本... 2 1.在ubu ...
- iPhone被盗后续更新二：被换机！已取机！没扣住新机！怎么找新机呢？事发半年后跟进...
先说下情况 MEID/IMEI:3544 2706 9380 456 我的序列号:F17NL088G5MY 新的IMEI:3569 7606 5956 097 新的序列号:DNPNV69ZG5MY 我 ...
- JVM之Parallel Old收集器
Parallel Scavenge的老年代版本 标记-整理算法 注重吞吐量及cpu资源敏感环境.
- 利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题
问题的描述: 一个项目,涉及到了 两个数据源,分别使用的是 两个不同的 数据库连接池,其中一个是 poxool 连接池,问题在于,spring在启动时,只初始化其中的一个 数据库连接池中的数据库连接, ...
- APUE环境配置
1.到http://www.apuebook.com/选择相应的版本下载源码,我的是2013版的 2.将apue.h拷到/usr/include目录下 3.将error.c拷到源文件下,编译的时候带上 ...
- 萌新笔记——C++里创建 Trie字典树（中文词典）（一）（插入、遍历）
萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...
- Json学习笔记
一．昨天内容回顾 创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject("Msxml2.XMLHTTP. ...
- 最新的ADT Plugin24.0.2
下载地址:http://pan.baidu.com/s/1o7OIhWQ 密码:z2it
- Fetch：下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...