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 ...
随机推荐
- Project、Target、Workspace and Scheme
前言 今天有人问我Target和Project是什么关系?额...学习iOS开发都知道Target和Project的关系.这里我就简单的做了一个总结,而且加入的Scheme和Workspace.如果不 ...
- popupwindow展示
样式: layout: popup_appinfo.xml <?xml version="1.0" encoding="utf-8"?> <L ...
- 如何快速简单上传类库到CocoaPods - 图文攻略步骤
当自己的库已经上传GitHub后,那么如何快速简单的开源自己的库呢? 这里就是介绍如何将自己的类库上传到pods管理库,以便开源所有人都能方便使用. 准备前提: - 项目已上传到GitHub (注意, ...
- linux文件拼接命令 paste
paste [文件名1 [文件名2] --] [选项] -s 把文件以行的方式拼接 -d 制定分隔符,默认以制表符分隔 [root@dagege ~]# >.txt [root@dagege ~ ...
- Vim插件管理
一.简介 二.管理器 1)Vundle https://github.com/gmarik/vundle.git 2)vim-plug https://github.com/junegunn/vim- ...
- Linux下磁盘挂载
公司硬盘不够用了,新买了一个存储,需要挂载到现在的系统上.前期的步骤就不说了,运维全部搞定,无非是硬件和网络那一套,这里只说分配到本人后在Linux下如何挂载. 具体步骤如下: 1.查看是否已经分配 ...
- hadoop.home.dir is not set
今天遇到一个错误,JAVA堆栈如下: 是在获取文件系统对象的时候出错,没有找到环境变量 HADOOP_HOME or hadoop.home.dir ,但是在本地一直没有重现这个问题. 这个问题是一个 ...
- 识别 Linux上的设备（磁盘）类型
1. Linux 上的设备 (device) Linux 操作系统中,各种设备驱动(device driver)通过设备控制器(device controller)来管理各种设备(device),其关 ...
- 在Azure上实现Linux Server故障转移
要充分利用公有云的弹性扩展和高可用, 首先要在应用系统层面支持横向扩展(scale out),这个说起来很容易,或者说对新开发的应用系统而言已经成为标配.但是对已有的.老旧的应用系统来说,这就比较困难 ...
- python 聊天室
server端程序 # -*- coding: utf-8 -*- #!/usr/bin/python """ """ import soc ...