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

MySQL Basics in 1 Hour

Table of contents Getting Started with MySQL MySQ...

Let's talk in depth about the principle and implementation of new in JS

Table of contents definition Constructor bodies a...

The latest 36 high-quality free English fonts shared

01. Infinity Font Download 02. Banda Font Download...

Detailed steps to install Mysql5.7.19 using yum on Centos7

There is no mysql by default in the yum source of...

Join operation in Mysql

Types of joins 1. Inner join: The fields in the t...

A brief discussion on the pitfalls of react useEffect closure

Problem code Look at a closure problem code cause...

The perfect solution for highlighting keywords in HTML

I recently encountered a feature while working on...

Detailed explanation of JavaScript object conversion to primitive value

Table of contents Object.prototype.valueOf() Obje...

Based on JavaScript ES new features let and const keywords

Table of contents 1. let keyword 1.1 Basic Usage ...

HTML line spacing setting methods and problems

To set the line spacing of <p></p>, us...

Deploy Nginx+Flask+Mongo application using Docker

Nginx is used as the server, Mongo is used as the...

Linux debugging tools that developers and operators must look at [Recommended]

System performance expert Brendan D. Gregg update...

Vue2.x configures routing navigation guards to implement user login and exit

Table of contents Preface 1. Configure routing na...

A question about border-radius value setting

Problem Record Today I was going to complete a sm...