web前端基礎補充

時間 2019-12-09

標籤 web 前端基礎補充欄目 HTML 简体版

原文原文鏈接

1 佈局和事件

佈局效果以下(標題和內容都居中，兩邊留空白)html

佈局代碼以下ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中佈局</title>
    <style>
        .header{
            height: 48px;
            background-color:lightgrey;
        }

        .body{
            background-color: blue;
        }
        /*設置寬度並居中*/
        .container{
            width: 980px;
            margin: 0 auto;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <!--網頁頭部部分-->
    <div class="header">
        <!--這裏經過在內層嵌套div標籤，並設置class='container'，這樣它就相對本身的父標籤進行居中-->
        <div class="container">網頁頭部</div>
    </div>

    <!--網頁主體部分-->
    <div class="body">
        <div class="container">網頁主體</div>
    </div>
</body>
</html>

居中佈局代碼

Bootstrap中的事件：關閉Bootstrap模態對話框(使用Bootstrap提供的方法)佈局

$('#myModal').modal('hide')  //其中#myModal是ID選擇器

2 a標籤屬性

對於a標籤，當鼠標移動上去以後要顯示小手，這個經過屬性cursor:pointer來實現；另外對於a標籤，當鼠標放上去時怎樣取消下劃線，這個經過屬性text-decoration:none來實現。spa

3 z-index

經過設置z-index屬性，來設計整個頁面的層級。設計

4 圓角

首先咱們定義的div標籤，默認他是方形的，咱們能夠經過"border-radius"屬性來改變它的形狀，看下面的代碼：code

<!--這裏border-radius:百分數，至關於給div設置邊框的圓潤程度-->
<div style="width: 50px;height: 50px;background-color:blue;border-radius:50%"></div>

相關標籤/搜索

每日一句

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