DIV+CSS 入门

 玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的。牛腩完成。运营商也开始了他真正的学习B/S之旅。

刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的,敲完了回过头来再看,好像明确了一些。BS正在进门中 。写的不正确各位多多指正。

CSS

    总体来说css中包含各种各样的样式属性。用于控制字体,颜色,对齐方式和边距,这些仅仅是网页样式

    的一些方面。

css的样式属性分为两大类。

    布局属性:由影响网页上元素位置的属性(如边距 填充 对其等等)组成 。

    格式化属性,由影响站点中元素的视觉显示的属性(如字体类型,大小,颜色等)组成。


    CSS的层叠

css样式单中的层叠表示样式单规则应用与HTML文档元素的方式。即css样式单中的样式形成一个层次结构。更详细的样式覆盖通用样式。样式规则的优先级有css更具这个层次结构决定,从而实现练级效果。

也能够看成一种类似继承的关系,子类继承父类的特征。基本样式规则适用于整个样式单,但可被更详细的样式规则覆盖。

我们用一个简单的样例看一下。你能猜出以下文本的颜色么?

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="color:green">this text is green.<p style="color:blue"> this text is blue.</p><p> this text is stil green.</p>
</div></span>

结果是这种


                

在这个样例中,颜色green 通过样式属性color 应用于<div>标签。

因此<div>标签本是绿色的。因为<p>标签是<div>标签的子标签。因此绿色的文本样式传递给<p>中的文本

。然而第一个<p>标签覆盖了color样式,将它改为蓝色。最后的结果是,第一段文本是蓝色的,第二段文本为传递而来的绿色。


DIV+CSS

    假设有三个或者很多其它的网页使用类似的格式和字体,我们可能想为它们创建一个样式单,将样式直接应用于网页中的HTML。牛腩中用到的div+css非常像我们以前玩过的给小人穿衣服的游戏。

div 会给我们建造出主要的部件,而由css 决定每个部件的样式是什么。div会告诉我们有帽子,有外套。有首饰,有鞋子。css 就是的各种款式 颜色的衣服和帽子。用比較专业的术语来说就是应用div+css 让结构和表现分离。

             



css盒子模型

    一个网页是被分解成若干区块来控制页面框架的。这些区块都是为了放置 网也不通元素服务的。这就引入了”盒子模型“HTML中的每一个元素被考虑为一个”盒子“,无论这个元素是段落,<div> 还是图像。

盒子有一致的属性。下图是盒子模型的图解。描写叙述了每一个HTML块级元素可能的边框,填充和边距。以及边框 填充和边距的应用方式。换句话说,全部元素的内容和边框之间都有一些填充。

                     


Table与div+css的差别

    HTML中另一类应用table,Table标签就是表格。是用来显示数据的,而不是用来布局网页的,

尽管它有时候布局网页非常easy,可是一个大型的网页假设用表格嵌套的表格来布局的话,对于网

页的显示是极为不利的,由于,一个表格仅仅有在其全然读取完才会显示出来。大型的表格要读取

完须要时间,不利于用户的阅读,用户对网页的等待时间是非常短的,你的网页非常慢非常慢的显示出

来的时候。 用户一般会告诉你“别让我等”。


          DIV+CSS布局最大的长处还在于,网页布局的更改性,哪天你想要改变网页布局的话,仅仅须要更

     改你的CSS文件就可以。而没有必要像曾经那样,又一次编制一份大型的表格嵌套表格的网页布局,

     极大的方便了网页的维护和优化工作。


     注意我们以上讨论的是table布局。

而不是否定table标签的作用。



以上是个HTML一些了解的内容。BS刚开始。

版权声明:本文博客原创文章。博客,未经同意,不得转载。

转载于:https://www.cnblogs.com/hrhguanli/p/4650266.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/358551.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html表单复选框样式,美化表单——自定义checkbox和radio样式

如果你对本站比较观注的话&#xff0c;应该很清楚&#xff0c;前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的&#xff0c;所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了&#xff0c;比如说&#xff1a;我主要是…

BZOJ 3436: 小K的农场( 差分约束 )

orz云神...真的给跪了...BFS版spfa T 掉了...然后DFS版的就A了...我现在很迷茫....这就是个普通的差分约束... ------------------------------------------------------------------------------#include<cstdio>#include<cstring>#include<algorithm>#incl…

CORS同源策略

同源策略 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f;什么是跨域?什么是域名? 什么是同源策略&#xff08;Same Origin Policy&#xff09;&#xff1f; 所谓同源策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口…

[转]hadoop新手错误解决方法

解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z 等一系列问题&#xff0c;ljavalangstring 一&#xff0e;简介 Windows下的 Eclipse上调试Hadoop2代码&#xff0c;所以我们在windows下的Eclipse配置hadoop-eclipse-plugin-2.6…

JSFinder—从js文件中寻找敏感接口和子域名

说在前面 在渗透测试及漏洞挖掘过程中&#xff0c;信息搜集是一个非常重要的步骤。而在网站的JS文件中&#xff0c;会存在各种对测试有帮助的内容。 比如&#xff1a;敏感接口&#xff0c;子域名等。 社区内的文章也有有些关于JS文件提取信息的片段&#xff0c;比如Brupsuit…

计算机四级必背知识点,2019年6月计算机四级数据库工程师必备考点

【导语】2019年6月计算机四级考试备考正在进行中&#xff0c;为了方便考生及时有效的备考&#xff0c;那么&#xff0c;无忧考网为您精心整理了2019年6月计算机四级数据库工程师必备考点&#xff0c;希望对您备考有帮助。如想获取更多计算机等级考试的模拟题及备考资料&#xf…

使用API​​密钥(aka身份验证令牌)部署到Maven Central

如何在不使用未加密本地密码的情况下与Maven Central / Nexus通信&#xff08;尤其是使用Gradle&#xff0c;但不仅限于此&#xff09;。 基本原理 不幸的是&#xff0c;Gradle&#xff08;和许多其他构建工具&#xff09;没有提供任何机制来本地加密密码&#xff08;或至少编…

docker部署nessus+awvs

镜像使用方法 搜索镜像sudo docker search awvs-nessus 然后没有latest标签的镜像&#xff0c;拉取镜像需要使用sudo docker pull leishianquan/awvs-nessus:v03 下载时间有点长&#xff0c;下载后&#xff0c;查看镜像sudo docker images leishianquan/awvs-nessus:v03 盘…

如何取消计算机用户名,Win10如何取消登录界面显示用户名?

Win10如何取消登录界面显示用户名?求之不得&#xff0c;梦寐思服。得到之后&#xff0c;不过尔尔!不知道您为什么求Win10取消登录界面显示用户名的操作方法&#xff0c;个人感觉&#xff0c;结果很令人不习惯。还不如改成直接登陆系统呢!既然搜索&#xff0c;必然有用&#xf…

sqlmap (--os-shell)的使用

文章目录 第一步 搭建存在sql注入的网站第二步 扫描注入点第三步 选择网站的语言第四步 输入网站的绝对路径第五步 查看权限 第一步 搭建存在sql注入的网站 第二步 扫描注入点 python sqlmap.py -u "http://192.168.232.129/cms/show.php?id33" --os-shell第三步…

FOFA网络空间搜索引擎使用教程

FOFA网络空间搜索引擎使用教程 FOFA是白帽汇推出的一款网络空间搜索引擎&#xff0c;它通过进行网络空间测绘&#xff0c;能够帮助研究人员或者企业迅速进行网络资产匹配&#xff0c;例如进行漏洞影响范围分析、应用分布统计、应用流行度排名统计等。 官网&#xff1a;https:…

html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件

LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题&#xff0c;最大化&#xff0c;最小化&#xff0c;面板拖动关闭面板等功能。使用方法使用该Bootstrap面板功能增强插件需要引入jquery&#xff0c;jque…

sqlmap --tamper 绕过WAF脚本分类整理

每当注入的时候看到这个贱贱的提示框&#xff0c;内心有千万只草泥马在奔腾。 但很多时候还是得静下来分析过滤系统到底过滤了哪些参数&#xff0c;该如何绕过。 sqlmap中的tamper给我们带来了很多防过滤的脚本&#xff0c;非常实用&#xff0c;可能有的朋友还不知道怎样才能最…

table 首先冻结_首先记录异常的根本原因

table 首先冻结Logback日志库的0.9.30版本带来了一个很棒的新功能&#xff1a;从根&#xff08;最内部&#xff09;异常而不是最外部异常开始记录堆栈跟踪。 当然&#xff0c;我的激动与我贡献了此功能无关。 用塞西尔德米勒&#xff08;Cecil B. de Mille&#xff09; 的话来形…

Spring Boot框架敏感信息泄露的完整介绍与SRC实战(附专属字典与PoC)

转载于&#xff1a;https://www.freebuf.com/vuls/289710.html #前言##Spring Boot框架介绍Spring框架功能很强大&#xff0c;但是就算是一个很简单的项目&#xff0c;我们也要配置很多东西。因此就有了Spring Boot框架&#xff0c;它的作用很简单&#xff0c;就是帮我们自动配…

从外网Thinkphp3日志泄露到杀入内网域控 - 红队攻击之域内靶机渗透实战演练

1.简要描述 这个工具写完有一段时间了&#xff0c;看网上目前还没有一个thinkphp的漏洞集成检测工具&#xff0c;所以打算开源出来。 2.代码结构 插件化思想&#xff0c;所有的检测插件都plugins目录里&#xff0c;TPscan.py主文件负责集中调度。 插件目录: ThinkPHP 用户…

使用WildFly 9和Jolokia监视DevOps样式

DevOps是当今最热门的话题之一。 而且围绕它的主题范围很广&#xff0c;因此很难真正找到完整的描述或涵盖体面粒度的所有内容。 可以肯定的一件事&#xff1a;最重要的部分之一是提供正确的度量标准和信息以监视应用程序。 Java EE和JMX 监视Java EE服务器的标准方法是JMX。 …

QQ聊天记录恢复、迁移教程(改变默认存储位置、个人文件夹保存位置)

方法一&#xff1a;适用于将原QQ聊天记录存储位置迁移至非系统盘 1、 在想要存储的区域新建文件夹&#xff0c;如&#xff1a; E:\099 Chat Data\Tencent Files\。 2、 打开电脑QQ&#xff0c;设置——文件管理。 3、 点击浏览&#xff0c;选择099 Chat Data下的Tencent Files…

html type=text/css,type=text/css 有什么用啊 ?

用处是告诉浏览器&#xff0c;这段标签内包含的内容是css或text&#xff0c;也就是说如果某种浏览器(特别是wap等手机浏览器械、)不能识别css的&#xff0c;会将代码认为text&#xff0c;从而不显示也不报错。type->类型,这里是style的属性text/css ->文本/css,即css文本…

记一次应急响应到溯源入侵者

文本转载于&#xff1a;https://www.freebuf.com/articles/web/289450.html 1. 前言今年的某月某日&#xff0c;系统监测到客户的一企业官网www.******.com遭到了网页篡改&#xff0c;经过人工确认将浏览器的UA替换为百度UA后访问网站&#xff0c;此时网站链接自动跳转至赌博类…