为什么将css与html放在一起的效果与将css和html分别以文件形式存储后效果不一样呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蓝天草地</title>
</head>
<style type="text/css" media="screen">
.lantian{
width:100%;
height: 750px;
background:linear-gradient(rgb(196,228,253),#FFF);
}
.caodi{
width:100%;
height:500px;
background:linear-gradient(#FFF,rgb(148,190,89));
}
.cloud{
width:300px;
height:100px;
background:#FFFFFF;
border-radius: 100px;
position: relative;
top:150px;
left:800px;
}
.cloud::before{
content:"";
width:100px;
height:100px;
background:#FFFFFF;
border-radius:150px;
position:absolute;
top:-20px;
left:30px;
}
.cloud::after{
content:"";
width:150px;
height:150px;
background:#FFFFFF;
border-radius: 200px;
position: absolute;
top:-50px;
left:100px;
}
.big{
-webkit-transform: translate(400px,-80px)
scale(0.9);
-moz-transform: translate(400px,-80px) scale(0.9);
-ms-transform: translate(400px,-80px) scale(0.9);
-o-transform: translate(400px,-80px) scale(0.9);
transform: translate(400px,-80px) scale(0.9);
}
.small1{
-webkit-transform: translate(70px,-80px)
scale(0.7);
-moz-transform: translate(70px,-80px) scale(0.7);
-ms-transform: translate(70px,-80px) scale(0.7);
-o-transform: translate(70px,-80px) scale(0.7);
transform: translate(70px,-80px) scale(0.7);
}
.small2{
-webkit-transform: translate(500px,-100px)
scale(0.5);
-moz-transform: translate(500px,-100px) scale(0.5);
-ms-transform: translate(500px,-100px) scale(0.5);
-o-transform: translate(500px,-100px) scale(0.5);
transform: translate(500px,-100px) scale(0.5);
}
.small3{
-webkit-transform: translate(800px,-300px)
scale(0.5);
-moz-transform: translate(800px,-300px) scale(0.5);
-ms-transform: translate(800px,-300px) scale(0.5);
-o-transform: translate(800px,-300px) scale(0.5);
transform: translate(800px,-300px) scale(0.5);
}
.small4{
-webkit-transform: translate(900px,-300px)
scale(0.4);
-moz-transform: translate(900px,-300px) scale(0.5);
-ms-transform: translate(900px,-300px) scale(0.5);
-o-transform: translate(900px,-300px) scale(0.5);
transform: translate(900px,-300px) scale(0.5);
}
h1{
text-align:center;
color:#abcdef;
font-size: 50px;
}
</style>
<body>
<div>
<div class="cloud big"></div>
<div class="cloud small1"></div>
<div class="cloud small2"></div>
<div class="cloud small3"></div>
<div class="cloud small4"></div>
</div>
<div>
<h1>I LOVE U</h1>
</div>
</body>
</html>
正在回答
①出现大片空白是因为云朵使用的是position:relative;相对定位不会脱离文档流，也就是说，你虽然设置了定位，元素移动到了你想要的位置，但是relative会留下空白的占位；因此右侧出现大片空白
②你粘贴过来的HTML文件里缺少<div class="lantian"></div>和<div class="caodi"></div>两个盒子
③页面背景颜色需要全屏显示并且没有滚动条，建议高度使用vh作为单位，并且蓝天：草地=6:4（vh是长度单位，1vh等于视窗的1%，可以查阅相关资料进行了解）
④建议给cloud设置position:absolute;;绝对定位；
⑤建议给h1设置position:absolute;绝对定位；
望采纳~
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星