当前位置: 开发笔记 > 编程语言 > 正文

div+css第一天

作者：手机用户2602887045_745 | 来源：互联网 | 2023-09-18 11:25

一、在没有出现divcss布局之前，我们都是用传统的table来布局的，但使用table来布局有这么几个缺点：1.显示的样式和数据绑定在一

一、在没有出现div&＃43;css布局之前&＃xff0c;我们都是用传统的table来布局的&＃xff0c;但使用table来布局有这么几个缺点&＃xff1a;

1.显示的样式和数据绑定在一起,不利于维护和扩展

2.布局的时候&＃xff0c;灵活度不高

3.一个页面会存在大量的

元素&＃xff0c;如嵌套的表格&＃xff0c;造成代码冗余

4.增加带宽,针对那种大型网站来说&＃xff0c;多一两百个字节一个月下来都是很可怕的开销

5.不利于搜索引擎的优化

但任何东西都是有两面性的&＃xff0c;使用table布局有以下几个优点&＃xff1a;

1.简单&＃xff0c;容易理解

2.浏览器的兼容性比较好

3.用来显示数据还是比较好的

二、div基本思想

数据和样式要分离

三、div&＃43;css是什么&＃xff1f;

div&＃43;css是目前比较流行的一种网页布局技术。

我们可以这样简单的来理解div&＃43;css

div:用来存放内容(文字、图片、元素等)的容器

css:用于指定放在div中的内容如何显示&＃xff0c;包括这些内容的位置和外观

四、div&＃43;css的优势

要深刻理解div&＃43;css的优越性,我们不得不提到网页设计的三个历史时期table,table&＃43;css,div&＃43;css.

table网页设计&＃xff1a;内容和样式(外观和布局)混合

table&＃43;css网页设计&＃xff1a;table布局&＃xff0c;css指定外观

div&＃43;css网页设计&＃xff1a;div存放内容&＃xff0c;css指定样式(外观和布局),内容和样式彻底分离

优势&＃xff1a;

1.符合W3C标准

2.搜索引擎更加友好

3.样式的调整更加方便

4.内容和结构分离

5.当前主流网站都使用div&＃43;css框架模式&＃xff0c;更加验证了div&＃43;css是大势所趋

注意&＃xff1a;div&＃43;css并不是要我们抛弃table,因为table在显示数据时&＃xff0c;更加方便&＃xff0c;因此在使用div&＃43;css时&＃xff0c;该使用table时&＃xff0c;就得使用table.

五、常用的四种css选择器

1.类选择器

语法&＃xff1a;

.类选择器名称{

　　属性名:属性值;

...

}

2.id选择器

语法:

#id选择器名称{

　　属性名:属性值;

...

}

3.html选择器

语法&＃xff1a;

html标签名{

　　属性名:属性值;

...

}

4.通配符选择器

该选择器可以用到所有的html元素&＃xff0c;但其优先级是最低的。

语法&＃xff1a;

*&＃xff5b;

　　属性名:属性值;

......
&＃xff5d;

六、css滤镜技术

就像当年四川汶川大地震后&＃xff0c;很多网站所有的图片都变成灰色的&＃xff0c;这是怎么实现的呢&＃xff1f;

就是用到了css滤镜。

代码&＃xff1a;

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns&＃61;"http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
5 <title>css滤镜技术title>
6 <style type&＃61;"text/css">
7 img{
8 filter: gray;
9 }
10 style>
11 head>
12 <body>
13 <img width&＃61;"300px" src&＃61;"loginemail.JPG"/>
14 body>
15 html>

只要一句代码就可以让网页中的所有图片变灰色&＃xff0c;是不是很方便。

如果想要鼠标移到图片上的时候&＃xff0c;图片又变回原来的颜色怎么做呢&＃xff1f;

只要给图片加个链接&＃xff0c;然后稍微修改下样式就可以了

代码&＃xff1a;

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns&＃61;"http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" />
5 <title>css滤镜技术title>
6 <style type&＃61;"text/css">
7 a:link img{
8 filter: gray;
9 }
10 a:hover img{
11 filter: &＃39;&＃39;;
12 }
13 style>
14 head>
15 <body>
16 <a href&＃61;"#"><img border&＃61;"0" width&＃61;"300px" src&＃61;"loginemail.JPG"/>a>
17 body>
18 html>

七、margin属性详解

margin:auto|length

检索或设置对象四边的外延边距。

如果提供全部四个参数值&＃xff0c;将按上&＃xff0d;右&＃xff0d;下&＃xff0d;左的顺序作用于四边。

如果只提供一个&＃xff0c;将用于全部的四边。

如果提供两个&＃xff0c;第一个用于上&＃xff0d;下&＃xff0c;第二个用于左&＃xff0d;右。

如果提供三个&＃xff0c;第一个用于上&＃xff0c;第二个用于左&＃xff0d;右&＃xff0c;第三个用于下。

内联对象要使用该属性&＃xff0c;必须先设定对象的height或width属性&＃xff0c;或者设定position属性为absolute。

在IE4&＃43;&＃xff0c;margin属性不可用于td和tr对象。

外延边距始终透明。

转:https://www.cnblogs.com/zzwlovegfj/archive/2012/07/15/2592158.html

推荐阅读

include
STL迭代器的种类及其功能介绍

本文介绍了标准模板库(STL)定义的五种迭代器的种类和功能。通过图表展示了这几种迭代器之间的关系，并详细描述了各个迭代器的功能和使用方法。其中，输入迭代器用于从容器中读取元素，输出迭代器用于向容器中写入元素，正向迭代器是输入迭代器和输出迭代器的组合。本文的目的是帮助读者更好地理解STL迭代器的使用方法和特点。 ... [详细]

蜡笔小新 2023-12-10 15:17:25
utf-8
css适应样式,简述css样式的功能

css自适应字体样式？如果是一排文字，一个background‘red’;就搞定了。是多行的话，只有根据文字行高，用一张背景图横向重复。css样式自适应分辨率高度和宽度尽量使用百分 ... [详细]

蜡笔小新 2023-10-13 13:39:50
filter
抽空写了一个ICON图标的转换程序

抽空写了一个ICON图标的转换程序，支持png\jpe\bmp格式到ico的转换。具体的程序就在下面，如果看的人多，过两天再把思路写一下。 ... [详细]

蜡笔小新 2023-10-17 22:04:30
filter
python3 logging

python3logginghttps:docs.python.org3.5librarylogging.html，先3.5是因为我当前的python版本是3.5之所 ... [详细]

蜡笔小新 2023-10-17 18:11:45
list
前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用？

大家好，我是致力于前端开发，前端设计，前端入门的前端小姐姐，今天为大家带来的前端新知识是【雪碧图和滑动门】，不 ... [详细]

蜡笔小新 2023-10-15 17:45:23
utf-8
使用HTML创建弹出框以便用户输入信息

在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]

蜡笔小新 2023-10-14 08:49:35
utf-8
JavaScript实现拖动对话框效果

原标题：JavaScript实现拖动对话框效果代码实现：<!DOCTYPEhtml><htmllan ... [详细]

蜡笔小新 2023-10-13 11:28:37
perl
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
process
云原生边缘计算之KubeEdge简介及功能特点

本文介绍了云原生边缘计算中的KubeEdge系统，该系统是一个开源系统，用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建，并为网络应用程序提供基础架构支持。同时，KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外，KubeEdge还支持跨平台工作，在私有、公共和混合云中都可以运行。同时，KubeEdge还提供数据管理和数据分析管道引擎的支持。最后，本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]

蜡笔小新 2023-12-14 16:49:01
process
Windows下配置PHP5.6的方法及注意事项

本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项，包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法，如下载缺失的msvcr110.dll文件等。通过本文的指导，读者可以轻松地在Windows系统下配置PHP5.6，并解决一些常见的配置问题。 ... [详细]

蜡笔小新 2023-12-14 12:37:25
utf-8
XML介绍与使用的概述及标签规则

本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]

蜡笔小新 2023-12-13 17:39:50
utf-8
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
utf-8
Android 7自学笔记总结、移动架构视频、安卓面试真题、项目实战源码讲义

本文介绍了Android 7的学习笔记总结，包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容，并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同，否则会出现问题。 ... [详细]

蜡笔小新 2023-12-13 10:06:58
filter
web.py开发web 第八章 Formalchemy 服务端验证方法

本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例，详细说明了对各字段的验证要求，包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]

蜡笔小新 2023-12-12 16:36:00
utf-8
移动端常用单位——rem的使用方法和注意事项

本文介绍了移动端常用的单位rem的使用方法和注意事项，包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值，以适应不同设备的屏幕大小。此外，还提到了rem目前在移动端的主流地位。 ... [详细]

蜡笔小新 2023-12-12 07:20:50

手机用户2602887045_745

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章