CSS Pick-up Arrows, Catalogs, Icons Implementation Code

1. CSS Miscellaneous Icons

There are three ways to create icons:

picture
css (small arrows are made with CSS)
Draw your own font (fontawsome plugin)

After downloading the fontawsome plug-in, unzip it. The new version is different from the old version.

2. Directory structure of html files

xxx project
    - app
      -s1.html
      -s2.html
    - css
      -commons.css
    - script
      - commons.js
    - plugin
      -fontawsome
      - bootstrap
      - ...

3. CSS Miscellaneous: a contains tags

By default, images have a border. This is fine in Chrome, but the border will be displayed in IE Browser, so you need to set the border of the image tag to 0.

<hedad>
    <style>
        img{
            border: 0;
        }
        /* IE browser will generate a border, so set the border to 0 */
    </style>
</head>

<body>
    <a href="wwww.baidu.com">lanxing</a>
    <a href="www.baidu.com">
        <img style="height:300px;width:400px" src="wallpaper1.jpg" alt="lanxing">
    <a>
<body>

4. CSS Tips on Drawing Arrows

<style>
        .up {
            border-top: 30px solid green;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down {
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .c1 {
            border: 30px solid transparent;
            border-top: 30px solid green;
            display: inline-block;
            margin-top: 40px;
        }
        .c1:hover {
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
    <div style="height: 100px; background-color: red;">
        <div class="c1"></div>
    </div>

</body>

Summarize

The above is the implementation code of CSS arrows, directories, and icons introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Analysis of the advantages and disadvantages of MySQL stored procedures

>>: It is not recommended to copy the content in Word directly to the editor on the website.