HTML--比較實用的小例子

時間 2019-12-07

標籤 html 比較實用例子欄目 HTML 简体版

原文原文鏈接

經常使用的前端實例：javascript

1略css

二、在網頁商城中的圖片當咱們把鼠標放上去以後，圖片會顯示一個有顏色的外邊框，圖片某一部分的字體的顏色併發生改變html

鼠標放上去以前前端

鼠標放上去以後：java

實現的代碼：python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>Title</title>
    <style>
        .ele{
            /*先給圖片的變框設置一個有寬度的變框這個鼠標放上去看到的效果就是靜態的*/
            border: 1px solid transparent;
            /*加變框是爲了避免但願看到圖片的位置發生改變*/
        }

        .ele:hover{
            /*僞類 ：鼠標放上去會出現一個外邊框*/
            border: 1px solid gray;
        }
        /*鼠標放上去 一部分的字體顏色發生改變*/
        .ele:hover .ele-item{
            color: red;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div>123</div>
        <div class="ele-item">123</div>
    </div>
</body>
</html>

邊框加顏色-並改變某一部分的字體顏色

三、鼠標放到圖片上，圖片上會顯示一些相關的信息：
以前的效果：併發

設置代碼以後的效果：框架

上代碼：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>隱藏</title>
    <style>
        .touch{
            /*父親div的position採用relative
            那麼在其內部的div只須要使用absolute就能夠定位在父div的任意位置*/
            overflow: hidden;
            position: relative;
            width: 600px;
            height: 400px;

        }
        .touch img{
            /*設置圖片的寬和高讓它在框架的div中鋪滿*/
            width: 600px;
            height: 400px;

        }
        .touch .content{
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity: 0.6;   /*透明度*/
            color: red;
            text-align: center;
            visibility: hidden;
        }
        .touch:hover .content{
            /*內容設置一個僞類 鼠標放上去讓其可見*/
            visibility: visible;
        }
        .touch .content .c1{
            font-size: 32px;
            padding: 50px 0;

        }
     </style>
</head>
<body>
    <div class="touch">
        <div><img src="nice.png"></div>
        <div class="content">
            <div class="c1">Hello</div>
            <div class="c2">nice girl</div>
        </div>
    </div>
</body>
</html>

圖片上邊加一層效果

四、畫三角形：佈局

4.一、border的特性：拐角處是特殊的樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>畫圖</title>
    <style>
        .picture{
            border-top: 30px solid black;
            border-bottom: 30px solid red;
            border-right: 30px solid purple;
            border-left: 30px solid pink;
        }
    </style>
</head>
<body>
<div class="picture"></div>
</body>
</html>

拉長的效果是因爲div是塊級標籤

4.二、將圖形變成一個正方形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>畫圖</title>
    <style>
        .picture{
            border-top: 30px solid black;
            border-bottom: 30px solid red;
            border-right: 30px solid purple;
            border-left: 30px solid pink;
            /*將塊級變成內聯的且能夠設置寬度高度*/
            display: inline-block;

        }
    </style>
</head>
<body>
<div class="picture"></div>
</body>
</html>

畫一個正方形

4.3畫一個上三角形

就是把上邊的正方的其餘邊設置成透明色就能夠達到設置三角的目的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>畫三角</title>
    <style>
        .up{
            border-top: 30px solid transparent;
            border-bottom: 30px solid red;
            border-right: 30px solid transparent;
            border-left: 30px solid transparent;
            /*將塊級變成內聯的且能夠設置寬度高度*/
            display: inline-block;

        }
    </style>
</head>
<body>
<div class="up"></div>
</body>
</html>

上三角

4.4畫一個下三角，鼠標放上去變成下三角且顏色不同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>尖角</title>
    <style>
                .c1{
            border: 30px solid transparent;
            border-top: 30px solid purple;

           margin-top: 40px;
            display: inline-block;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            margin-top: 10px;

        }

           </style>
</head>
<body>

<div style="height: 100px;background-color: pink;">
    <div class="c1"></div>
</div>

</body>
</html>

下三角變上三角

五、引用特殊的圖標：（awesome）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>圖標</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <style>
    </style>
</head>
<body>
    <i class="icon-cny"></i>
    <i class="icon-collapse"></i>
    <i class="icon-twitter-sign"></i>
</body>
</html>

View Code

六、輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>form-input</title>
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <style>
        .user{
            position: relative;
            /*background-color: purple;*/
            width: 250px;
        }
        .user input{
            height: 30px;
            width: 170px;
            background-color: gainsboro;
            padding-right: 30px;
        }
        .user .ren{
            position: absolute;
            top: 10px;
            left: 180px;
        }
        .icon-collapse{
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="user">
        <input type="text">
        <span class="ren icon-collapse"></span>
    </div>

</body>
</html>

form-input

七、頁面佈局：

導航欄固定
菜單欄若是超出屏幕範圍則有下拉框
內容部分超出頁面也會有下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>佈局頁-1</title>
    <style>
        body{
            margin: 0;
        }
        .pg-body{
            height: 48px;
            background-color: gray;
        }
        .pg-body .body-menu{
            top: 48px;
            position: absolute;
            width: 180px;
            background-color: pink;
            left: 0px;
        }
        .pg-body .body-content{
            position:absolute;
            top: 48px;
            left: 188px;
            right:0;
            bottom:0;
            background-color: blue;
            overflow: auto;
        }



    </style>


</head>
<body>
<div class="pg-header">

</div>

<div class="pg-body">
    <div class="body-menu">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>

        </ul>
    </div>
    <div class="body-content">
        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>
        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>
        <h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1><h1>13213</h1>



    </div>
</div>


<div></div>

</body>
</html>

頁面佈局

八、有些頁面打開以後咱們點擊登陸，會彈出一個小的文本框，在屏幕的中間讓用戶登陸或者註冊，且頁面的內容是可見的；

效果以下：

這個畫面共有三個層次，最底部是網頁，第二層是一個遮罩層（透明的灰色），第三層就是咱們看到的登陸註冊的頁面且在頁面偏上的位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>模態對話框</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .model{
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background: rgba(0,0,0,.6);
            z-index: 2;
        }
        .content{
            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 style="height: 2000px;background-color: gainsboro">
    <h1>132</h1><h1>132</h1><h1>132</h1><h1>132</h1><h1>132</h1>
    <h1>132</h1><h1>132</h1><h1>132</h1>


</div>
    <div class="model"></div>
    <div class="content"></div>








</body>
</html>

模擬對話框

九、購物的時候能夠選擇一個或者多個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    <title>商品數量的加減</title>
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .center{
            line-height: 26px;
            text-align: center;
        }
        .wrap{
            width: 160px;
            height: 26px;
            border: 1px solid #dddddd;
            /*background-color: gainsboro;*/
        }
        .wrap .minus{
            height: 26px;
            width: 30px;
            cursor: pointer;

        }
        .wrap .plus{
            height: 26px;
            width: 30px;
            cursor: pointer;

        }
        .wrap .count input{
            height: 24px;
            border: 0;
            width: 98px;
            padding: 0;
            border-right: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            text-align: center;

        }


    </style>


</head>
<body>
<div class="wrap">
    <div class="minus left center" onclick="Minus();">-</div>
    <div class="count left">
        <input id="count" type="text" value="99">
    </div>
    <div class="plus left center" 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>

商品數量的加減

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。