有一种方法，使我的网页响应html?

这是我的代码，我想使响应。我试图添加媒体查询，但我不知道如何使它与我的代码工作。我甚至尝试将宽度设置为100%，但我仍然不知道它是如何工作的。简单地解释一下如何分类对我很有帮助。提前谢谢你。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development course</title>
<link rel="stylesheet" type="text/css" href="home.css"> 
</head>
<body>

<svg id = "rect1"></svg>
<svg id = "rect2"></svg>
<svg id = "rect3"></svg>

<a href = "htmlCourse/htmlcourse.html"> <img id = "html" src ="images/html.png"></a>
<a href = "cssCourse/csscourse.html"> <img id = "css" src ="images/css.png"></a>
<a href = "jsCourse/jscourse.html"> <img id = "js" src ="images/js.png"></a>
<style>
h, a{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: normal;
font-weight: bold;
line-height: 41px;
color: #FFFFFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}
img:hover{opacity: 0.6; transform: scale(1.2); transition: 0.8s ease-in-out;}
img:not(:hover){transition: 0.5s ease-in-out;}
a:hover{text-shadow: 0 4px 4px rgb(0, 0, 0); transition: 0.8s ease-in-out;}
a:not(:hover){transition: 0.5s ease-in-out;}
</style>
<h style= "top: 27px;">Web Development Course</h>
<a id = "getstarted" href="#droppage">Get Started</a>
<ul id = "menu"> 
<li><a id = "cinfo" > <img style="left: -10px; top: 18px;"id = "drop" src = 
"images/drop.png"> Course Info</a>
<ul>
<li><a id = "htm" href="htmlCourse/htmlcourse.html">HTML</a>
<ul>
<li><a id = "lec" href="htmlCourse/htmlcourse.html">Lectures</a>
<li><a id = "tut" href="htmlCourse/htmlcourse.html">Tutorial</a>
<li><a id = "Lab" href="htmlCourse/htmlcourse.html">Labs</a>
</ul>
</li>
<li><a id = "cs" href="cssCourse/csscourse.html">CSS</a>
<ul>
<li><a id = "cslec" href="cssCourse/csscourse.html">Lectures</a>
<li><a id = "cstut1" href="cssCourse/csscourse.html">Tutorial</a>
<li><a id = "csLab1" href="cssCourse/csscourse.html">Labs</a>
</ul>
</li>    
<li><a id = "java" href="jsCourse/jscourse.html">JavaScript</a>
<ul>
<li><a id = "javalec" href="jsCourse/jscourse.html">Lectures</a>
<li><a id = "javatut" href="jsCourse/jscourse.html">Tutorial</a>
<li><a id = "javaLab" href="jsCourse/jscourse.html">Labs</a>
</ul>
</li>
</ul>

</li>

</ul>
<a id = "droparrow" href="#droppage" > <img  style="left: -40px; top: 0px widt;"id = "drop2" 
src = "images/drop.png"> </a>
<a style="position: absolute; bottom: 20px; left: 700px;" name="droppage"></a>
<a id = "droparrow" href="#uppage" > <img  style="left: -40px; top: 0px widt;"id = "drop3" 
src = "images/drop.png"> </a>
<a style="position: absolute; top: -8px; left: 700px;" name="uppage"></a>


</body>
</html>

css

body{
position: absolute;
width: 1440px;
height: 2420px;
background-color: #383C46;
}
#rect1{
position: absolute;
width: 1400px;
height: 59px;
left: 250px;
top: 20px;
background: #3F5577;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#rect2{
position: absolute;
width: 59px;
height: 0px;
left: 692px;
top: 49px;
border: 1px solid #383C46;
transform: rotate(90deg);    
}
#rect3{
position: absolute;
width: 166px;
height: 59px;
left: 1470px;
top: 20px;
}
#drop{
position: absolute;
left: 795px;
top: 34px;
width: 30px;
height: 35px;
}
#drop2{
position: absolute;
left: 795px;
top: 34px;
width: 60px;
height: 60px;
}
#drop3{
position: absolute;
left: 795px;
top: 700px;
width: 60px;
height: 60px;
transform: rotate(180deg); 
}
h{
position: relative;
width: 317px;
height: 59px;
left: 389px;
top: 26px;
font-size: 25px;
}
#cinfo{
position: absolute;
top: 5px;
left: 20px;
font-size: 20px;
text-decoration: none;
cursor: pointer;
}
#getstarted{
position: absolute;
text-transform: uppercase;
width: 317px;
height: 59px;
left: 1000px;
top: 30px;
font-size: 20px;
text-decoration: none;
}
#html{
position: absolute;
width: 200px;
height: 280.26px;
left: 400px;
top: 1800px;
}
#css{
position: absolute;
width: 200px;
height: 280.26px;
left: 850px;
top: 1800px;    
}
#js{
position: absolute;
width: 200px;
height: 280.26px;
left: 1300px;
top: 1800px;
}
#droparrow{
position: absolute;
left: 67%;
top: 35%;
}
#menu, #menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu{
position: absolute;
width: 900px;
left: 721px;
top: 12px;
border-radius: 6px;
}
#menu::before, #menu::after{
content: '';
display: table;
}
#menu:after{
clear: both;
}
#menu li{
float: left;
box-shadow: 1px 0 0 #444;
}
#menu a{
float: left;
padding: 12px 30px;
text-transform: uppercase;
text-decoration: none;
color: white;
}
#menu ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 70px;
left: 1px;
z-index: 1;
background:#383C46;
transition: all .3s ease-in-out;
}
#menu li:hover > ul{
opacity: 1;
visibility: visible;
margin: 0;
background: rgb(58, 67, 94);
}
#menu ul ul{
top: 0;
left: 150px;
margin: 0 0 0 20px;
}
#menu ul li{
float: none;
display: block;
border: 0; 
background:rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu ul a{
padding: 10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: uppercase;
}
#menu ul a:hover{
background: rgb(31, 31, 44);
}

我建议你在设置元素宽度等属性时尝试使用百分比而不是像素。尽量避免使用id进行样式化，因为我认为它们主要用于DOM操作。如果你想让你的页面具有响应性，一定要确保你把HTML元素分组在一个容器中。所以你可以加上:

<div class="container"> //page contents </div>
，然后确保所有内容都在该容器内。您还可以将导航元素包装在nav元素中。如
<nav> <ul> <li><a href="/"></a></li> <li><a href="/"></a></li> </ul> </nav>
这些是你在编写代码时应该确保遵循的最佳实践。

相关内容

最新更新

热门标签：