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 ...

随机推荐

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
Memcache学习整理
一.Memcache 是什么? 组成:程序进程管理.Socket 程序进程:Memcache把内存先分成几个大份,每一份分成多个小份.例如:小份中有5M...0.9M.0.8M.....0.1M,一份 ...
Java 堆
特性: 虚拟机启动时创建的线程共享的内存区域,所有实例对象和数组对象分配内存的区域 GC垃圾手机管理器管理的主要区域,GC堆容量可以固定,也可以动态扩展,自动收缩 -Xmx最大堆大小 -Xms最小. ...
date命令总结
date命令是显示或设置系统时间与日期 date(选项)(参数) -d<字符串>:显示字符串所指的日期与时间.字符串前后必须加上双引号: -s<字符串>:根据字符串来设置日期与 ...
PHP中的回调函数和匿名函数
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
hive建表与数据的导入导出
建表: create EXTERNAL table tabtext(IMSI string,MDN string,MEID string,NAI string,DestinationIP string ...
关于linx中man命令内容中第一行数字的含义
我们知道linux中man这玩意特别厉害,我们要查么个命令的使用方法.如man ls 出现如下内容关于这写数字的含义如下表格
eclipse svn账号更换
在eclipse下用 svn的时候,我们习惯将用户名和密码保存.前天公司将svn的账号全部更换了,这时原来的eclipse保存的svn账号密码就失效了.那怎么样才能切换账号了,eclipse svn插 ...
(转)java DecimalFormat用法
DecimalFormat 是 NumberFormat 的一个具体子类,用于格式化十进制数字. DecimalFormat 包含一个模式和一组符号符号含义: 0 一个数字 # 一个数字, ...
阅读Real-Time O(1) Bilateral Filtering 一文的相关感受。
研究双边滤波有很长一段时间了,最近看了一篇Real-Time O(1) Bilateral Filtering的论文,标题很吸引人,就研读了一番,经过几天的攻读,基本已理解其思想,现将这一过程做一简单 ...

css 拾遗

css 拾遗的更多相关文章

随机推荐

热门专题