CSS樣式常見樣式

1、高度和寬度

預設情況下，高度和寬度無法應用在行内标簽上。

預設情況下，塊級标簽雖然設定的寬度，右邊空白區域也不許被占用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--塊級标簽-->
  <div style="height:100px;width:200px;background-color:red">中國移動</div>
  <div style="height:100px;width:200px;background-color:green">中國聯通</div>
<!--行内标簽-->
  <span style="height:100px;width:200px;background-color:pink">中國聯通</span>
<!--行内标簽轉換成塊級标簽-->
    <span style="display:block;height:100px;width:200px;background-color:pink">中國聯通</span>
</body>
</html>

2、行内和塊級标簽

1）塊級标簽：

2）行内标簽：無法應用高度和寬度

轉換前代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--塊級标簽-->
<div>塊級标簽</div>
<!--行内标簽-->
<span>行内标簽</span>
<div style="display:inline-block;height: 100px;">行内标簽有塊級标簽的特點</div>
</body>
</html>

轉換後代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--塊級标簽轉換為行内标簽-->
<div style="display:inline;">塊級标簽</div>
<!--行内标簽轉換為塊級标簽-->
<span style="display:block;">行内标簽</span>
<div style="display:inline-block;height: 100px;background-color:red;">行内标簽有塊級标簽的特點</div>
</body>
</html>

3、文本對齊方式

1）文本水準方向：style=text-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--text-align:水準方向對齊方式-->
  <h1 style="text-align: left">左邊</h1>
  <h1 style="text-align: right">右邊</h1>
  <h1 style="text-align: center">中間</h1>
</body>
</html>

2）文本垂直方向：line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--垂直方向對齊-->
    <h1 style="text-align: center;width:500px;height:200px;background-color:olive;line-height:200px">垂直對齊</h1>
</body>
</html>

案例：米商城如下圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="https://www.mi.com/index.html">小米商城</a>
        <a href="https://www.miui.com/" target="_blank">MUMI</a>
        <a href="https://iot.mi.com/" target="_blank">IoT</a>
        <a href="https://i.mi.com/" target="_blank">雲服務</a>
    </div>
</body>
</html>

對于顔色的處理：使用RGB顔色對照表：https://www.917118.com/tool/color_3.html

4、外邊距（兩人離遠一點）margin

margin-top：10px； /* 距上邊*/
margin-left：10px； /* 距左邊*/

margin：10px;   /* 距上下左右邊*/

margin:10px 20px;   /* 距上下邊10px 左右邊20px*/

margin:10px 20px 30px 40px;   /* 距上邊10px 右邊20px 下邊30px 左40px  --> 順時針方向*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
    </style>
</head>
<body>
  <div style="background-color: red;height: 100px"></div>
  <div style="background-color: green;height: 100px;margin-top:10px;"></div>
</body>
</html>

特殊的margin，左右邊距自動=>标簽居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-box{
            height: 300px;
            width: 500px;
            background: gray;
            # 左右居中;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="login-box"></div>
</body>
</html>

常見布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
        .container{
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.miui.com/" target="_blank">MUMI</a>
            <a href="https://iot.mi.com/" target="_blank">IoT</a>
            <a href="https://i.mi.com/" target="_blank">雲服務</a>
            <a href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
        </div>
    </div>

</body>
</html>

5、内邊距（一個人吃胖一點），自己會變大。

padding-left: 10px;  //内邊距距離左邊10

padding：10px；  //内邊距距離上下左右10

padding：10px 20px；  //内邊距距離上下10 距離左右20

padding：10px 20px 30px 40px；  //内邊距距離上10 距離右20 距離下30 距離左40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .header{
            height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;

            line-height:40px;
        }
        .header a{
            display:inline-black;
            text-align:center;
            color: #b0b0b0;
            text-decoration:none;
        }
        .container{
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .header .menu{
            padding: 0 20px; //設定内邊距
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a class="menu" href="https://www.miui.com/" target="_blank">MUMI</a>
            <a class="menu" href="https://iot.mi.com/" target="_blank">IoT</a>
            <a class="menu" href="https://i.mi.com/" target="_blank">雲服務</a>
            <a class="menu" href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
        </div>
    </div>

</body>
</html>

關于内外邊距的提示：

行内标簽設定外邊距和内邊距都是無效的注意使用 display:inline-black;

6、float，頁面布局必不可少的一個樣式，讓标簽左右飄。 float可以讓标簽浮動展示，脫離文檔流。

1）标簽向左瓢

如上的效果代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .item{
            height: 270px;
            width: 180px;
            background-color: olive;
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="course">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

2）标簽左右瓢

如上的效果代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="width: 500px;">
        <div style="float: left">瓢向左邊</div>
        <div style="float: right">瓢向右邊</div>
    </div>
</body>
</html>

沒有瓢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="background-color: green">
        <div>瓢了麼？</div>
    </div>
</body>
</html>

如果瓢：使用笨方法處理（<div style="clear: both"></div>）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<body>
    <div style="background-color: green">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>

<!--        飄了我再給拉回來-->
        <div style="clear: both"></div>
    </div>
</body>
</html>

如果瓢：使用聰明的方法處理（after僞類）

先了解after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:before{
            content: "他們和";
        }
        li:after{
            content:"打籃球";
        }
    </style>
</head>
<body>
    <ul>
        <li>周傑倫</li>
        <li>劉耕宏</li>
    </ul>
</body>
</html>

使用after處理瓢的問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .bg{
          background-color: green;
        }
        .bg:after{
          display: block;
          content: '';
          clear: both;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
</body>
</html>

上面隻是處理一個，要是很多該怎麼處理？如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .bg,.xxx,.hhhh{
          background-color: green;
        }
        .clearfix:after{
          display: block;
          content: '';
          clear: both;
        }
    </style>
</head>
<body>
    <div class="bg clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
    <div class="xxx clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
    <div class="hhhh clearfix">
        <div style="float: left">瓢了</div>
        <div style="float: right">瓢了</div>
    </div>
</body>
</html>

7、hover 滑鼠懸停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        color: red;
      }
      .c1:hover{
        color:green;
      }
    </style>
</head>
<body>
  <div class="c1">中國移動</div>

</body>
</html>

滑鼠懸停後效果

小米案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .top{
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .clearfix:after{
          display: block;
          content: '';
          clear: both;
        }
        .top a{
            display: inline-block;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;

            text-decoration: none;
        }
        .top a:hover{
            color:white;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="container clearfix">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.miui.com/">MUMI</a>
            <a href="https://iot.mi.com/" >IoT</a>
            <a href="https://i.mi.com/" >雲服務</a>
            <div style="float: right">
                <a>登入</a>
                <a>注冊</a>
            </div>
        </div>
    </div>
</body>
</html>

效果如下圖：

8、小米logo菜單案例

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .top {
            background: #333;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both;
        }

        .top a {
            display: inline-block;
            line-height: 40px;
            color: #b0b0b0;
            font-size: 12px;

            text-decoration: none;
        }
        .top a:hover {
            color: white;
        }

        .hd .logo {
            float: left;
            width: 234px;
        }
        .hd .main-menu{
            float: left;
        }
        .hd .main-menu a{
            display: inline-block;
            padding: 40px 20px;
            color: #333;
            text-decoration: none;
        }
        .hd .main-menu a:hover{
            color: #ff6700;
        }
        .hd .search{
            float: right;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="container clearfix">
        <a href="https://www.mi.com/index.html">小米商城</a>
        <a href="https://www.miui.com/">MUMI</a>
        <a href="https://iot.mi.com/">IoT</a>
        <a href="https://i.mi.com/">雲服務</a>
        <div style="float: right">
            <a>登入</a>
            <a>注冊</a>
        </div>
    </div>
</div>
<div class="hd">
    <div class="container clearfix">
        <div class="logo">
            <a href="" style="height: 56px;width: 56px;display: inline-block;margin-top: 20px">
                <img src="imgs/logo-mi2.png" alt="" style="width: 100%">
            </a>
        </div>
        <div class="main-menu">
            <a href="https://www.mi.com/index.html">Xiaomi手機</a>
            <a href="https://www.mi.com/index.html">Redmi手機</a>
            <a href="https://www.mi.com/index.html">電視</a>
            <a href="https://www.mi.com/index.html">筆記本</a>
            <a href="https://www.mi.com/index.html">平闆</a>
        </div>
        <div class="search">
            asdfghj
        </div>
    </div>
</div>
<div class="banner">
    <div class="container">
        <a href="" style="width: 1226px;">
            <img src="imgs/b1.png" alt="" style="width: 100%">
        </a>
    </div>
</div>
</body>
</html>

9、邊框border實作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border: 1px solid #ff6700;
            /*border-right: 1px solid #ff6700;
            border-bottom: 1px solid #ff6700;*/
        }
    </style>
</head>
<body>
    <div class="c1">邊框</div>
</body>
</html>

9.1、場景：當滑鼠移到到某一字型上出現下滑線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 100px;
            width: 300px;
            border: 1px solid #ff6700;
            /*border-right: 1px solid #ff6700;
            border-bottom: 1px solid #ff6700;*/
        }
        .menu{
            display: inline-block;
            padding: 10px;
            margin-right: 20px;

            border-bottom: 2px solid transparent;
        }
        .menu:hover{
            border-bottom: 1px solid #333;
        }
    </style>
</head>
<body>

<div>asdfghjk</div>
<div class="c1">邊框</div>
<a class="menu">菜單1</a>
<a class="menu">菜單2</a>
<a class="menu">菜單3</a>
<div>123456789</div>

</body> </html>

9.2、場景：邊框的圓角設計

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 10px 20px;
            border: 1px solid #ff6700;
            border-radius: 50px;  /* 設計圓角半徑*/
            text-decoration: none;
            background-color: #b0b0b0;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" class="btn">點選跳轉百度</a>
</body>
</html>

10、position定位的使用

10.1、fiexed固定定位：永遠固定在視窗的指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 5000px;background-color: #b0b0b0">傳回頂部案例</div>
    <div style="position: fixed;right: 10px;bottom: 10px;">傳回頂部111</div>
</body>
</html>

案例：登入窗體所在頁面的正中間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-box{
            border: 1px solid red;
            height: 300px;
            width: 500px;
            margin: 0 auto;

            position: fixed;
            left: 0;
            right: 0;
            top: 200px;
        }
    </style>
</head>
<body>
    <!--登入窗體所在頁面的正中間-->
    <div class="login-box">
        登入窗體
    </div>
</body>
</html>

案例：登入窗體+遮罩層+内容層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .middle{
            position: fixed;
            background: #333333;
            left: 0px;
            right: 0;
            top: 0px;
            bottom: 0px;
            opacity: 0.7;
            z-index: 100;
        }
        .outer{
            position: fixed;
            background-color: white;
            height: 100px;
            width: 500px;
            left: 0px;
            right: 0px;
            margin: 0 auto;
            top: 200px;
            z-index:101;
        }
    </style>
</head>
<body>
<!--内容層-->
    <div style="height: 5000px;">
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
        <div>a's'd'f'g'h'j'k</div>
    </div>
<!--最外層z-index:101 值越小表示該部分在最底層-->
<div class="outer">登入窗體</div>
<!--中間層遮罩層-->
<div class="middle"></div>
</body>
</html>

10.2、absolute 絕對定位&relative相對定位

右邊彈窗的出現随左邊的按鈕移動而變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--relative相當于是父，absolute相當于子-->
    <div style="height: 500px; width: 500px;border: 1px solid red;position: relative;">
        <div style="position: absolute;right: 0;top: 0;">xxx</div>
    </div>
</body>
</html>

CSS樣式常見樣式

繼續閱讀

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

HTML addEventListener() 方法和attachEvent()差別分析

web前端布局練手項目

Django之驗證碼（十七）驗證碼

Vue項目 - 單檔案元件和Vue中的路由

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden