Home > Article > Web Front-end > A new beginning for div+css web page layout design (1)
A new beginning for div+css web page layout design (1)
- 黄舟Original
- 2016-12-29 14:11:021223browse
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）！
Related articles
See more- Why Doesn't "text-decoration: none" Work on :after Pseudo-elements for Links in Print Media?
- Why Does Flexbox in IE10 Render with Unpredictable Widths?
- Is there a browser-compatible alternative to CSS Calc for dynamic dimension calculations?
- How to Add Space Between Rows in a Table Without Using CSS?
- How Can I Dynamically Modify Text on Mouseover using jQuery?