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
How to add interface listening mask in Vue project
1. Business Background Using a mask layer to shie...
Sample code for implementing mobile expansion and collapse effects with pure CSS3
This article introduces the sample code for imple...
Example of implementing text wrapping in html (mixed text and images in html)
1. Text around the image If we use the normal one...
My CSS architecture concept - it varies from person to person, there is no best, only suitable
Preface <br />I have been working in the fro...
Detailed explanation of React event binding
1. What is In react applications, event names are...
Simple tutorial on using Navicat For MySQL
recommend: Navicat for MySQL 15 Registration and ...
Detailed explanation of MySQL covering index
concept If the index contains all the data that m...
MySQL intercepts the sql statement of the string function
1. left(name,4) intercepts the 4 characters on th...
CentOS 6.5 installation mysql5.7 tutorial
1. New Features MySQL 5.7 is an exciting mileston...
My CSS framework - base.css (reset browser default style)
Copy code The code is as follows: @charset "...
MySQL data analysis storage engine example explanation
Table of contents 1. Introduce cases 2. View the ...
Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker
Write at the beginning This article only covers E...
Two ways to implement HTML to randomly drag content positions
Test: Chrome v80.0.3987.122 is normal There are t...
A brief analysis of CSS :is() and :where() coming to browsers soon
Preview versions of Safari (Technology Preview 10...
Detailed explanation of the observer mode starting from the component value transfer of Vue
Table of contents Observer Pattern Vue pass value...