0

0

DIV+CSS布局样式详解

迷茫

迷茫

发布时间:2017-03-25 11:25:24

|

2102人浏览过

|

来源于php中文网

原创

p+CSS"这种叫法其实是一种不准确的叫法

  在做笔记的最前面必须先给大家纠正一个错误,就是"p+css"这种叫法其实是一种不准确的叫法,是国人给这种布局标准页面的方法起的名字,是对技术理解不够透彻导致的,而标准的叫法是什么呢?呵呵,没错,标准叫法是xhtml+css

  单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法,认为过去布局页面用的是Table,称之为"Table+CSS",而现在布局页面呢,用p,所以叫"p+CSS"。听起来也挺合理,岂不知这种叫法误导了绝大部分网页开发者,将网页制作者引入两大误区:

【误区一】网页中用了Table,页面就不标准,甚至觉得用Table丢人,Table成为了判定页面是否标准的关键点。

【误区二】认为网页中的p标签用的越多越好,甚至有人将页面中所有的标签都替换为p,p的多少,决定页面标准的程度。

  为了能够避免大家进入误区,必须要了解"Table"和"p"这两个网页元素诞生的目的,首先Table诞生的目的是为了存储数据,而p诞生的目的就是为了架设页面结构,两者有不同的工作职能,当需要存储数据的时候用Table是最方便快捷的,比如W3Cfun.com的一个主题页面"浏览器大全",地址是:http://www.w3cfuns.com/portal.php?mod=topic&topicid=6,这个时候肯定用Table 最合适了,而表格外面组成页面结构的部分当然用 p 了,这是由他们两个诞生的目的决定的,也是符合 W3C 标准的, 那么这个页面就是标准页面。

立即学习前端免费学习笔记(深入)”;

  但是p+CSS这种已经深入人心,特别是对于我这种刚学习的菜鸟来说,p+CSS这种叫法更是贴切的多,反正后面我也会用p+CSS这种叫法来解释,至于会不会误导你们就仁者见仁智者见智了,哈哈!我还想评论呢:我猜html5普及以后,会不会被叫做section+css?哈哈,你们说呢?

  ✪什么是W3C标准?

  W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。

与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。

  好了,关于web前端的那点常识讲完了,下面开始做今天的笔记了,对了,由于放寒假了,这个这个,貌似没什么时间写博客了,哈哈,你们懂得。

  ★p+CSS的介绍

  在CSS布局方式中,p是这种布局方式的核心对象,我们的页面排版不再依赖于表格. 仅从p的使用上说,做一个简单的布局只需要两样东西:p与CSS.因此我们称这种布局方式为 p + CSS 布局。

  ● p:布局容器标签

p 是XHTML中指定的,专门用于布局设计的容器标签。用于存放html 元素,文字,图片,视频的元素。内容样式由CSS指定。

  ● CSS:层叠样式表

CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,是用于控制网页样式并允许样式信息与网页内容分离的一种技术。

HMCSS通用企业网站系统1.0
HMCSS通用企业网站系统1.0

HMCSS是由河马工作室全新开发的通用的企业网站系统,是PHP+MYSQL的架构,采用DIV+CSS的方式进行网页布局,网站的功能包括有:企业简介,图片展示幻灯,产品图片滚动,企业荣誉,实力展示,产品分类及展示,网上招聘,在线留言,联系我们,在线地图等内容,另外还带有完整的管理后台,如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本,就是上述的这些内容。后面我们还要加上产品

下载

  ★p+CSS的优势

1.符合 W3C标准,微软等公司均为 W3C支持者。

2.能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制,调整更加方便,现在很多网站均使用p+CSS框架模式,更加印证p+CSS是大势所趋

3.将格式和结构分离,有利于格式的重用及网页的修改维护,在团队开发中更容易分工合作而减少相互关联性

4.CSS的极大优势表现在简介的代码,制作体积更小,下载更快,节省大量带宽,而且众所周知,搜索引擎喜欢简洁的代码。

5.利用CSS样式表,可以将站点上的所有网页都只指向同一个CSS文件,可以实现许多网页同时更新。

  ★应用CSS

基本语法结构 : 选择符{属性:属性值;}

举例:  p{color:red;}   /* CSS的注释方式 */

  引入方式:

【内嵌式】:在HTML文档内部,将CSS代码卸载标记之间,并需要采用


  

【内联式】:选择你想控制的HTML标签,给它添加style属性,注意这种方式的引入CSS,是不需要写选择器的

【链接式】:在实际网站建设中,链接式CSS用法是最常用效果最好的。

新建一个以css为后缀的文件。在里面写入css。

在需要用到该css的HTML内部的

标记中加入link标签,href属性指明外部CSS文件的路径


【导入式】:与链接式的用法基本相同,区别在于语法和使用方法上略有不用。

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 18.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号