Nested div elements allow you to define more CSS rules to control presentation. For example, you can give #navcontainer a rule to center the list on the right, and #globalnav a rule to center the list on the left. Another completely different performance of #subnav's list.
Replace traditional methods with CSS
The following list will help you replace traditional methods with CSS:
HTML attributes and corresponding CSS methods HTML attributes CSS methods Description align="left"
align="right" float: left;
Float: right; Use CSS to float any element: pictures, paragraphs, divs, titles, tables , list, etc.
When you use the float attribute, you must define a width for the floating element.
marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; Using CSS, margin can be set on any element, not just the body element. More importantly , you can specify the margin values of the top, right, bottom and left elements respectively.
In HTML, the color of the link is defined as an attribute value of the body. The link style is the same throughout the page. Using CSS selectors, link styles can be different in different parts of the page.
bgcolor="#FFFFFF" background-color: #fff; In CSS, the background color can be defined for any element, not just body and table elements.
bordercolor="#FFFFFF" border-color: #fff; Any element can set a border (boeder), you can define top, right, bottom and left respectively
border="3 "
cellspacing="3" border-width: 3px; Using CSS, you can define the table's border as a unified style, or you can define the color, size and style of the top, right, bottom and left borders respectively.
You can use table, td or th selectors.
If you need to set a borderless effect, you can use CSS definition: border-collapse: collapse;
< ;br clear="left">
clear: left;
clear: right;
clear: both;
Many 2-column or 3-column layouts use the float attribute for positioning. If you define a background color or background image in the floating layer, you can use the clear attribute.
cellpadding="3"
vspace="3"
hspace= "3" padding: 3px; Using CSS, the padding attribute can be set on any element. Similarly, padding can be set on top, right, bottom and left respectively. padding is transparent.
align="center" text-align: center;
margin-right: auto; margin-left: auto; Text-align only works for text.
Block-level elements like div and p can be horizontally centered using margin-right: auto; and margin-left: auto;
Some regrettable techniques and working conditions
Due to the imperfect support of CSS by browsers, we sometimes have to adopt some tricks (hacks) or establish an environment (Workarounds) to allow CSS to achieve the same effect as traditional methods. For example, block-level elements sometimes need to use horizontal centering techniques, box model bug techniques, etc. All of these techniques are detailed in Molly Holzschlag’s article Integrated Web Design: Strategies for Long-Term CSS Hack Management.
Another great resource on CSS techniques is “Position is Everything” by Big John and Holly Bergevin.
The so-called Web2.0 is to realize programmers’ dreams: "What You Think is What You Get." DIV is used to describe What You Think. CSS determines What You Get after defining What You Think.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
