首页 > css教程 > 正文

利用CSS的float属性实现二级响应式页面

原创 2018-11-09 16:26:19 0 1021
赞助会员专享特权
本篇文章给大家介绍的内容是关于利用CSS的float属性实现二级响应式页面,内容很详细,有一定的参考价值。

话不多说,直接来看正文~

我们使用float:left属性来实现二级响应式页面(推荐课程:CSS视频教程

代码如下:

LRColumnSimple.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
 <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img width="200" src="image/flower.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img width="200" src="image/flowers.jpg"/></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img width="200" src="image/fruit.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img width="200" src="image/greatwall.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img width="200" src="image/1.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img width="200" src="image/keiskei.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimple.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
 float:left;  
 width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {  
clear:left;
}

在浏览器上的效果如下:

360截图20181109150248602.jpg

补充:将图像在显示在框架中间

在框架的中间显示图像的话,需要设置为图像设置text-align:center。

代码如下:

LRColumnSimpleImageCenter.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/flowers.jpg"/></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

效果如下:图像在中间显示

360截图20181109151145431.jpg

在页面上的响应式显示

LRColumnSimpleResponsiveW1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
<meta charset="utf-8" />
</head>
<body>
   <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/flowers.jpg"/></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW1.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
  float:left;  
  width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {
  clear:left;
}

效果如下:

360截图20181109152730312.jpg

如果您在此处缩小宽度,它将会变为如下图所示。它用浮动左对齐,但由于宽度变窄,它变成一个包裹的显示。此时,当图像在右边界上时,图像的说明文本显示在图像上,左边的说明文本显示在图像的底部。

360截图20181109153211562.jpg

响应的例子:

在先前的HTML中,存在如下问题:当窗口宽度变窄并且框架被折叠时,说明文字的位置不能成为同一位置的问题。我来介绍避免这种现象的代码。

LRColumnSimpleResponsiveW2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
	<meta charset="utf-8" />
	</head>
	<body>
     <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/flowers.jpg" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW2.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.EndColumn {
  clear:both;
}

说明:

TextColumnA和ImageColumnA类用于左侧的描述性文本,而框架用于显示右侧的图像。对于这些类,指定了float:left,并且前面描述的描述性语句位于左侧,图像位于右侧。另一方面,TextColumnB和ImageColumnB类用于右侧的描述性文本,而框架用于显示左侧的图像。在这些类中,指定了float:right,因此前面描述的描述性文本将放在右侧,图像将放在左侧。

当窗口宽度变窄时,先前描述的框架首先显示在float:left的框架中。即使在指定了float:right的帧中,也会首先执行前面描述的描述性语句的放置,因此描述框架的文字将显示在图像上方。

效果如下:

360截图20181109160646336.jpg

减小窗口的宽度。框架将折叠,但描述文字将在图像上均匀显示。

360截图20181109160818774.jpg

下面我们来看一个基于前面代码的实际例子

LRColumnSimpleResponsive.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="image/flower.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="image/flowers.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="image/fruit.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="image/greatwall.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img src="image/1.jpg" /></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img src="image/keiskei.jpg" /></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsive.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnA img{
  width:200px;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnB img{
  width:200px;
}
.EndColumn {
  clear:both;
}
@media screen and (max-width: 760px) {
   .Container {
       width:95%;
  }  
  .TextColumnA {
      float:none;    
      width:100%;
  }  
  .ImageColumnA {
      float:none;    
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  }  
  .ImageColumnA img{
      width:80%;
  }  
  .TextColumnB {
      width:100%;
  }  
  .ImageColumnB {
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  } 
  .ImageColumnB img{
      width:80%;
  }
}

说明:

它与前面的代码相同,但如果使用CSS媒体查询并且Web浏览器的宽度为760像素或更小,则将float设置为none并取消该列。此外,图像显示的屏幕宽度为80%。它由此在一列中显示。

效果如下:

360截图20181109162041745.jpg

如果窗口的宽度是760像素或更多,则它显示在两列中。

360截图20181109162201329.jpg

当窗口的宽度变为760像素或更小时,它变为一列。图像的宽度也是横向宽度的80%。

360截图20181109162305201.jpg

360截图20181109162402744.jpg

以上就是利用CSS的float属性实现二级响应式页面的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:float属性
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 深入理解和应用Float属性
  • css中Float属性
  • CSS使用float属性设置浮动元素的方法介绍
  • css中Float属性详解
  • css的float属性怎么用?css浮动属性float的详解
  • 前端float怎么用?float属性详解
  • float是什么?float属性详解
  • 利用CSS的float属性实现二级响应式页面
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • HTML+CSS  轻松入门教程 HTML+CSS 轻松入门教程
  • Css3入门基础视频教程 Css3入门基础视频教程
  • Css3入门视频教程 Css3入门视频教程
  • 野秀堂HTML5+CSS3视频教程 野秀堂HTML5+CSS3视频教程
  • 相关视频章节