A new beginning for div+css web page layout design (1)
DIV+CSS is one of the commonly used terms in website standards (or "WEB standards"). div+css is a web page layout method. This web page layout method is different from the traditional HTML web page design language. The table positioning method can realize the separation of web page content and presentation. XHTML is the abbreviation of The Extensible HyperText Markup Language. XHTML is based on Extensible Markup Language (XML), which is a new language optimized and improved on the basis of HTML. The purpose is to adapt to more needs of future network applications based on XML applications and powerful data conversion capabilities. In the XHTML website design standards, table positioning technology is no longer used, but DIV+CSS is used to achieve various positioning.
It used to be table layout. . It is basically no longer used (table is only used to display data)
div means area in Chinese, and css means cascading style sheet. It can be seen that the core is layout, not style.
I am learning DIV Before +CSS, you must be familiar with HTML. DIV+CSS must be learned on the basis of HTML
Okay, what tool are you using now? Generally, Notepad is enough, that is, Notepad + browser is OK. , you don’t need a server, you can also use Dreamweaver CS5. There are tips for this. It is best to download the Chinese version of the CSS style sheet manual for the help document, so that you can get everything done.
The above things are easy to find online, and you can Download in the group web programming development: 197132320. Of course, friends who love web programming are also welcome to join
Let’s start learning. First, familiarize yourself with the basic structure of html and create an html file test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
Of course, you can also display it normally if you directly input hello into the html file, but this does not meet the standards.
Now let’s get to know div. In fact, it can be regarded as a container or a box, which is dedicated to holding content. ’s
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
But you can’t see this div on the web page, because it is still transparent
We need to give it a style to display, first let its border display, width and height 100px, the background color is red
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
Every html tag has a style attribute, and div is no exception of course
border: solid 1px border means the css border attribute solid 1px is its two values Pay attention to the space
solid means the border is displayed 1px means the border width is 1 pixel
What is a pixel? See here http://baike.baidu.com/view/575.htm
width:100px ;height:100px; is to set the width and height of the div. Pay attention to the value of each attribute: Use;
background:red to separate the attributes. Set the background to red
The above code will be displayed in the browser as follows
It used to be table layout. . It is basically no longer used (table is only used to display data)
div means area in Chinese, and css means cascading style sheet. It can be seen that the core is layout, not style.
I am learning DIV Before +CSS, you must be familiar with HTML. DIV+CSS must be learned on the basis of HTML
Okay, what tool are you using now? Generally, Notepad is enough, that is, Notepad + browser is OK. , you don’t need a server, you can also use Dreamweaver CS5. There are tips for this. It is best to download the Chinese version of the CSS style sheet manual for the help document, so that you can get everything done.
The above things are easy to find online, and you can Download in the group web programming development: 197132320. Of course, friends who love web programming are also welcome to join
Let’s start learning. First, familiarize yourself with the basic structure of html and create an html file test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
Now let’s get to know div. In fact, it can be regarded as a container or a box, which is dedicated to holding content. ’s
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
We need to give it a style to display, first let its border display, width and height 100px, background color is red
<html> <head> <title>DIV认识</title> <head> <body> <div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div> </body> </html>
每一个html标签都有style属性，div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm
width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色
如上代码在浏览器显示如下
还得提一下，浏览器最好用IE8 谷歌浏览器，火狐浏览器，360的也可以
因为他们支持css标准还算兼容，别的浏览器就说不准了，你看的结果可能不一样
css浏览器兼容日后再说
引入css样式除了上面一种，还有两种
一种是外部样式引入，特别推荐这种，一种是内部样式
外部样式引入需要在head标签里加
另外还的在html文件相同目录下创建mystyle.css文件
内部样式是直接在head写入，由于贴子特殊性，本贴全部用内部样式，这样看的舒服点，但在实际中最好用外部样式引入
这是内部样式
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>这比之前要规范多了，body里也看的简单多了，要多多用这种样式与内容分离模式
如果是这种
<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>两种样式你觉得它会采用哪个？
style属性这种是内联样式
这就是优先级问题，它会采用离它最近的那个，也就是style属性里的
同样，如果外部样式与内部样式相同，它会优先采用内部样式的
如果不是全部都相同，它会把不同的合并起来，相同的就优先采用内部样式的
优先级
内联》内部》外部
以上就是div+css网页布局设计新开端（1）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1393
52
37
110
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
