zoukankan html css js c++ java

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; 500px;height: 150px;margin: 0 auto">   
            <div style="position: absolute;left:0;bottom:0; 40px;height: 40px;background-color:palevioletred">
            </div>
        </div>
    </div>
    <div style="position:fixed;right:10px;bottom: 10px; 40px;height: 40px;background-color: violet"></div>
</body>
</html>

View Code

效果图：滚轮在顶端时

　　　　滚轮在下面时

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>

View Code

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>

View Code

输入前输入后：

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>

View Code

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>

View Code

查看全文

相关阅读:
Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
常用的英语词汇
 增加个人形象气质
 网络基础
 MK-编辑器
 Nexus仓库构建
 POM的配置文件
 Dubbo_Admin安装
 dubbo管理控制台安装和使用
 Dubbox监控在服务器中的安装

原文地址：https://www.cnblogs.com/guokaixin/p/5642581.html