div+css

最新推荐文章于 2023-01-03 10:55:02 发布
最新推荐文章于 2023-01-03 10:55:02 发布
阅读量519 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS布局
XUYIGE的博客
11-13 1867
DIV+CSS布局方法 DIV+CSS的网页标准化设计是web标准中的一种新的布局方式，正逐渐代替传统的表格（Table）布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。 DIV+CSS布局的优势： 1、表现和内容分离，便于站点重构页面 DIV+CSS模式具有...
DIV+CSS页面布局
qq_48315043的博客
10-14 4490
一、页面布局 1.确定网页的主体内容，在页面中水平居中显示 2.分析页面中的模块，思考各个模块的排版 3.控制页面中的各个模块到指定位置，完成页面布局 二、CSS的定位机制 1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定) 2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框 3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标) 三、浮动属性 1.浮动：元素脱离原有的标...
标准流,非标准流,盒子模型
菜鸟的奋斗
02-24 5592
标准流/非标准流 流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列 盒子模型 在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(bord
CSS---基础
JMC601的专栏
01-04 712
1、css层叠样式表  2、 div+css是网站标准     div是用于存放内容的（文字、图片等等） css主要用于说明div中的内容的样式（大小，颜色，背景，位置）    好处：1、减少大量的table，tr，td   html变简单        2、内容和样式分离      3、符合搜索引擎的喜好      4、节约带宽 3、初识CSS    〈span style="
标准流与非标准流
逆天骚年的博客
08-26 948
 流：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布局
qq_62898618的博客
01-08 3329
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 4292
使用div+css实现表格布局
div+css网页设计例子
weixin_51286763的博客
09-25 4966
1、float： ❄设置浮动，类似于对齐 ❄如果上个元素没有设置浮动，会自动跑到下一行 如果设置了，会跟在上一个元素后面，这个时候如果不希望继续跟在上一个元素后面，可以用 clear：上一个元素的浮动方式 这样 ⭐详细可以参考这篇博客 经验分享：CSS浮动(float,clear)通俗讲解 ...
DIV+CSS简单登录界面模板
06-06
在网页设计领域，`DIV+CSS`是一种广泛使用的布局技术，它通过定义不同的`Div`（Division，分块）元素并应用相应的`CSS`（Cascading Style Sheets，层叠样式表）样式来构建页面结构和外观。标题提到的“DIV+CSS简单...
DIV+CSS 网页布局心得
09-27
**DIV+CSS网页布局心得** 在网页设计领域，DIV+CSS布局已经成为主流，因为它提供了更加灵活、可维护性更强的页面构建方式。相比于传统的TABLE布局，DIV+CSS更符合Web标准，有助于提升网页的性能和可访问性。下面将...
10天精通DIV+CSS
01-04
DIV+CSS 基础知识点 在本节课中，我们将学习 XHTML 和 CSS 的基础知识，包括文档类型、语言编码、HTML 标签、CSS 样式、CSS 优先级和 CSS 盒模型组成。 一、文档类型 文档类型是指 HTML 文档的类型，包括过渡类型...
DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf
10-30
DIV+CSS网页制作对搜索引擎优化的优势分析整理 DIV+CSS网页制作技术的优势在于其符合W3C国际标准，能够将表现与内容分离，提高搜索引擎对网页的索引效率，提高页面浏览速度，易于维护和改版。同时，DIV+CSS网页...
纯div+css轮播图片切换图片
11-07
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
大学生创业计划书(30)-两份资料.doc
08-20
大学生创业计划书(30)-两份资料.doc
学习DXP编辑多个对像
08-20
DXP编辑多个对像
基于Matlab编程的直线检测实现[Matlab编程].zip
最新发布
08-20
MATLAB提供了多种直线检测技术，其中包括以下几种常用的方法： 1. Hough变换：Hough变换是一种基于极坐标空间的直线检测方法，通过将直线表示为参数空间中的点，将图像中的直线检测问题转化为参数空间中的点集聚类问题。MATLAB中的函数'hough'和'houghlines'可以实现Hough变换直线检测。 2. 边缘检测+RANSAC：先使用边缘检测方法（如Sobel、Canny等）提取图像中的边缘，然后使用RANSAC算法拟合直线模型。MATLAB中的函数'edge'可以进行边缘检测，而函数'fitline'可以使用RANSAC算法进行直线拟合。 3. 直线分段检测：将图像中的直线分段，在每个段上进行直线拟合。常见的方法包括分段最小二乘法、分段Hough变换等。MATLAB中的函数'fitline'可以对图像中的曲线进行分段直线拟合。 4. 基于模型的直线检测：根据直线的几何模型进行直线检测，常见的方法包括RANSAC算法、最小二乘法等。MATLAB中的函数'fitline'可以实现基于模型的直线检测。 以上是一些常用的MATLAB直线检测技术，具体的选择要根据实
网络防火墙：数字世界的守卫者
08-20
【计算机网络开发】通常指的是开发计算机网络相关的软件和系统，包括但不限于以下几个方面： 1. **网络协议开发**：设计和实现用于网络通信的协议，如TCP/IP、HTTP、FTP等。 2. **网络应用开发**：开发运行在网络上的应用程序，如网页浏览器、电子邮件客户端、文件共享应用等。 3. **网络服务开发**：创建和管理网络服务，例如Web服务、数据库服务、云服务等。 4. **网络安全**：开发用于保护网络安全的软件，包括防火墙、入侵检测系统、加密技术等。 5. **网络设备驱动程序开发**：为网络硬件设备编写驱动程序，如网卡、路由器、交换机等。 6. **网络管理工具**：开发用于网络监控、管理和故障排除的工具。 7. **嵌入式网络系统**：开发用于嵌入式设备（如智能家居设备、工业控制系统）的网络功能。 8. **网络编程语言和框架**：使用特定的编程语言和框架（如Python、Java、Node.js等）进行网络应用的开发。 9. **分布式系统开发**：设计和实现分布式计算系统，这些系统可以跨多个物理位置运行。 10. **网络性能优化**：优化网络应用和系统的性能，确保
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值