用HTML成“课程学习汇报”网站的media queries部分。 具体要求如下: (1)确定1200像素、980像素、560像素作为媒体查询的三个断点; (2)当屏幕宽度大于1200像素时,保留原页面的样式,无论视口宽度如何变化,网页的内容与布局方式都不改变; (3)当屏幕宽度在980像素到1200像素之间时,页面各部分的宽度(包括间距和边距)用百分比表示,视口在这个阶段内的值变化时,各元素在水平方向上随之扩大或收缩; (4)当屏幕宽度在560像素到980像素之间时,页面部分元素的布局方式和表现形式发生了变化,第一是搜索框脱离了导航条跑到页面顶端,第二是网站Logo图片变成了文字,第三是content与sidebar不在是两列布局,而是平铺在页面中。 (5)当屏幕宽度小于560像素时,横菜单变成了竖菜单。
时间: 2023-09-14 18:09:15 浏览: 53
下面是一个简单的例子,你可以根据自己的实际情况进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程学习汇报</title>
<style>
/* 原始样式 */
.container {
width: 1200px;
margin: 0 auto;
}
.nav {
float: left;
width: 200px;
margin-right: 20px;
}
.content {
float: left;
width: 980px;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* 媒体查询 */
@media screen and (max-width: 1200px) {
.container {
width: 100%;
padding: 0 20px;
}
.nav {
float: none;
width: 100%;
margin-right: 0;
}
.content {
float: none;
width: 100%;
}
}
@media screen and (max-width: 980px) {
.nav {
display: none;
}
.logo {
font-size: 24px;
margin: 20px 0;
}
.search {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
}
.content {
float: none;
width: 100%;
}
}
@media screen and (max-width: 560px) {
.nav {
display: none;
}
.logo {
font-size: 24px;
margin: 20px 0;
}
.search {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
}
.content, .sidebar {
float: none;
width: 100%;
}
.menu {
display: block;
}
.menu > li {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
<div class="content">
<h1>标题</h1>
<p>内容</p>
</div>
<div class="sidebar">
<h2>侧边栏标题</h2>
<ul>
<li>侧边栏内容1</li>
<li>侧边栏内容2</li>
<li>侧边栏内容3</li>
</ul>
</div>
<div class="clearfix"></div>
<form class="search">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</form>
<div class="logo">网站名称</div>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
</body>
</html>
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)