HTML前端--各種小案例

本文轉載自查看原文 2016-07-04 22:54 2340 前端

掬一捧清水，放逐在江河，融入流逝的歲月，將心洗凈;

捻一縷心香，遙寄在雲端，在最深的紅塵里重逢，將心揉碎;

望一程山水，徘徊在月下，在相思渡口苦守寒冬，將心落寞。

案例一：

隱藏擴展域，並去掉after，並去掉高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after{   /*善用after和defore*/
            content: "111";  /*注意加引號*/
            clear: both;
            display: block;
            visibility: hidden;  /*隱藏並有高度*/
            height: 0;   /*去掉高度*/
        
        }
        .c{
            width: 100px;
            /*height: 100px;*/
            background-color:red;
        }
        .c .item{
            float:left;
            width:30px;
            background-color: green ;
        }

    </style>
</head>
<body>
    <div class='c clearfix'>
        <div class='item'>123</div>
        <div class='item'>456</div>

    </div>

    <div class="test">內容</div>
</body>
</html>

更新后的代碼

案例二：

當鼠標放在一個圖片上顯示這個商品的信息，或者一些別的東西，比如

.touch:hover .content{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .touch{
                width: 200px;
                height: 200px;
                overflow: hidden;
                position: relative;
            }
            .touch .content{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0,.6);
                color: white;
                text-align: center;
                visibility: hidden;
            }
            .touch:hover .content{
                visibility: inherit;
            }
            
        </style>
    </head>
    <body>
        <div class="touch">
            <div><img src="2.jpg"></div>
            <div class="content">
                <div class="c1">ALEX</div>
                <div class="c1">500-1000(日)</div>
            </div>
        </div>
    </body>
</html>

案例及代碼

案例三：

要求在當前頁面不超出多余內容，超出了變成滾動條顯示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .pg_top{
                height: 48px;
                background-color: #dddddd;
            }
            .pg_body_menu{
                position: absolute;
                width: 180px;
                background-color: blueviolet;
                left: 0;
            }
            .pg_body_content{
                position: absolute;
                top: 48px;
                left: 190px;
                right: 0;
                bottom: 0;
                background-color: blueviolet;
                overflow: auto;  /*可以利用overflow變導航條*/
            }
        </style>
    </head>
    <body>
        <div class="pg_top">
            
        </div>
        <div class="pg_body">
            <div class="pg_body_menu">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
            <div class="pg_body_content">
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                    <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
                        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
            </div>
        </div>
        
    </body>
</html>

代碼

案例四：

尖角圖標，尖角符號是向上，當鼠標點的時候尖角符號向下

.c1{ /*這個是麻煩寫法*/
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 30px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }
            .c1{ /*半個*/
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 0px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }

部分代碼-學習的第一階段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*.c1{ 這個是麻煩寫法
                border-top: 30px solid yellow ;
                border-left: 30px solid green;
                border-bottom: 0px solid blue;
                border-right: 30px solid black;
                display: inline-block;
            }*/
            .c1{
                border: 30px solid transparent ;
                border-top: 30px solid yellow ;
                display: inline-block;
                margin-top: 40px;
            }
            .c1:hover{
                border:  30px solid transparent;
                border-bottom: 30px solid yellow ;
                margin-top:10px ;
            }
        </style>
    </head>
    <body>
        <div style="height: 150px; background-color: red;">
            <div class="c1"></div>
            
        </div>
    </body>
</html>

代碼

案例五：

模態對話框

就是彈出一個框，然后顯示一些內容（其實是分為三層）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .model{
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0,0,0,0.5);
                z-index: 2;
            }
            .content{
                height: 300px;
                width: 400px;
                background-color: white;
                color: #000000;
                position: fixed;
                top: 50%;
                left: 50%;
                z-index: 3;
                margin-left: -200px;
                margin-top: -200px;
                font-size:32px ;
                line-height: 300px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div style="height: 2000px; background-color: red;">
            <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1>
            <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1>
        </div>
        <div class="model"></div>
        <div class="content">悲傷那么大！！！</div>
    </body>
</html>

View Code

案例六：

輸入框里面有圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .user{
                position: relative;
                width: 250px;
            }
            .user input{
                height: 30px;
                width: 150px;
                padding-right: 20px;
                
            }
            .user .ren{
                position: absolute;
                top: 8px;
                left: 160px;
            }
        </style>
    </head>
    <body>
        <div class="user">
            <input type="text" />
            <span class="ren">R<!--這里可以放圖片--></span>
            
        </div>
    </body>
</html>

代碼

案例七：

商品加減框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .wrap{
                width: 150px;
                height: 22px;
                border: 1px solid #ddd;
                /*background-color: red;*/
                position: relative;
                left: 100px;
                top: 100px;
            }
            .wrap .minus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
            }
            .wrap .plus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
            }
            .wrap .count input{
                padding: 0;  /*input是有padding的*/
                border: 0;
                width: 104px;
                height: 22px;
                border-left: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="minus left">-</div>
            <div class="count left">
                <input type="text"  />
            </div>
            <div class="plus left">+</div>
        </div>
    </body>
</html>

代碼

案例八：

商品加減框加減，鼠標並變化樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .wrap{
                width: 150px;
                height: 22px;
                border: 1px solid #ddd;
                /*background-color: red;*/
                position: relative;
                left: 100px;
                top: 100px;
            }
            .wrap .minus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer;
            }
            .wrap .plus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer; /*當鼠標指的時候變樣式*/
            }
            .wrap .count input{
                padding: 0;  /*input是有padding的*/
                border: 0;
                width: 104px;
                height: 22px;
                border-left: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="minus left" onclick='Minus();'>-</div>
            <div class="count left">
                <input id='count' type="text"  />
            </div>
            <div class="plus left" onclick='Plus();'>+</div>
        </div>
        <script type="text/javascript">
            function Plus(){
                var old_str = document.getElementById('count').value
                var old_int = parseInt(old_str);
                var new_int = old_int + 1
                document.getElementById('count').value = new_int
            }
            function Minus(){
                var old_str = document.getElementById('count').value
                var old_int = parseInt(old_str);
                var new_int = old_int - 1
                document.getElementById('count').value = new_int
            }
            
        </script>
    </body>
</html>

代碼

案例九：

當鼠標指到圖片，會變成字體和邊框顏色會變

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .ele{
                width: 300px;
                height: 300px;
                background-color: yellow;
            }
            .ccc{
                width: 300px;
                height: 200px;
                background-color: green;
            }
            .ddd{
                width: 300px;
                height: 100px;
                background-color: red;
            }
            .ele:hover .ddd{
                background-color: blueviolet;
                font-size: 38px;
            }
        </style>
    </head>
    <body>
        <div class="ele">
            <div class="ccc">圖片1</div>
            <div class="ddd">
                ddd
            </div>
        </div>
    </body>
</html>

代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML+CSS小實戰案例前端特效demo | 值得收藏的6個 HTML5 Canvas 實用案例前端開發中常見的HTML5標簽亂用案例前端框架Vue自學之Vue router小案例TabBar（七）前端小例子基礎js css html練習后台Java代碼加前端微信小程序實現圖片上傳案例（學習）前端筆記之微信小程序（三）GET請求案例&文件上傳和相冊API&配置https 前端之html 前端html 前端HTML