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 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 using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
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
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
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
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
