1
我在W3学校学习CSS，我刚创建一个页面，它的工作是我想要的，但如果我使用检查元素/在手机/其他设备与较小的屏幕，它是不规则的，特别是在文字，我不知道我错过了，这里是我的代码：自动调整页面大小在手机和其他屏幕大小
<!DOCTYPE html>
<html>
<head>
<style>
/* Here You Put Code */
body {
background-image:url("http://1.bp.blogspot.com/-CYQ5F9q6YlE/VIX6zgIg8EI/AAAAAAAAGwU/nkOudSDpI18/s1600/website-background-rough-surface.jpg");
}
div {
margin:30px;
margin-top:20px;
}
.NODDOS {
font-size:60px;
position:absolute;
border:2px solid black;
box-shadow: 10px 10px 5px #888888;
padding:160px;
padding-top:50px;
padding-bottom:50px;
width:65%;
font-weight:bold;
}
.abcdefg {
font-size:30px;
}
.DONOTHACKUS {
position:absolute;
margin:30px;
margin-top:310px;
margin-left:20px;
}
.DONOTHACK {
font-size:20px;
color:black;
background:;
border:3px solid black;
padding:10px;
box-shadow: 4px 4px 5px #888888;
text-decoration:none;
}
#home {
background : #C2DFFF;
}
.DONOTHACK:hover {
position: relative;
top: -1px;
box-shadow: 4px 4px 5px #888888;
}
.DONOTHACK a.hahaha {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:link {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:visited {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:active {
color:blue;
}
.maybeimtooshy {
font-size:50px;
font-weight:bold;
}
.butimustkeeptry {
position:absolute;
margin-left:310px;
margin-top:350px;
}
.totalkwithher {
font-size:20px;
}
.alltime {
position:absolute;
margin-top:600px;
border-bottom:5px solid black;
width:94%;
}
.keeptryjustrun {
position:absolute;
margin-top:595px;
margin-left:100px;
font-weight:bold;
font-size:50px;
}
.keeptrynoshy {
font-weight:normal;
font-size:30px;
}
.ihopeshewillloveme {
height:50px;
width:300px;
}
/*-------------------*/
<!-- Mazaya Salma Zhafarina -->
<!-- I Love You -->
</style>
</head>
<body>
<div>
<div class="NODDOS">English Lesson
<p class="abcdefg">Welcome To English Lesson !</p>
</div>
<div class="DONOTHACKUS">
<div class="DONOTHACK" id="home"><a class="hahaha" href="#">Home</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Tentang</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Kerjakan Soal</a></div>
</div>
<div class="butimustkeeptry">
<div class="maybeimtooshy">
Siapa Kita ?
</div>
<p class="totalkwithher">
Kita adalah anggota SMP 13 Semarang yang membuat website ini untuk melatih kemampuan siswa
<p class="totalkwithher">
dalam berbahasa inggris melalui soal soal yang diberikan
</p>
</div>
</div>
<div class="keeptryjustrun">
Daftar Sekarang !
<p class="keeptrynoshy">Ayo Daftar Sekarang Dan Kerjakan Soal Untuk Menjadi Yang Terbaik !</p>
<button class="ihopeshewillloveme" href="#">Daftar Disini !</button>
</div>
</div>
</body>
</html>有谁知道IM错过了什么？ CNC中修正了一些字
“搞砸”是什么意思？如果你没有告诉我们具体问题，我们无法帮助你。 – Shaggy
搞砸意味着不规则，也是文本中的问题 – diwang
如果这些类的名称是真实的，那么你应该改变它们，因为这些名称不告诉你他们做什么，因此他们是坏名字。 – Dacaspex