一些常用的html、css、js的簡單應用

豆皮漿發表於2020-11-09
HTMLCSSJS

頁面頭部固定，下面隨著內容的增多滾動，但是頭部不動的效果

positive:fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頭部一直置頂</title>
    <style>
        .header{
            position: fixed;
            background-color: pink;
            width: 100%;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div class="header">
    頁面頭部固定，下面隨著內容的增多滾動，但是頭部不動的效果
</div>
<div id="container">
    <ul>
        <li><a href="#">測試內容</a></li>
        ......
    </ul>
</div>
</body>
</html>

讓ul li裡面的內容橫排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #menu{
        position: fixed;
        background-color: pink;
        line-height: 50px;
        width: 100%;
        text-align: center;
    }
        ul li{
            list-style: none;
            display: inline-block;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>精品閱讀</li>
        <li>管理書籍</li>
        <li>使用者登入</li>
        <li>使用者退出</li>
        <li>使用者註冊</li>
    </ul>
</body>
</html>

給按鈕一個漸變顏色，以及右括號的製作(&gt)（左括號$lt依舊如此）

**`< less than, &lt;`**
**> greater than,&gt;**

background-image: -webkit-linear-gradient(left,blue,pink);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>給按鈕一個漸變的顏色</title>
    <style>
        #btn{
            border-radius: 30px;
            background-image: -webkit-linear-gradient(left,blue,pink);
            font-size: 6px;
            width: 120px;
            height: 60px;
        }

        #btn::after {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            border-top: 2px solid red;
            border-right: 2px solid red;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<button id="btn">使用者註冊</button>
</body>
</html>

圖片在div中顯示

改變圖片的比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #left{
            width: 18%;
            border-right: 2px solid #fff;
            margin: 0 auto;
        }
        #left  img{
           width: 100%;
        }
    </style>
</head>
<body>
<div id="footer" >
    <div id="left">
        <img src="../image/1.jpg" alt="">
    </div>
</div>
</body>
</html>

盒子模型

background-color: #F6F6F6;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
        #left{
            width: 18%;
            border-right: 2px solid #fff;
            margin: 0 auto;
        }

        #left  img{
           width: 100%;
        }
        #footer{
            position: relative;
            background-color: #F6F6F6;
        }

        #right{
            position: absolute;
            top: 27px;
            right: 343px;

        }
        #right_top{
            width: 170px;
            height: 68px;
            border: 3px solid #fff;
            margin-left: -15px;
            margin-top: -22px;
            text-align: center;
            line-height: 68px;
        }
        #bottom_left, #bottom_right{
            border: 3px solid #fff;
            width: 84px;
            height: 70px;
        }
        #bottom_left{
            float:left;
            margin-left: -18px;
        }
        #right_bottom{
            border: 3px solid #fff;
            position: relative;
        }
        #bottom_right{
            position: absolute;
            left: 70px;
        }
    </style>
</head>
<body>
<div id="footer" >
    <div id="left">
        <img src="../image/1.jpg" alt="">

        <div>
            <span>這是一幅多麼美的圖片啊</span>
        </div>
    </div>

    <div id="right">
        <div id="right_top">
            愛生活,愛學習
        </div>
        <div id="right_bottom">
            <div id="bottom_left">
                生活不易，且行且珍惜
            </div>
            <div id="bottom_right">
                有種生活叫做情調
            </div>
        </div>
    </div>
</div>
</body>
</html>

用js來生成小圓點

組裝dom節點的一個思路：
先建立好

 <div class="index_box">
        <ol>

        </ol>
    </div>

我們動態通過js往ol子節點插入li標籤；
這個時候要建立li標籤

  let indexBox = document.querySelector(".index_box");
    <!--建立li標籤-->
    let frg = document.createDocumentFragment();
   for(let i=0;i<3;i++){
       let li = document.createElement("li");
       li.setAttribute("data-index",i+1);
       frg.appendChild(li);
   }
   indexBox.children[0].style.width = 60+"px";//相當於ol標籤加了寬度樣式
   //<ol style="width:60px"></ol>
   indexBox.children[0].appendChild(frg);//然後把li標籤插入到ol標籤

有這些標籤這個時候可以寫樣式了：

 <style>
        .index_box ol{
            display: flex;
        }
       .index_box ol li{
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: red;
           list-style: none;
           display: flex;
       }
    </style>

選項卡的實現

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab選項卡</title>
</head>
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px;
    }

    .warpper {
        border: 1px solid red;
        width: 408px;
        height: 320px;
        margin: auto;
    }

    .line {
        width: 408px;
        height: 55px;
        text-align: center;
    }

    .line>li {
        list-style: none;
        color: red;
        border: 1px solid red;
        float: left;
        width: 100px;
    }

    #div-v {
        background-color: antiquewhite;
    }

    #div1,
    #div2,
    #div3,
    #div4 {
        color: red;
        text-align: center;
        display: none;
    }

    #div1 {
        display: block;
    }
</style>
<script >

    function show(n,m) {
        //alert(n)
        // 將所有div i<4寫n就會導致不能夠把其他隱藏，因為n是自己傳過去的內容隱藏 
        for (let i = 1; i <=4 ; i++) {
            let AllObj = document.getElementById("div"+i);
            AllObj.style.display="none";
        }
        let s = document.getElementById("div"+n);
        s.style.display="block";

    }
</script>

<body>
<div class="warpper">
    <ul class="line">
        <li id="li1" onclick="show(1,this)">精品課程</li>
        <li id="li2" onclick="show(2,this)">vip課程</li>
        <li id="li3" onclick="show(3,this)">免費聽課</li>
        <li id="li4" onclick="show(4,this)">使用者登入</li>
    </ul>
    <div id="div-v">
        <div id="div1">
            精品課程
        </div>
        <div id="div2">
            vip課程
        </div>
        <div id="div3">
            免費聽課
        </div>
        <div id="div4">
            使用者登入
        </div>
    </div>
</div>
</body>
</html>

原生js實現點哪個就高亮哪個

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>選項卡</title>
    <style type="text/css">
      #login{
          background: pink;
          width: 100%;
          float: right;
      }
         ul li{
            list-style: none;
            display: inline-block;

        }
        a{
            text-decoration: none;
        }
      #login li.on {
          background:red;
      }
    </style>

</head>
<body>
<div>
    <ul id="login">
        <li class="on"><a href="#">使用者登入</a></li>
        <li><a href="#">使用者註冊</a></li>
    </ul>
</div>
<script type="text/javascript">
       let login =  document.getElementById("login");

       for(let i = 0;i<login.children.length;i++){
           //document.write(li[i].textContent);
           login.children[i].onclick=function (e) {
               // alert(this)
               for(i=0; i<login.children.length; i++) {
                   login.children[i].className='';
               }
               this.className='on';
           }
       }
</script>
</body>
</html>

相關文章