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>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, 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）！
Simulating Mouse MovementApr 22, 2025 am 11:45 AMIf you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides
Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AMWith Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th
Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AMI wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a
In Defense of the Ternary StatementApr 22, 2025 am 11:25 AMSome months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I
Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AMSince the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making
Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AMI remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us
Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AMThe idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there
Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AMLet's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this
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
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Mac version
God-level code editing software (SublimeText3)
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
