css3 common codes

CSS 3 text horizontal scrolling effect .marquee { height: 2rem; width: 100%; line-height: 2rem; background: #FFF5E3; color: #FF9D00; padding: 0 .7rem; font-size: .8rem; overflow: hidden; position: relative; div { display: block; width: 300%; height: 2rem; position: absolute; over ...

Posted on Sat, 02 May 2020 17:07:00 -0400 by Barand

CSS elements are vertically centered. What about unknown height?

1. In line text elements html part: <div class="container1"> <span>Center elements vertically in row</span> </div> css Part: /*public*/ body,div{ margin: 0; } /*1.Inline text element*/ .container1{ background: beige; } .container1 span{ display: inline-block; padding-top: 20px; padding-bottom: ...

Posted on Fri, 01 May 2020 17:57:21 -0400 by gotserv

css Layout - Summary of methods for the Nine Palace Layout (Updating...)

Catalog: Negative margin implementation Grandfather and father should be in and out Change your mind - li has a son to help. Adaptive grid layout with absolute bearing values cloumn multi-column layout grid display: table; css3 selector nth-child() Unless otherwise specified, the general html structure for the following ways ...

Posted on Tue, 14 Apr 2020 19:59:12 -0400 by aximbigfan

The css3 method of Html and matplotlib method of Python 3 to realize the special effect analysis of wave syllable animation

Thanks for sharing- http://bjbsair.com/2020-04-10/tech-info/53349.html 1. Description: 1.1 Recommendation Index: ★★★ 1.2 be familiar with the related knowledge of html css3, show python's powerful and matplotlib advanced drawing method, and be familiar with the related programming knowledge and thinking. 1.3 this analysis is easy to understand ...

Posted on Fri, 10 Apr 2020 10:16:49 -0400 by stevegg1965

Introduction to web front end to practice: css foundation float

float to achieve the effect of text surrounding pictures: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> < style > body {font family: 'Microsoft YaHei'; } .per{ width: 400px; border: 1px solid #CCC; padding: 5px; } .red{ width: 100px; he ...

Posted on Sat, 04 Apr 2020 15:09:45 -0400 by aktell

[003] adaptive block level elements horizontally centered

The horizontal centering methods described in the previous sections all require a fixed width of elements, but they can't help the block level elements that want to be adaptive. At this time, we can use the transformation property of CSS3 to achieve the effect. <!DOCTYPE html> <html lang="en"> <head> ...

Posted on Sat, 04 Apr 2020 08:55:15 -0400 by Vasudhevan

CSS3 counter

Reference resources http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/ Reference resources https://www.w3cplus.com/css3/css-counters.html Definition name syntax description counter-reset [<indentifier> <integer>?]+|none |inherit Defines the counter and initia ...

Posted on Sat, 04 Apr 2020 05:05:55 -0400 by Brink Kale

jQuery tutorial 08 - property filter selector

Property filter selector of jQuery selector The attribute selector allows you to locate an element based on attributes. You can specify only one attribute of this element, so that all elements using this attribute regardless of its value will be located, and you can also be more specific and locate elements using speci ...

Posted on Sat, 04 Apr 2020 00:35:57 -0400 by baze

less Beginners: nesting rules, @ arguments, avoid compiling,! important

less: nesting ruleshtml: <ul class="list"> <li><a href="#">Test text</a><span>Test success</span></li> <li><a href="#">Test text</a><span>Test success</span></li> <li><a href="#">Test text</a><span>Test suc ...

Posted on Thu, 02 Apr 2020 01:46:15 -0400 by websteve

CSS unknown width height element horizontal vertical center

Method 1 Idea: display setting parent element is: table, child element is: cell table, so you can use vertical align: Center to achieve horizontal center Advantage: the parent element can dynamically change the height (the characteristic of table element) Disadvantage: not supported under IE8 <!DOCTYPE html> <ht ...

Posted on Thu, 26 Mar 2020 12:21:35 -0400 by satyricon