div+css网页布局设计新开端（1）
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
以前都是table布局。。现在已经基本不用了（table只用来显示数据）
div中文里是区域的意思，css则是层叠样式表的意思，可见核心是布局，而不是样式
在学习DIV+CSS之前，一定要熟悉HTML，DIV+CSS要在HTML的基础上学习
好了，现在是用什么工具，一般用记事本就可以了 也就是记事本+浏览器就OK，服务器都不需要，也可以用dreamweaver cs5，这个有提示，帮助文档最好下个中文版的CSS样式表手册，这样就齐活啦
以上东西网上很容易找到，也可以在群 web编程开发：197132320 下载，当然也欢迎热爱web编程的朋友加入
下面开始学，首先熟悉下html的基本结构，创建一个html文件test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
当然，你直接在html文件直接输入hello也能正常显示，但这不符合标准
下面认识下div，其实可以把他看作一个容器，或者一个盒子，他是专门盛放内容的
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
但是你在网页上是看不到这个div的，因为他还是透明的
我们需要给他样式让他显示，首先让他的边框显示，宽高度100px，背景色为红色
<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 背景设置红色
如上代码在浏览器显示如下
关闭边栏
CSS主页 > web编程 > CSS >
大中小
div+css网页布局设计新开端（1）
时间：2014-03-09 20:49 点击：709次
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
以前都是table布局。。现在已经基本不用了（table只用来显示数据）
div中文里是区域的意思，css则是层叠样式表的意思，可见核心是布局，而不是样式
在学习DIV+CSS之前，一定要熟悉HTML，DIV+CSS要在HTML的基础上学习
好了，现在是用什么工具，一般用记事本就可以了 也就是记事本+浏览器就OK，服务器都不需要，也可以用dreamweaver cs5，这个有提示，帮助文档最好下个中文版的CSS样式表手册，这样就齐活啦
以上东西网上很容易找到，也可以在群 web编程开发：197132320 下载，当然也欢迎热爱web编程的朋友加入
下面开始学，首先熟悉下html的基本结构，创建一个html文件test.html
<html> <head> <title>这是HTML基本结构</title> <head> <body> hello! </body> </html>
当然，你直接在html文件直接输入hello也能正常显示，但这不符合标准
下面认识下div，其实可以把他看作一个容器，或者一个盒子，他是专门盛放内容的
<html> <head> <title>DIV认识</title> <head> <body> <div>这是一个div</div> </body> </html>
但是你在网页上是看不到这个div的，因为他还是透明的
我们需要给他样式让他显示，首先让他的边框显示，宽高度100px，背景色为红色
<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）！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
38
113
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
