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 杂笔－16 （-(void)scrollViewDidEndScrollingAnimation:方法使用注意）
今天在写项目的时候,遇到了一件令人抓狂的事情. 正如标题所示,被这个方法弄的团团转. -(void)scrollViewDidEndScrollingAnimation:是协议里的方法. 意味当动画结 ...
- Socket.IO聊天室~简单实用
小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~ ...
- [Unity游戏开发]向量在游戏开发中的应用（三）
本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/51088236 在上一篇博客中讲了利用向量点乘在游戏开发中应用的几种情景.本 ...
- 【转】2016/2017 Web 开发者路线图
链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...
- Linux Tomcat 6.0安装配置实践总结
系统环境: Red Hat Enterprise Linux Server release 5.7 (Tikanga) 64位 Tomcat下载 从官方网站 http://tomcat.apache ...
- send+recv注意事项
[TOC] send 函数原型 ssize_t send( SOCKET s, const char *buf, size_t len, int flags ) 注意事项 待发送数据长度data_le ...
- Memcached在windows下安装与使用
建议:windows系统下仅为测试所有,生产环境下服务端应使用Linux系统. 本文最后更新于:2014-08-03 18:24 原文:http://www.yaosansi.com/post/mem ...
- 【小白的CFD之旅】03 老蓝
第一次见到老蓝,小白都不太敢相信,对面那不修边幅的糟老头子会是自己要找的导师.嘴里叼着烟,牙都掉了好几颗,穿着还算整齐,这是小白对老蓝的第一印象,这印象并不太好,尤其是在小白发誓认真度过研究生三年时光 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...
- MMORPG大型游戏设计与开发（服务器 游戏场景 聊天管道和寻路器）
又快到双十一,又是不少同仁们出血的日子,首先希望大家玩的开心.我曾经想要仔细的剖析场景的的每个组件,就像这里的聊天管道与寻路器,但是仔细阅读别人代码的时候才发现元件虽小但是实现并不简单,因为有些东西还 ...