Several methods of horizontal center of html elements

Next, I will introduce several ways to horizontally center html elements one by one 1: Text align: Center; for inline elements 2: Using margin:0 auto; to realize horizontal center display 3: Implement with table 4, Block level elements, however, are horizontally centered by converting them to inline elements 5: Both parent and child ele ...

Posted by fatalcure on Sat, 02 May 2020 09:41:04 +0200

Modifying input[type=radio] style with css3

Modifying input[type=radio] style with css3 You need to use the radio button input[type=radio] when making a project, but the default style is not consistent with the UI design, so you need to modify the default style, as shown in the following figure. When searching, we find that some of the implementations are realized by us ...

Posted by dannyb785 on Sun, 05 Jan 2020 23:01:58 +0100

Navigation bar scale rotation at the same time (css3 animation)

Sometimes when I get used to the conventional navigation bar, I suddenly want to make my navigation bar look cool and different. Let's see. The function of this article is that when you click the small icon of the navigation bar, the navigation bar will rotate in the center of the page, and when you click to retract the naviga ...

Posted by fr0stx on Sat, 28 Dec 2019 16:35:29 +0100

Two schemes for users to customize the theme color of a project

Preface You should have seen many websites that can change the theme or theme color. If you want to change the built-in scheme, you can directly replace the css file, we won't talk about it. This article introduces a simple scheme of user-defined theme color replacement! 1. Relevant knowledge points 1.1 CSSStyleSheet.insertRule() CSSStyleSheet ...

Posted by Black Rider on Tue, 03 Dec 2019 16:36:48 +0100

web front-end entry to reality: css realizes wavy lines and cubes

Here is to use linear-gradient to achieve, that is, drawing circles, and then using the background color to cover part of the circle; using the css3 attribute perspective s and rotation to achieve the cube 1.css realizes wave line html <div class="card-list"> <div class="wave-container"&g ...

Posted by InfinityChiken on Tue, 01 Oct 2019 07:52:05 +0200

CSS3 and Page Layout Learning Notes: Summary, Selector, Particularity and Scaling Unit

Links to the original text: https://www.mk2048.com/blog/blog.php?id=b120jakkj&title=CSS3%E4%B8%8E%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89%E2%80%94%E2%80%94%E6%A6%82%E8%A6%81%E3%80%81%E9%80%89%E6%8B%A9%E5%99%A8%E3%80%81%E7%89 ...

Posted by mtombs on Mon, 16 Sep 2019 12:49:39 +0200

Mobile End Roadmap Adaptive

How is it displayed under the big screen? Fixed the height of the container (e.g. 410px), changed the rotation map to background display. Since the height of possible pictures is not necessarily 410px, the background-size in css3 needs to be set. ...

Posted by lawnmowerman on Tue, 03 Sep 2019 04:39:20 +0200

Page Foundation Layout Related Knowledge-Centralization-Classic Layout

Preface PS: These are just personal learning, only for the reference of ideas, may be defective, and are tested in chrome, not necessarily applicable to other browsers, and do not consider IE, remember!! PS: 2008/03/23 was revised, the style was reformed, and some new methods and principles were introduced. It is suggested to know the basic kno ...

Posted by jaoudestudios on Fri, 02 Aug 2019 08:11:24 +0200

Front-end Animation Theme: Inspiring Button Effects

This article is from "Xintan Blog" Of Animation Design Button Effect More articles GithubWelcome exchanges and Star A list of special effects Slide box: Jelly: Pulse: Flash of light: Bubble: Sliding box special effect Design sketch principle Because the button element can use before/after pseudo-elements, the cover layer in the ...

Posted by thesaleboat on Fri, 02 Aug 2019 05:03:51 +0200

Media queries, common layouts on mobile, and more

Media Query If you've used the bootstrap framework, you should be familiar with media queries!(Link to bootstrap: bootstrap Chinese Network) Volume queries are CSS styles that can be set based on the characteristics of the device's display (viewport width, screen scale, device orientation - horizontal or vertical, etc.) Why does responsive des ...

Posted by Nick~C on Sat, 13 Jul 2019 19:09:40 +0200