CSS Pick-up Arrows, Catalogs, Icons Implementation Code
|
1. CSS Miscellaneous Icons There are three ways to create icons:
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! |
<<: 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
Vue-cli creates a project and analyzes the project structure
Table of contents 1. Enter a directory and create...
Installing Windows Server 2008 operating system on a virtual machine
This article introduces the installation of Windo...
How to install openssh from source code in centos 7
Environment: CentOS 7.1.1503 Minimum Installation...
Detailed explanation of obtaining, assigning, and registering radio values in HTML
1. Radio grouping As long as the name is the same,...
Detailed explanation of the use of MySQL DML statements
Preface: In the previous article, we mainly intro...
Sample code for implementing multi-application deployment using tomcat+nginx
Table of contents Multi-application deployment 1-...
In-depth study of JavaScript array deduplication problem
Table of contents Preface 👀 Start researching 🐱🏍...
The three new indexes added in MySQL 8 are hidden, descending, and functions
Table of contents Hidden, descending, and functio...
In-depth explanation of MySQL learning engine, explain and permissions
engine Introduction Innodb engine The Innodb engi...
How to use CSS to write different styles according to sub-elements
The effect we need to achieve: What is needed The...
Analysis of the ideas of implementing vertical tables in two ways in Vue project
Problem Description In our projects, horizontal t...
Perfect solution to MySQL common insufficient memory startup failure
1. If MySQL is not started successfully, check th...
How to connect to virtual machine MySQL using VScode in window environment
1. Virtual Machine Side 1. Find the mysql configu...
Win10 install Linux ubuntu-18.04 dual system (installation guide)
I installed a Linux Ubuntu system on my computer....
VMware Workstation Pro 16 Graphic Tutorial on Building CentOS8 Virtual Machine Cluster
Table of contents Preparation Install VMware Work...