Play with CSS3 (1) CSS3 realizes page layout_html/css_WEB-ITnose
Summary:
CSS3 adds some new layout methods compared to CSS2: multi-column layout and box layout. In this article, we will briefly recall the layout of CSS2 and summarize the layout methods of CSS3.
DIV CSS is actually a wrong name
Regarding the current page layout, many people are used to calling it DIV CSS. In fact, this is A wrong name, the standard name should be called XHTML CSS.
Why is this? The traditional page layout uses Table layout, that is, Table CSS. Later, the layout method using DIV appeared, so people called it DIV CSS, and some people think that pages made with DIV CSS are standard pages. In fact, this sentence The words are relatively narrow.
So what is a standard page? WEB standards consist of three parts: structure, performance and behavior. Among them, the standard languages for structure are XHTML and XML, and the standard language for expression is CSS. Because XML is relatively complex and most browsers do not fully support it, XML is not used to implement page layout. Therefore, the standard page layout should be a page layout that conforms to WEB standards, that is, XHTML CSS.
XHTML not only has DIV tags, but also tags such as a, p, ul, li, dl, dt, etc., so even if DIV tags are not used, the page produced is a standard page. Each tag of XHTML has its own function does not mean that only DIVs can be used to implement page layout (there is a saying in a book: If the whole screen is filled with DIVs, it cannot be considered a standard page)
So, in the future, we must try our best to It is possible to say XHTML CSS, not DIV CSS.
Layout method in the CSS2 era
To put it simply, in the CSS2 era, the floating attribute of float is used. Implement layout.
layout.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left; /*浮动属性，居左对齐，使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left; /*取消左侧浮动*/}#banner{float:right; /*浮动属性，居右对齐，使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right; /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> </div> <div id="footer"> footer </div></div></body></html>
However, using float to implement layout will have some disadvantages, because each div is mutually exclusive Independent, so adding some content to a div will make it impossible to align. CSS3 provides multi-column layout and box layout to make up for this shortcoming.
Multi-column layout
layout.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left; /*浮动属性，居左对齐，使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left; /*取消左侧浮动*/}#banner{float:right; /*浮动属性，居右对齐，使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right; /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;-moz-column-count:4; /*多栏布局：火狐浏览器中需要的格式，表示列数*/-moz-column-gap:10px; /*列之间的间隔*/-moz-column-rule:1px solid red; /*在列之间加一条红色的线*/-webkit-column-count:4; /*多栏布局：safari和chrome需要的格式*/-webkit-column-gap:10px; /*列之间的间隔*/-webkit-column-rule:1px solid red; /*在列之间加一条红色的线*/}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}layout.html
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="header"> <div id="logo"> logo </div> <div id="banner"> banner </div> container </div> <div id="menu"> menu </div> <div id="pageBody"> 内容省略 </div> <div id="footer"> footer </div></div></body></html>
Rendering:
Box layout
hezi.css
/* CSS Document *//*基本信息*/body{margin:0px; /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB; /*背景色*/}/*页面层容器*/#container{ display:-moz-box;display:-webkit-box;}#left_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FF0000}#center_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#00FF00}#right_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FFFF00;}#left_side,#center_side,#right_side{ /*实现盒子布局*/-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}#down_left{-moz-box-flex:1; /*可根据内容自动调整大小，实现弹性盒子，此为火狐下的格式*/-webkit-box-flex:1;padding:20px;margin:20px;background-color:blue;}#down_left{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
<!DOCTYPE><html><head><meta charset="utf-8"><title>布局</title><link href="style/hezi.css" rel="stylesheet" type="text/css" /></head><body><div id="container"> <div id="left_side"> 百度 </div> <div id="center_side"> 谷歌 </div> <div id="right_side"> 淘宝 </div> <div id="down_left"> 亚马逊 </div></div></body></html>
Rendering:
If you want the box to be divided vertically, you can After changing the container to:
#container{ display:-moz-box;display:-webkit-box;-moz-box-orient:vertical; /*垂直分布*/-webkit-box-orient:vertical;}
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
How to copy a page in Word
Feb 20, 2024 am 10:09 AM
Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch
The first choice for CS players: recommended computer configuration
Jan 02, 2024 pm 04:26 PM
1. Processor When choosing a computer configuration, the processor is one of the most important components. For playing games like CS, the performance of the processor directly affects the smoothness and response speed of the game. It is recommended to choose Intel Core i5 or i7 series processors because they have powerful multi-core processing capabilities and high frequencies, and can easily cope with the high requirements of CS. 2. Graphics card Graphics card is one of the important factors in game performance. For shooting games such as CS, the performance of the graphics card directly affects the clarity and smoothness of the game screen. It is recommended to choose NVIDIA GeForce GTX series or AMD Radeon RX series graphics cards. They have excellent graphics processing capabilities and high frame rate output, and can provide a better gaming experience. 3. Memory power
How to customize and edit standby mode on iPhone: What's new in iOS 17
Sep 21, 2023 pm 04:01 PM
Standby is a new feature in the iOS 17 update that provides a new and enhanced way to access information when your phone is idle quickly. With StandBy, you can conveniently check the time, view upcoming events, browse your calendar, get weather updates for your location, and more. Once activated, the iPhone will intuitively enter standby mode when set to landscape while charging. This feature is perfect for wireless charging points like your bedside table, or when you're away from your iPhone charging during daily tasks. It allows you to swipe through various widgets displayed in standby to access different sets of information from various applications. However, you may want to modify these widgets or even delete some based on your preferences and the information you need frequently. So let's dive into
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
How to Rearrange, Disable, and Delete iPhone Home Screen Pages
Nov 29, 2023 am 08:22 AM
In iOS, Apple allows you to disable individual home screen pages on your iPhone. It's also possible to rearrange the order of home screen pages and delete pages directly instead of just disabling them. Here's how it works. How to Rearrange Home Screen Pages Touch and hold Space on the Home screen to enter jitter mode. Tap the row of dots that represent Home screen pages. In the Home screen grid that appears, touch and drag a page to rearrange it relative to other pages. Others move in response to your dragging. When you're happy with your new arrangement, tap "Done" in the upper right corner of the screen, then tap "Done" again to exit dither mode. How to Disable or Remove Home Screen Pages Touch and hold Space on the Home screen to enter dither mode. Tap to represent home screen
Guide to solving misalignment of WordPress web pages
Mar 05, 2024 pm 01:12 PM
Guide to solving misaligned WordPress web pages In WordPress website development, sometimes we encounter web page elements that are misaligned. This may be due to screen sizes on different devices, browser compatibility, or improper CSS style settings. To solve this misalignment, we need to carefully analyze the problem, find possible causes, and debug and repair it step by step. This article will share some common WordPress web page misalignment problems and corresponding solutions, and provide specific code examples to help develop
How to implement page jump in 3 seconds: PHP Programming Guide
Mar 25, 2024 am 10:42 AM
Title: Implementation method of page jump in 3 seconds: PHP Programming Guide In web development, page jump is a common operation. Generally, we use meta tags in HTML or JavaScript methods to jump to pages. However, in some specific cases, we need to perform page jumps on the server side. This article will introduce how to use PHP programming to implement a function that automatically jumps to a specified page within 3 seconds, and will also give specific code examples. The basic principle of page jump using PHP. PHP is a kind of
How to deal with the problem that Laravel page cannot display CSS correctly
Mar 10, 2024 am 11:33 AM
"Methods to handle Laravel pages that cannot display CSS correctly, need specific code examples" When using the Laravel framework to develop web applications, sometimes you will encounter the problem that the page cannot display CSS styles correctly, which may cause the page to render abnormal styles. Affect user experience. This article will introduce some methods to deal with the failure of Laravel pages to display CSS correctly, and provide specific code examples to help developers solve this common problem. 1. Check the file path. First check the path of the CSS file.
