Talking about css layout_html/css_WEB-ITnose
Introduction
This layout is based on a cross-section diagram and then converting it into an html page, but the purpose of the introduction is not limited to this specific example, but can be used for all future layout process.
Before we start, there are a few guidelines to guide us to prevent us from going astray, going astray, and being poisoned too deeply:
Every time It's easy to take the first step and test each step with a set of browsers to start the layout, but hitting problems halfway is not what we expect. In order to avoid this from happening, every step we take is tested with a set of browsers. This way you can clearly see how the layout is going and avoid some problems.
Build based on modern browsers, but also be forward compatible. It is best to build layouts based on standards-compliant browsers, but also make some older browsers compatible.
Verify your HTML code and CSS. Verify your HTML code and CSS frequently, so that many layout problems can be solved.
The following two addresses will be helpful to you:
① WC3 HTML validator
② WC3 CSS validator
Step1. Consider the browser requirements Supportability:
Before starting to design a CSS layout, you should think about the browsers you want to support or to what extent. Customers, users, test log files, etc. may be of some help to you.
Step2. View container layout
Look at your design and think about which containers it mainly consists of.
Step3. Name the container
The containers mentioned above will be the containers for placing content in your page layout, so you need to give them a descriptive name Names of their features, like
If these containers are unique to the page, use ID at the end in the tag code instead of class. This is important when writing styles for other elements, because when a conflict occurs, the style identified by ID will override the code identified by class.
Step4. Start writing styles and code
First determine the document type, here we use HTML4.01strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
Then add headers Information and character encoding, etc., name the external style as style.css
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Page title</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <!--[if IE 6]> <link rel="stylesheet" href="ie6.css" type="text/css" media="screen"> <![endif]--> </head>
Finally, add some of the elements we analyzed above:
<body> <div id="container"> <div id="header" title="sitename"> <div id="skipmenu"><a href="#content">Skip to content</a></div> <h1> Sitename </h1> </div> <div id="mainnav"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> <li><a href="#">Section 3</a></li> <li><a href="#">Section 4</a></li> </ul> </div> <div id="menu"> <h3> Archives </h3> <ul> <li><a href="#">December 2014</a></li> <li><a href="#">November 2014</a></li> <li><a href="#">October 2014</a></li> <li><a href="#">September 2014</a></li> <li><a href="#">August 2014</a></li> </ul> <h3> Last 10 Entries </h3> <ul> <li><a href="#">Entry 120 (4)</a></li> <li><a href="#">Entry 119 (0)</a></li> <li><a href="#">Entry 118 (9)</a></li> <li><a href="#">Entry 117 (3)</a></li> </ul> </div> <div id="contents"> <div class="blogentry"> <h2> <a href="#" title="Permanent link to this item">Heading here</a> </h2> <h3> Sunday, 24 August 2014 </h3> <p> <img class="imagefloat" src="flower.jpg" alt="" width="100" height="100"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <ul> <li><a href="#">Comments (4)</a></li> <li><a href="#">Pingbacks (1)</a></li> <li>Category: <a href="#" title="Category">CSS</a></li> </ul> </div> </div> <div id="footer"> Copyright © <a href="http://www.wenboxz.com" target="_blank">文波の小站</a> 2014,All Rights Reserved. </div> </div> </body>
Step6. Specify style
body { margin: 0; padding: 0; background: #ddd; } #container { margin: 1em auto; width: 650px; background: #fff; } #header { background: #CF3; } #mainnav { background: #9F3; } #menu { float: right; width: 165px; background: #6F9; } #contents { float: left; width: 440px; background: #9FC; margin: 0 0 0 20px; } #footer { clear: both; background: #FF9; } Step7. Finally, some detailed work needs to be done
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
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
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
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
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
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.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
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 Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
