用css畫圖標

原創 devincob 2020-06-30 16:14

css3的屬性 transform(轉換) 用途很廣泛，功能也很強大，爲了熟悉它的各種轉換方式(平移 translate，旋轉 rotate，扭曲 skew，放縮 scale)，我做了一些平常常用的一些簡單的圖標。
這些圖標很多是通過三角形來拼貼起來的，所以我們需要知道怎麼樣畫三角形。
前人栽樹：用css畫圖標原文鏈接

  1. 我們要將該 div 的 width 和 height 都設置爲 0，三角形是通過設置 border 來實現；
  2. 通過我們需要畫成的三角形的目標分析，這個三角形的朝向(只針對規則的朝向：上、右、下、左、上左、上右、下右、下左，不規則的朝向可以通過旋轉來實現)；
  3. 如果是上、右、下、左四種中的一種，將朝向的對面的 border-color 設置爲我們需要的顏色，該朝向的這一邊不設置 border，其它兩邊的 border-color 設置爲 transparent；
  4. 如果是上左、上右、下右、下左中的一種，以上右爲例，設置相關的兩邊：上和右的 border-color 設置成我們想要的顏色，其它兩邊的 border-width 設置成 transparent。
  5. border-width 的值就是底邊長和高。
    後記：防丟失
    看幾個例子：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        div {
            margin-left:50px;
            margin-top:50px;
        }
        .top {
            width:0;
            height:0;
            border-bottom:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .bottom {
            width:0;
            height:0;
            border-top:2em solid #000;
            border-right:1.8em solid transparent;
            border-left:1.8em solid transparent;
        }
        .left {
            width:0;
            height:0;
            border-left:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .right {
            width:0;
            height:0;
            border-right:2em solid #000;
            border-bottom:1.8em solid transparent;
            border-top:1.8em solid transparent;
        }
        .bottomLeft {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .bottomLeftRotate {
            width:0;
            height:0;
            border-width:2em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
            transform:rotate(60deg);
        }
        .up {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-bottom:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up:after {
            content:"";
            position:absolute;
            left:50%;
            top:.7em;
            margin-left:-.45em;
            /*寬度的一半，結合 left:50%;
            使用*/
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_right {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .up_right:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.1em;
            margin-top:-.9em;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-bottom:.9em solid transparent;
            border-left:.9em solid #000;
        }
        .up_bottom {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:1.3em;
            background-color:#000;
        }
        .up_bottom:after {
            content:"";
            position:absolute;
            left:50%;
            top:1.1em;
            margin-left:-.9em;
            width:0;
            height:0;
            border-right:.9em solid transparent;
            border-top:.9em solid #000;
            border-left:.9em solid transparent;
        }
        .up_left {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.9em solid transparent;
            border-right:.9em solid #000;
            border-bottom:.9em solid transparent;
        }
        .up_left:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            /*在絕對定位中，top:0;
            bottom:0;
            margin:auto;
            結合使用能豎直居中*/
            left:.7em;
            margin:auto;
            width:1.3em;
            height:.9em;
            background-color:#000;
        }
        .true {
            display:inline-block;
            width:20px;
            height:15px;
            background:black;
            line-height:0;
            font-size:0;
            vertical-align:middle;
            -webkit-transform:rotate(45deg);
        }
        .true:after {
            content:'/';
            display:block;
            width:50px;
            height:15px;
            background:black;
            -webkit-transform:rotate(-90deg) translateY(-5%) translateX(35%);
        }
        .true_one {
            position:relative;
            width:1.2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .true_one:after {
            content:"";
            position:absolute;
            top:.1em;
            left:-.85em;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(60deg);
            transform-origin:right center;
            border-radius:.15em;
        }
        .false {
            position:relative;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(45deg);
            border-radius:.15em;
        }
        .false:after {
            content:"";
            position:absolute;
            width:2em;
            height:.3em;
            background-color:#000;
            transform:rotate(90deg);
            border-radius:.15em;
        }
        .menu {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            background-color:#000;
            border-radius:.3em;
        }
        .menu:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.15em;
            background-color:#fff;
        }
        .menu:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:1.2em;
            height:.9em;
            border-width:.15em;
            border-style:solid none;
            border-color:#fff;
        }
        .menu2 {
            box-sizing:border-box;
            position:relative;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
            cursor:pointer;
        }
        .menu2:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:-.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .menu2:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            left:.75em;
            width:.5em;
            height:.5em;
            background-color:#000;
            border-radius:50%;
        }
        .download {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .download:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.7em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .download:after {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-top:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .upload {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:.8em;
            border-width:.3em;
            border-style:none solid solid;
            border-color:#000;
        }
        .upload:before {
            content:"";
            position:absolute;
            right:0;
            bottom:.2em;
            left:0;
            margin:auto;
            width:.3em;
            height:1em;
            background-color:#000;
        }
        .upload:after {
            content:"";
            position:absolute;
            right:0;
            bottom:1.1em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.6em solid #000;
            border-left:.6em solid transparent;
        }
        .video {
            box-sizing:border-box;
            position:relative;
            width:1.5em;
            height:1.2em;
            background-color:#000;
            border-radius:.3em;
        }
        .video:after {
            content:"";
            position:absolute;
            top:50%;
            left:1.4em;
            margin-top:-.7em;
            width:0;
            height:0;
            border-top:.7em solid transparent;
            border-right:.6em solid #000;
            border-bottom:.7em solid transparent;
        }
        .voice {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            border-width:.2em;
            border-style:none none solid;
            border-color:#000;
            border-radius:50%;
        }
        .voice:before {
            content:"";
            position:absolute;
            right:0;
            left:0;
            bottom:.05em;
            margin:auto;
            width:.8em;
            height:1.3em;
            background-color:#000;
            border-radius:.4em;
        }
        .voice:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.6em;
            left:0;
            margin:auto;
            width:0;
            height:0;
            border-right:.6em solid transparent;
            border-bottom:.4em solid #000;
            border-left:.6em solid transparent;
        }
        .play {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .play:after {
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.3em;
            /*沒有讓其左右居中，因爲看起來右邊更空一些*/
            width:0;
            height:0;
            border-top:.6em solid transparent;
            border-bottom:.6em solid transparent;
            border-left:.9em solid #000;
        }
        .pause {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .pause:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.35em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .pause:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.15em;
            width:.2em;
            height:.9em;
            background-color:#000;
        }
        .previous {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .previous:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.65em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .previous:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.2em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-right:.6em solid #000;
        }
        .next {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .next:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:-.4em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .next:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            bottom:0;
            left:50%;
            margin-top:auto;
            margin-bottom:auto;
            margin-left:.05em;
            width:0;
            height:0;
            border-top:.45em solid transparent;
            border-bottom:.45em solid transparent;
            border-left:.6em solid #000;
        }
        .stop {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:2em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .stop:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.9em;
            height:.9em;
            background-color:#000;
        }
        .position {
            position:relative;
            width:.6em;
            height:.6em;
            border:.4em solid #000;
            border-radius:50%;
        }
        .position:after {
            content:"";
            position:absolute;
            top:.55em;
            left:-.4em;
            width:0;
            height:0;
            border-top:1em solid #000;
            border-right:.7em solid transparent;
            border-left:.7em solid transparent;
            border-top-left-radius:50%;
            border-top-right-radius:50%;
        }
        .pc {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.4em;
            border-width:.2em .2em .3em;
            border-style:solid;
            border-color:#000;
            border-radius:.2em;
            background-color:#efefef;
        }
        .pc:before {
            content:"";
            position:absolute;
            top:1.2em;
            right:0;
            left:0;
            margin:auto;
            width:.6em;
            height:.4em;
            background-color:#000;
        }
        .pc:after {
            content:"";
            position:absolute;
            top:1.6em;
            right:0;
            left:0;
            margin:auto;
            width:1.6em;
            height:.2em;
            background-color:#000;
        }
        .phone {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#efefef;
            border-width:.3em .2em .5em;
            border-style:solid;
            border-color:#000;
            border-radius:.15em;
        }
        .phone:after {
            content:"";
            position:absolute;
            right:0;
            bottom:-.4em;
            left:0;
            margin:auto;
            width:.5em;
            height:.3em;
            background-color:#fff;
            border-radius:.3em;
        }
        .search {
            box-sizing:border-box;
            position:relative;
            width:1em;
            height:.3em;
            background-color:#000;
            border-top-right-radius:.15em;
            border-bottom-right-radius:.15em;
            transform:rotate(40deg);
            transform-origin:right center;
        }
        .search:before {
            content:"";
            position:absolute;
            left:-1.3em;
            bottom:-.6em;
            width:1em;
            height:1em;
            border:.3em solid #000;
            border-radius:50%;
        }
        .star {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
        }
        .star:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(72deg);
        }
        .star:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-1em;
            width:0;
            height:0;
            border-top:.7em solid #000;
            border-right:1em solid transparent;
            border-left:1em solid transparent;
            transform:rotate(-72deg);
        }
        .email {
            box-sizing:border-box;
            position:relative;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:1em;
            transform:rotateY(180deg);
            transform-origin:left center;
            width:0;
            height:0;
            border-width:.7em 1em;
            border-style:solid;
            border-color:transparent transparent #000 #000;
        }
        .email:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-.9em;
            width:0;
            height:0;
            border-top:.6em solid #000;
            border-right:.9em solid transparent;
            border-left:.9em solid transparent;
        }
        .eye {
            box-sizing:border-box;
            position:relative;
            width:2em;
            height:1.2em;
            background-color:#000;
            border-radius:50%;
        }
        .eye:before {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.8em;
            height:.8em;
            background-color:#fff;
            border-radius:50%;
        }
        .eye:after {
            content:"";
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.4em;
            height:.4em;
            background-color:#000;
            border-radius:50%;
        }
        .unlock {
            box-sizing:border-box;
            position:relative;
            width:1.6em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .unlock:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.4em;
            right:-.4em;
            width:1em;
            height:.6em;
            border-width:.2em;
            border-style:solid solid none;
            border-color:#000;
            border-radius:.5em;
        }
        .unlock:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .cup {
            box-sizing:border-box;
            position:relative;
            width:1.3em;
            height:2em;
            border-width:.2em .2em 1.2em;
            border-style:solid;
            border-color:#000;
            background-color:#efefef;
            border-bottom-left-radius:.3em;
            border-bottom-right-radius:.3em;
        }
        .cup:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:.1em;
            left:-.7em;
            width:.7em;
            height:1.4em;
            border-width:.2em;
            border-style:solid;
            border-color:#000;
            border-top-left-radius:.3em;
            border-bottom-left-radius:.3em;
        }
        .heart {
            position:relative;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(-45deg);
            transform-origin:center bottom;
        }
        .heart:after {
            content:"";
            position:absolute;
            top:-.7em;
            left:-.7em;
            width:1.4em;
            height:2em;
            background-color:#000;
            border-top-left-radius:1em;
            border-top-right-radius:1em;
            transform:rotate(90deg);
            transform-origin:center bottom;
        }
        .home {
            box-sizing:border-box;
            position:relative;
            width:1.4em;
            height:1em;
            background-color:#000;
        }
        .home:before {
            content:"";
            position:absolute;
            top:-.7em;
            left:50%;
            margin-left:-1em;
            border-left:1em solid transparent;
            border-right:1em solid transparent;
            border-bottom:.8em solid #000;
        }
        .home:after {
            z-index:2;
            content:"";
            position:absolute;
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            width:.3em;
            height:.5em;
            background-color:#fff;
        }
        .password {
            box-sizing:border-box;
            position:relative;
            width:1.8em;
            height:1.4em;
            background-color:#000;
            border-radius:.2em;
        }
        .password:before {
            box-sizing:border-box;
            content:"";
            position:absolute;
            top:-.6em;
            left:50%;
            margin-left:-.5em;
            width:1em;
            height:1em;
            border:.2em solid #000;
            border-radius:50%;
        }
        .password:after {
            box-sizing:border-box;
            content:"";
            position:absolute;
            bottom:.2em;
            left:50%;
            margin-left:-.15em;
            width:.3em;
            height:.5em;
            border-top-left-radius:.25em;
            border-top-right-radius:.25em;
            background-color:#fff;
        }
        .user {
            box-sizing:border-box;
            position:relative;
            width:.9em;
            height:.9em;
            background-color:#000;
            border-radius:50%;
        }
        .user:after {
            content:"";
            position:absolute;
            top:1em;
            left:50%;
            margin-left:-.9em;
            width:1.8em;
            height:1em;
            background-color:#000;
            border-top-left-radius:.9em;
            border-top-right-radius:.9em;
        }

    </style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottomLeft"></div>
<div class="bottomLeftRotate"></div>
<div class="up"></div>
<div class="up_bottom"></div>
<div class="up_right"></div>
<div class="up_left"></div>
<div class="true"></div>
<div class="true_one"></div>
<div class="false"></div>
<div class="menu"></div>
<div class="menu2"></div>
<div class="download"></div>
<div class="upload"></div>
<div class="video"></div>
<div class="voice"></div>
<div class="play"></div>
<div class="pause"></div>
<div class="previous"></div>
<div class="next"></div>
<div class="stop"></div>
<div class="position"></div>
<div class="pc"></div>
<div class="phone"></div>
<div class="search"></div>
<div class="star"></div>
<div class="email"></div>
<div class="eye"></div>
<div class="unlock"></div>
<div class="cup"></div>
<div class="heart"></div>
<div class="home"></div>
<div class="password"></div>
<div class="user"></div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script></script>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一報（自己積累平時寫法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

幾個簡單的css動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

哀木i 2020-07-08 08:40:28

css消息數量，圓圈數字，購物車數量。

  html:  <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css:  .nav{

blueBings 2020-07-08 07:33:49

一次完整的HTTP服務過程（再整理）

重溫一下計算機網絡的重要知識 例如：當我們在web瀏覽器的地址欄中輸入：www.baidu.com並回車，具體發生了什麼。 第一層理解 對網址進行DNS域名解析，得到對應的公網IP地址 根據這個IP，找到對應的服務器，發起T

wennianzhu 2020-07-08 07:29:39

Js and Css

<div style="border: 1px; border-style: solid; border-collapse: collapse; border-color: Gray" mce_style="border: 1px; bo

海会圣贤 2020-07-08 06:54:55

window print 設置字體大小

<style   type="text/css">     @media   print   {     body   {   font-size:   12px}     }     @media   screen   {     bo

海会圣贤 2020-07-08 06:54:55