教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 304 CSS
HTML里如何用css控制div画田子格布局
来源：互联网
2023-03-16 19:17:40 451
html初学者最开始的要接触的就是div布局与css控制，今天大鹏教大家在html里使用CSS控制div完成一个“田子格”的布局。
工具/原料
- 写字板
- 浏览器
方法/步骤
【规划思路】
田字格布局，要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的，现在要做的是把四个大小相同的方块，排列成“田”字，如下图所示构思。
第一步、新建html文档并搭建框架
新建一个TXT文档，重命名为“田子格布局.html”，然后用记事本打开，输入表头信息，已经html整体框架搭建。包括head与body。如下图所示。
第二步、DIV布局
分别复制4个不同的div作为4部分，并且分别命名为不同id；显示内容为块1、块2、块3、块4。
【提示】div在html里是单独占一列的（如果不控制），现在4个div布局完成。
【代码如下】
/head>
body>
div id="prat1">块1/div>
div id="prat2">块2/div>
div id="prat3">块3/div>
div id="prat4">块4/div>
/body>
/html>
第三步、CSS控制4个DIV显示
输入style然后开始对4个div进行控制，分别对四个块进行大小和颜色的设定，处理之后在浏览器中打开显示如下图所示。
【提示】由于是田子格，所以四个div大小应该相同，为了可以区分颜色分别采用不同的颜色。
【代码如下】
style>
#prat1{
width: 200px;
height: 200px;
background: blue;/*边长200像素的蓝色方块*/
}
#prat2{
width: 200px;
height: 200px;
background: red;/*边长200像素的蓝色方块*/
}
#prat3{
width: 200px;
height: 200px;
background: yellow;/*边长200像素的蓝色方块*/
}
#prat4{
width: 200px;
height: 200px;
background: green;/*边长200像素的蓝色方块*/
}
/style>
第四步、使用浮动
在CSS里控制输入float：left；四个div全部输入一样内容，这时候看到的是四个并排的div，而没有达到想要的效果，如下图所示。
【代码如下】
style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
/style>
第五步、清除浮动
在第三块上使用清除浮动clear：left；其余的代码保持不变，然后保存代码，刷新打开的页面，就会看到一个田字格了，如下图所示。
【代码如下】
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三块的就可以了。
【完整的代码】
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html>
head>
meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
title>田字格布局/title>
style>
#prat1{
width: 200px;
height: 200px;
background: blue;
float: left;
}
#prat2{
width: 200px;
height: 200px;
background: red;
float: left;
}
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
}
#prat4{
width: 200px;
height: 200px;
background: green;
float: left;
}
/style>
/head>
body>
div id="prat1">块1/div>
div id="prat2">块2/div>
div id="prat3">块3/div>
div id="prat4">块4/div>
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 453 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 299 CSS