如何让一个div随网页大小而变动

时间：2025-03-03 08:09:09

1.新建一个HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>

<body>
</body>
</html>

2.使用css初始化body和div的内外边距

body,div{margin: 0;padding: 0;}

3.创建一个div，主要用于包围内部的div，设置其class属性为con。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>

<body>
  <div class="con">
   
  </div>
</body>
</html>

4.使用css设置class为con的div宽度为100%，即占满整个网页

.con{width: 100%;margin: 0 auto;}

5.在类名为con的div内，创建三个div， 类名分别为con1，con2，con3。

注：为了实现div随网页的大小变化而变化，内部div宽度加起来总的宽度必须为100%。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
</head>

<body>
  <div class="con">
   <div class="con1"></div>
   <div class="con2"></div>
   <div class="con3"></div>
  </div>
</body>
</html>

css样式
.con1{
width:20%
}
.con2{
width:30%
}
.con3{
width:50%
}

相关文章