Implementation of Tab navigation bar switching
preface
Tab navigation bar switching is very common in web page scenarios. This paper will introduce how to use js to realize interactive navigation bar.
analysis: 1. When the mouse clicks the corresponding tab above, the contents of the box below will change 2. Click an option, the current background color will turn red, the font wi ...
Posted by Marijnn on Sat, 29 Jan 2022 05:53:58 +0100
Completion report of Web Application Foundation Course
What did you do
This website briefly introduces Hal's mobile Castle animation, which is divided into six pages: website home page, plot introduction, character introduction, author introduction, film introduction and contact us. Page display Unable to upload pictures, failed all the time, but failed to solve the problem of selecting the pi ...
Posted by codepoet on Fri, 28 Jan 2022 08:31:45 +0100
HTML5 - CSS's four compound selectors use details, and Emmet syntax summary
CSS composite selector
In CSS, the selector can be divided into basic selector and compound selector according to the type of selector. The compound selector is formed by combining the basic selector based on the basic selector
The compound selector can select the target element (label) more accurately and efficientlyCompound selector i ...
Posted by gdhanasekar on Thu, 27 Jan 2022 17:35:08 +0100
What is floating? Impact of floating? How to clear float?
Floating introduction
At first, the purpose of floating is to arrange text around pictures, just like the mixed arrangement of pictures and texts on newspapers. But} Web developers quickly realized that anything can float, not just images, so the use of floating expanded. Floating has been used to realize the layout of the whole website page, w ...
Posted by wyrd33 on Thu, 27 Jan 2022 12:15:14 +0100
Introduction to CSS Basics
1, CSS concept
CSS: is the English abbreviation of Cascading Style Sheets. CSS is usually called CSS style sheet or cascading style sheet (cascading style sheet). It is mainly used to set the appearance display styles such as text content (such as text font, size, alignment, etc.), picture shape (such as width, height, border style, margin, et ...
Posted by lill77 on Wed, 26 Jan 2022 15:51:30 +0100
CSS to achieve Ant Design official website Logo egg effect
In recent projects Ant Design There are a lot of connections, which is very good. i don't know if you have found such an effect. On the official website, if you put the mouse on the Logo, the icon on the letter i will change constantly. After leaving, it will stop and change again. It can be regarded as a small colored egg (maybe i didn't find ...
Posted by djfox on Wed, 26 Jan 2022 08:27:45 +0100
css child element selects the implementation of the parent element
In css, elements cannot be selected forward, that is, parent elements or former sibling elements cannot be selected; This is subject to DOM rendering rules; In fact, html is a rendering mechanism from the outer layer to the inner layer; If you can render up, there will be problems such as rendering disorder and performance;
Change the position ...
Posted by andyhoneycutt on Wed, 26 Jan 2022 07:02:47 +0100
Cutting exercise notes - staggered floating version
Staggered floating plate
target
Step 1.
Basic architecture. The item contains picture blocks and text blocks. The size of the picture is 600x350
<body>
<div class="wrap">
<!-- item 1 -->
<div class="item">
<div class="pic">
<img src="https://picsum.photos/6 ...
Posted by walkonet on Tue, 25 Jan 2022 17:23:25 +0100
Css simple learning
preface
This article introduces the use of Css combined with HTML. It is a reference for back-end learners, not a front-end professional article.
catalogue
1, Basic concept and usage of CSS
1.1 basic concept of css
1.2. Benefits of using Css:
1.3. Use of css
2, Selector
2.1 selector definition
2.2 classification
3, Attributes
IV. ca ...
Posted by pootergeist on Tue, 25 Jan 2022 02:36:52 +0100
Basic learning of CSS -- element display mode & background
Learning content
1. Element display mode of CSS
1.1 what is the element display mode
The element display mode is how elements (labels) are displayed. For example, < div > occupies one line. For example, multiple < span > can be placed in one line.
HTML elements are generally divided into two types: block elements and inline elem ...
Posted by tmaiden on Mon, 24 Jan 2022 02:26:46 +0100