Category : css

Realize three-column layout and middle adaptation (margin negative method) <!–放第一行–> <div class=”middle”>middle</div> <div class=”left”>left</div> <div class=”right”>right</div> body { margin: 0; padding: 0; } .left, .right { height: 300px; width: 200px; float: left; } .right { margin-left: -200px; background-color: red; } .left { margin-left: -100%; background-color: #00ff00; } .middle { height: 300px; width: 100%; float: left; ..

Read more

1. Compatible with all browsers to display semitransparent effects <div class=”transparent”></div> .transparent { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: .5; width: 200px; height: 200px; margin: 0 auto; background: url(“../img/pic.jpg”); } 2、_height,_widthThe role of Use_heightSolvefloatThedivThe problem of not closing can be_heightAttribute removal can achieve the effect. <div id=”wrap”> <div class=”column_left”> <h1>Float left</h1> </div> <div class=”column_right”> ..

Read more

H5 series Ten Ways to Optimize Page Loading Speed Essay classification-HTML5 40 Most Important Technical Points in HTML5 Meta collation Details of Web Performance Management HTML5 offline cache -manifest introduction JS series Writing High Performance JavaScript Interesting JavaScript Native Array Function JavaScript Data Access Performance Optimization Scheme Nine Sorting Algorithms Implemented by JavaScript Javascript-Arguments Object ..

Read more

HTML5 Using FileReader to Preview Front-end Pictures How to get all checkbox in the page? (No Third Party Framework) JavaScript Template Engine Instances Javascript Implement JS function overload JS Cross Browser Binding Event Function JS monomer mode Object method defined using prototype property Closure Implements Result Caching Closures Implement Encapsulation Closures Implement Classes and Inheritance ..

Read more

Recently, I have been sorting out the technical details of the whole stack development and writing a document for easy searching. I share this site here.Address:Full stack development Full stack development HTML5/CSS3 HTML element Semantic label CSS3 style CSS selector CSS inheritance properties CSS3 Core Module CSS box model CSS background image CSS clear float ..

Read more

Front-end development interview questions Site address:Full stack developmentOriginal link:Front-end development interview questions HTML Doctype effect? What are the differences between standard mode and compatible mode? 1、<! DOCTYPE>The declaration is located on the first line in the HTML document, at<html>Before labeling, tell the browser’s parser what document standard to parse with. The absence or incorrect format ..

Read more

After finishing the book “High Performance JavaScript”, we need to deal with “CSS World” quickly. This book on CSS features is very worth reading. It is complete in content, prominent in key points, strong in actual combat, and just wordy. Because the book has too much content and needs to be sorted out bit by ..

Read more

Sites:Front-end development documentOriginal:CSS selectorOriginal:CSS inheritance propertiesOriginal:CSS3 Core ModuleOriginal text:CSS box modelOriginal text:CSS background imageOriginal text:CSS clear floatOriginal text:CSS positioning CSS selector Union: Grouping selectors. Grouped selectors can share the same declaration. UsecommaSeparate the selectors that need grouping. h1,h2,h3,h4,h5,h6{} Intersection: Both attributes belong to the same element. p.name{}、p#id{}、.name1.name2{} Descendants (Derived): Defines styles based on the relationship ..

Read more

Recommend reading the original text Original link:Vertical Center of Web Page Design This series is a vertical centering solution frequently used in web page design, which is summarized in detail through this article. Useline-heightCenter vertically <p class=”codepen” data-height=”300″ data-theme-id=”0″ data-default-tab=”result” data-user=”whjin” data-slug-hash=”EMdevR” style=”height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid ..

Read more

Naming Forbidden Abbreviations To be concise and to the pointclassNaming, do not use custom abbreviations. class nameThe naming of must be behavioral and semantic. It is forbidden to write under non-special circumstances.! important CSS has its own weight design and can be used arbitrarily.! importantIt will cause weight confusion and cannot be maintained. The width ..

Read more

Links:Front-end optimization Front-end optimization The browser sends an HTTP request, and the server returns an HTTP response after receiving the full request, ending the process after the browser receives it. The browser and the server have only one chance to interact. The browser initiates actively, while the server passively returns the result according to the ..

Read more

Original link:Front-end plug-in librarySites:Front-end development documentBlog:Front-end plug-in library Front-end plug-in library DataTables Official website:https://www.datatables.net/ DataTables is a JavaScript function library of jQuery. Its purpose is to strengthen table operations (such as searching and sorting) and automatically add components into tables. It is very flexible and easy to use. LazyLoad Official website:Lazy LoadExtension:Vanilla JavaScript Lazy Load ..

Read more