div+css

最新推荐文章于 2024-01-15 12:13:32 发布
最新推荐文章于 2024-01-15 12:13:32 发布
阅读量544 收藏
点赞数
分类专栏： 3-2Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzzky/article/details/44682715
版权

 div+css

 

Div+css 是什么?

Div+css 是一种目前比较流行的网页布局技术

Div 来存放需要显示的数据(文字，图表..) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果

原理图如下 ：


1 分钟前 上传

下载附件 (22.16 KB)

有时后，我们也可能把css直接嵌入到html文件中，这种方式称为内联css

基本语法:

<style>

1 分钟前上传

下载附件 (50.38KB)

选择器{

       属性: 属性值;

    …

}

</style>


我们可以简单的这样理解div+css:

div 是用于存放内容(文字,图片,元素)的容器。

css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.

快速入门案例(体验案例)


1 分钟前上传

下载附件 (8.33 KB)

Demo.html

<html>

<head>

<title>css入门小案例</title>

<!--引入我们的css-->

<link rel="stylesheet"type="text/css" href="my.css" />

</head>

<body>

<div class="style1">

<img src="2.jpg"/>

</div>

</body>

</html>

My.css

.style1{

       /*宽度 */

       width: 400px;

       height: 300px; /*一定要写一个分号*/

       background-color:silver;

       border:1px solid red;

       margin-left:400px;

       margin-top:250px;

       padding-top:20px;

       padding-left:40px;

}


网页设计的三个时期

①   table 网页设计

②   table+css 网页设计

③   div+css 网页设计

11讲 初识css 类选择器 id选择器 html选择器

更新时间:2012年09月27日12时13分 来源:

css使用必要性1. 可以很好的统一网站的显示风格.

 

css使用的基本语法

选择器{

属性1: 属性值;

属性2: 属性值;

….

}


15 分钟前上传

下载附件 (7.12 KB)


Html文件:

<html>

<!--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->

<link rel="stylesheet" type="text/css"href="demo2.css"/>

<body>

<!--span元素通常用于存放小块内容-->

<span class="s1">栏目一</span>

<span class="s1">栏目二</span>

<span class="s1">栏目三</span>

<span class="s1">栏目四</span>

<span class="s1">栏目五</span>

</body>

</html>

 

Css文件：

/*.s1 用术语类选择器*/

.s1{

       color: blue;

       font-size: 30px;

       font-style:italic;

       text-decoration:underline;

}

.s2{

       color:yellow;

       font-size:12px;

}

.s3{

       color:blue;

       font-style:italic;

}

.s4{

       color:green;

       font-weight:bold;

}

.s5{

       color:#9C3131;

}

 

Css必要性2 可以使用滤镜

 

<html>

<head>

<!--如何把css直接嵌入到html文件(内联css)-->

<style type="text/css">

       a:link img{

             filter:gray;

       }

       a:hover img{

             filter:"";

       }

</style>

</head>

<body>

<a href="3"><imgsrc="2.jpg"/></a>

<a href="3"><imgsrc="3.jpg"/></a>

<a href="3"><imgsrc="4.jpg"/></a>

<a href="3"><imgsrc="cat1.jpg"/></a>

</body>

</html>

 


Css中常用的四种选择器

1.      类选择器(class选择器)

 

基本使用

.类选择器{

   属性名: 属性值;

       ….

}

 

2.      id选择器

 

基本使用

#id选择器{

   属性名: 属性值;

       ….

}

 

案例:

/*id选择器的使用*/

#id1{

       background-color:silver;

       font-size:40px;

}

 

3.      html元素选择器

 

某个html元素{

   属性名:属性值;

       …

}

 

Table{

}

P{

}

 

Button{

}

 

//对html元素样式分类

P:cls{

}

<p class=”cls”></P>

 

需求人员(技术+行业背景)

财务软件(php,c++)->用友[]

 

4.      通配符选择器

 

☞ css 文件可以使用在各种文件(php,html,jsp,asp…)

 

*{

}

12讲 通配符选择器 父子选择器

更新时间:2012年09月28日13时46分 来源:

1.      通配符选择器

☞ css 文件可以使用在各种文件(php,html,jsp,asp…)

*{

}

案例:

再比如，我们希望所有的超链接

    (1)默认样式是黑色，24px,没有下划线

    (2)当鼠标移动到超链接时，自动出现下划线

    (3)点击后,超链接变成红色。这又该怎么实现呢? [test.html]

a:link{

      color:black;

      text-decoration:none;

      font-size:24px;

}

a:hover{

      text-decoration:underline;

      font-size:40px;

      color:green;

}

a:visited{

      color:red;

}

/*对同一中html元素分类*/

p.cls1{

      color:blue;

      font-size:30px;

}

p.cls2{

      color:red;

      font-size:20px;

}

     通配符选取器

该选择器可以用到所有的html元素,但是其优先权最低

*{

       属性名:属性值;

   ….

}

☞四个选取器优先权

Id选择器> class选择器> html选择器> 通配符选则器

了解->细节->深入了解->应用项目

     选择器的细节问题!

1.      父子选择器使用:

/*父子选择器*/

#id1 span{

       color:red;

       font-style:italic;

}

☞上面选择器的含义是:

在 id选择器为 id1 的子元素  span的样式就是。。。。

<div id=”id1”>

<span>xxxxx</span>

</div>

X   


4 分钟前上传

下载附件 (2.21 KB)


<div class=”cls”>

<span>xx</span>

</div>

#id1 span span {

       color:green;

}

#id1 span span a{

       color:blue;

}

通过上面总结:

①    父子选择器可以有多级(但是在实际开发中不要过三层)

②    父子选择器有严格的层级关系

13讲 选择器使用细节 块元素和行内元素 盒子模型 盒子模型经典应用①

更新时间:2012年10月05日11时40分 来源:

通过上面总结:

①    父子选择器可以有多级(但是在实际开发中不要过三层)

②    父子选择器有严格的层级关系

③    父子选择器不局限于什么类型选择器

比如

#id span span

.s1 #id span

div #id .s2

1.      一个元素可以同时有id选择器和class选择器

案例:

<span class="s1"id="news_specail">新闻一</span>

2.      一个元素最多有一个id选择器，但是可以有多个类选择器

使用方法如下:

<元素 class=”类选择器1 类选择器2” />

Html部分

<span class="cls1 s1">新闻三</span>

Css部分:

/*给新闻三再配置一个class选择器*/

.cls1{

       font-style:italic;

       text-decoration:underline;

       color:blue;

       background-color:silver;

}

.s1{

       background-color:pink;

       font-weight:bold;

       font-size:16px;

       color:black;

}

特别注意: 当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准！

3.      我们可以把某个css文件中的选择器共有的部分，独立出来写一份比如:

.ad_stu {

width: 136px;

height: 196px;

background-color: #FC7E8C;

margin: 5px 0 0 6px;

float: left;

}

/*广告2*/

.ad_2 {

background: #7CF574;

height: 196px;

width: 457px;

float: left;

margin: 5px 0 0 6px;

}

/*房地产广告*/

.ad_house {

background: #7CF574;

height: 196px;

width: 152px;

float: left;

margin: 5px 0 0 6px;

}

//上面的css 可以写成:

/*招生广告*/

.ad_stu {

width: 136px;

background-color: #FC7E8C;

}

/*广告2*/

.ad_2 {

background: #7CF574;

width: 457px;

}

/*房地产广告*/

.ad_house {

background: #7CF574;

width: 152px;

}

.ad_stu , .ad_2, .ad_house{

height: 196px;

float:left;

margin: 5px 0 0 6px;

}

4.      说明css文件本身也会被浏览器从服务器下载到本地，才能显示效果.


行内元素和块元素

快速入门案例:


从案例我们看出，行内元素它只占能显示自己内容的宽度，而且他不会占据整行

块元素它不管自己的内容有多少，会占据整行，而且会换行显示

   常见的行内元素有 <a> <span> <inputype=”xxx”>

   常见块元素有<div> <p>

<html>

<head>

<link rel="stylesheet"type="text/css" href="element.css"/>

</head>

<body>

<span class="s1">span1</span>

<spanclass="s1">span2</span><input type="text"name="username"/>

<div class="s2">div1</div>

<div class="s2">div2</div><inputtype="text" name="username"/>

<p style="background-color:silver">这是一个段落</p>

</body>

</html>

行内元素和块元素可以转换

使用

Display: inline 表示使用行内元素方式显示

Display: block 表示使用块元素方式显示

Css文件之间的相互引用指令(mvc)


标准流和非标准流

流: html元素在网页中显示的顺序.

标准流: 在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示.

非标准流：在html 文件中，当某个元素脱离的标准流，那么它就处于非标准流

Css中的盒子模型

盒子模型的示意图:


盒子模型的经典案例:


Html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>盒子模型案例</title>

<link rel="stylesheet"type="text/css" href="box1.css"/>

</head>

<body>

<div class="div1">

<img src="aa.bmp"/>

</div>

</body>

</html>

Css文件：

body{

border:1px solid red;/* 1px 表示边框的宽度 solid 实线 red 表示颜色*/

width: 500px;

height: 500px;

/*如果让body自动居中*/

margin:0 auto; /*第一个用于上－下，第二个用于左－右。auto表示自动居中*/

}

/*盒子模型的概念 : margin, padding, border content */

.div1{

       width:50px;

       height:52px;

       border:1px solid blue;

/*    margin-top:5px;

       margin-left:5px;*/

       margin: 5px 0px 0px 5px;

       /*padding-top:35px;*/

}

.div1 img{

       width:40px;

       height:40px;

       margin-top:5px;

       margin-left:5px;

}

14讲 盒子模型经典应用② 作业布置

 

盒子模型的综合案例2


分析:思路

基本结构

<div>

<ul>

<li><img src=””/></li>

</ul>

</div>

Html文件:

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML4.01Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<linkrel="stylesheet"type="text/css"href="box2.css"/>

</head>

<body>

<!--div在布局起到一个控制整个内容显示的位置-->

<divclass="div1">

<!--ul在布局中作用是可以控制显示内容多少-->

<ulclass="faceul">

<li>

<imgsrc="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

<li>

<img src="aa.bmp" />

</li>

</ul>

</div>

</body>

</html>

Css文件

.div1{

       width:500px;

       height:300px;

       border:1px solid gray;

       margin-left:200px;

}

.faceul{

       width:400px;

       height:250px;

       border:1px solid red;

       padding-left:5px;

       margin-left:10px;

}

.faceul li{

       list-style-type:none;

       float:left;/*左浮动，这个知识点后面说*/

       width:50px;

       height:52px;

       border:1px solid red;

       margin-right:15px;

       margin-top:15px;

      

}

.faceul li img{

       margin-left:5px;

       margin-top:5px;

       width: 40px;

       height:40px;

}

作业 ：


三天的内容自己小结:


 

YZZKY
关注
专栏目录
DIV+CSS布局
XUYIGE的博客
11-13 1931
DIV+CSS布局方法 DIV+CSS的网页标准化设计是web标准中的一种新的布局方式，正逐渐代替传统的表格（Table）布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。 DIV+CSS布局的优势： 1、表现和内容分离，便于站点重构页面 DIV+CSS模式具有...
纯div+css轮播图片切换图片
11-07
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
标准流,非标准流,盒子模型
菜鸟的奋斗
02-24 5626
标准流/非标准流 流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列 盒子模型 在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(bord
CSS---基础
JMC601的专栏
01-04 733
1、css层叠样式表  2、 div+css是网站标准     div是用于存放内容的（文字、图片等等） css主要用于说明div中的内容的样式（大小，颜色，背景，位置）    好处：1、减少大量的table，tr，td   html变简单        2、内容和样式分离      3、符合搜索引擎的喜好      4、节约带宽 3、初识CSS    〈span style="
标准流与非标准流
逆天骚年的博客
08-26 971
 流：html元素在网页中显示的顺序 标准流：在html文件中，写在前面的元素在前面显示，写在后面的html在后面显示 非标准流：在html文件中，当某个元素脱离标准流，那么它就处于非标准流 右浮动：一个元素向右浮动，让出自己在标准流占据的空间，向右移动知道碰到包含自己的父元素的最右边的边框 左浮动：匀速尽量向左边移动，这样就让出它右面的空间，让别的块元素显示 清除浮动
HTML网页设计制作大作业（div+css）
热门推荐
IT_A_bin的博客
11-25 10万+
话不多说，直接上效果图： 历史介绍 行政区划： 地理环境 著名景点： 美食小吃 工艺品 联系我们 部分项目结构 老师要求的十几个页面20几张图片以及一些跳转，使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒，就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话可以联系我呀。 大家加油！奥利给！ ...............
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
网页设计（五）DIV+CSS布局规划
.正函数.的博客
01-15 3350
DIV+CSS布局是一种常用的网页设计技术，能够更好地实现页面结构和样式的分离。通过合理规划DIV块的布局，结合CSS样式设置，可以实现网页的自适应、响应式等效果，提升用户体验。
div+css布局
qq_62898618的博客
01-08 3393
1. position属性：用于定义一个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定） 1.1 absolute:绝对定位，距top和left的距离，一般与js结合使用，比如页面漂浮的广告。 1.2 relative：相对定位，指的是相对自己默认的位置。 1.3 static：默认 1.4 fixed：固定 2. z-index属性：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 ...
使用div+css实现表格布局
徐同保的专栏
01-03 4452
使用div+css实现表格布局
DIV+CSS布局（一）
weixin_50632313的博客
09-23 1783
1.当父元素div不设置宽高且所有元素都不设置浮动时，父元素div会感知子元素的宽高，所以下面例子中，div的高为子元素的总高，又因为div是独占一行的，所以下面例子中div的宽度是满宽。6.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。1.将绿色和蓝色的div右浮动，并将红色div的宽和高设置为300px,证明浮动元素不占据位置，将元素排除在普通流之外。5.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。7.在父元素div不设置宽高的情况下，让父元素可以感知子类的高度。
DIV+CSS简单登录界面模板
06-06
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf
10-30
DIV+CSS网页制作对搜索引擎优化的优势分析整理 DIV+CSS网页制作技术的优势在于其符合W3C国际标准，能够将表现与内容分离，提高搜索引擎对网页的索引效率，提高页面浏览速度，易于维护和改版。同时，DIV+CSS网页...
使用div+css开发个人网站毕业设计.doc
05-26
《使用div+css开发个人网站毕业设计》这篇文档详尽阐述了使用div+css技术进行个人网站开发的全过程，从理论知识到实际操作，再到后期的测试和维护，为读者提供了一份全面的指导。 首先，文章介绍了网站开发的背景，...
DIV+CSS.rar_DIV_css+div_div+css_html+div+css_web前端
09-22
【描述】提到的"css+div 的入门教程"，暗示了该资源可能包含一系列关于如何使用 `div` 元素配合 `CSS` 进行网页设计和布局的教学内容。`div` 作为网页布局的基本构建块，常通过 `CSS` 设置样式属性，如宽度、高度、...
stays mad 反PCL宣传库。Anti PCL pro.zip
10-31
stays mad 反PCL宣传库。Anti PCL pro
伊犁师范大学在四川2020-2024各专业最低录取分数及位次表.pdf
10-31
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
yolo算法-植物数据集-1417张图像带标签adamweeds.zip
最新发布
10-31
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
clickhouse-jdbc驱动jar文件用于建立jdbc链接
10-31
clickhouse-jdbc驱动jar文件用于建立jdbc链接
Div+CSS布局完全指南
首先，教程从div+css布局入门开始，讲解了XHTML下css+div布局的基本概念和方法。DOCTYPE是网页声明的重要部分，教程中详细阐述了其作用和不同类型的DOCTYPE选择，以及DOCTYPE对浏览器解析的影响。 接着，教程介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值