CSS Pick-up Arrows, Catalogs, Icons Implementation Code

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.

Recommend

Instructions for using the database connection pool Druid

Replace it with the optimal database connection p...

How does Vue solve the cross-domain problem of axios request front end

Table of contents Preface 1. Why do cross-domain ...

Html Select uses the selected attribute to set the default selection

Adding the attribute selected = "selected&quo...

Chrome 4.0 supports GreaseMonkey scripts

GreaseMokey (Chinese people call it Grease Monkey...

Learn SQL query execution order from scratch

The SQL query statement execution order is as fol...

How to install Nginx in CentOS7 and configure automatic startup

1. Download the installation package from the off...

MySQL constraint types and examples

constraint Constraints ensure data integrity and ...

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

background Before starting the article, let’s bri...

MySQL 8.0.12 decompression version installation tutorial

This article shares the installation tutorial of ...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...

Detailed tutorial on installing Python 3.6.6 from scratch on CentOS 7.5

ps: The environment is as the title Install possi...

Vuex implements a simple shopping cart

This article example shares the specific code of ...

Example code for implementing a QR code scanning box with CSS

We usually have a scanning box when we open the c...