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