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 ...
随机推荐
- RunTime&RunLoop初见
什么是runtime 1> runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数); 2>实际上,平时我们编写的oc代码,底层都是基于runtime实现的 也就 ...
- Android 四大组件之再论service
service常见的有2种方式,本地service以及remote service. 这2种的生命周期,同activity的通信方式等,都不相同. 关于这2种service如何使用,这里不做介绍,只是 ...
- Ruby的模型关系随笔
1 Class和Module的实例方法也就是所有具体类和具体Module的类方法,因为具体类和具体Module分别是Class和Module的实例.例如Object.new对应着Class#new,K ...
- 解决Jenkins 2.0 初始化界面卡住的问题
***************************************** *原创博客转载请注明出处,谢谢!* **************************************** ...
- Linux忘记root密码怎么办？
开篇前言:Linux系统的root账号是非常重要的一个账号,也是权限最大的一个账号,但是有时候忘了root密码怎么办?总不能重装系统吧,这个是下下策,其实Linux系统中,如果忘记了root账号密码, ...
- C语言--乱写C语言
C语言的语法太枯燥了 换个写法 #include <stdio.h> #include<stdlib.h> #define end } #define if(x) if ( ...
- javascript-代理模式
JavaScript代理模式笔记 由于一个对象不能直接引用另一个对象,所以要用过代理对象在这两个对象之间起到中介作用 1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSON ...
- sql 日期格式汇总
SQLserver中用convert函数转换日期格式2008-01-15 15:51SQLserver中用convert函数转换日期格式 SQL Server中文版的默认的日期字段datetime格式 ...
- PostgreSQL-系统表、系统视图
系统表显示的都是当前操作数据库下的信息,对象都来自当前数据库.因为不同的系统表都用不同名的字段来记录不同对象的oid,这个表引用那个表,那个表又引用另一个表,所以这些字段名不太好记. pg_class ...
- 如何捕捉并分析SIGSEGV的现场
linux下程序对SIGSEGV信号的默认处理方式是产生coredump并终止程序,可以参考man 7 signal Signal Value Action Comment ───────────── ...