Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
响应式布局:媒体查询。
主要是查询设备:屏幕,打印机类。
布局一般是宽度受限,高度不受限;也可以高度和宽度都受限,叫单屏布局;不可用高度和宽度都不受限。
实例说明媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>媒体查询</title>
</head>
<body>
<!-- 创建3个btn实例,第一个类叫基本样式类,第二个叫修饰类-->
<button class="btn small">按钮1</button>
<button class="btn middle">按钮2</button
><button class="btn large">按钮3</button>
<!-- 创建样式 -->
<style>
/* 初始化box */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 创建html的font-size大小 */
html {
font-size: 10px;
}
/* 创建按钮基本样式 */
.btn {
background-color: seagreen;
color: aliceblue;
border: none;
outline: none;
margin: 3px;
}
/* 创建鼠标悬停效果 */
.btn:hover {
cursor: pointer; /*指针设置为小手*/
background-color: orangered;
opacity: 0.8; /*透明度*/
transition: 0.2s; /*过渡效果*/
padding: 0.4rem 0.8rem; /*设置内边距*/
}
/* 分别设置3个btn的fontsize,用相对单位rem表示,只要动态调整rem大小就可以实现动态调整按钮大小的功能 */
.btn.small {
font-size: 1.2rem;
}
.btn.middle {
font-size: 1.6rem;
}
.btn.large {
font-size: 1.8rem;
}
/* 媒体查询 ,移动优先,从最小屏幕开始匹配,已ipone11为例,iphone11的屏幕大小为375*812px */
/* 查询当屏幕小于375px时 */
/*此处min-width写成了min-width,检查了好久没发现,以后还要细心一些*/
@media (max-width: 374px) {
html {
font-size: 12px;
}
}
@media (min-width: 375px) and (max-width: 414px) {
html {
font-size: 14px;
}
}
@media (min-width: 415px) {
html {
font-size: 16px;
}
}
/* PC优先,从最大屏幕开始适配 */
@media (min-width: 600px) {
html {
font-size: 20px;
}
}
@media (min-width: 501px) and(max-width:599px) {
html {
font-size: 16px;
}
}
@media (max-width: 500px) {
html {
font-size: 10px;
}
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模态框</title>
</head>
<body>
<header>
<h2 class="title">模态框实例演示</h2>
<button onclick="document.querySelector('.modal').style.display='block'">
登录
</button>
</header>
<!-- 模态框 -->
<div class="modal">
<!-- 遮罩背景 -->
<div
class="modal_bg"
onclick="this.parentNode.style.display='none'"
></div>
<!-- 登录表单 -->
<form action="" class="modal_form">
<fieldset style="display: grid; gap: 1em">
<legend>用户登录</legend>
<p>
<input type="email" name="email" placeholder="username@email.com" />
</p>
<p>
<input type="passwd" name="passwd" placeholder="******" />
</p>
<p>
<button onclick="">提交</button>
</p>
</form>
</fieldset>
</div>
</body>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 设置header样式 */
header {
background-color: seagreen;
color: seashell;
display: flex;
padding: 0.2em 1em;
}
/* 设置header标题样式 */
header .title {
font-style: italic;
font-weight: lighter;
color: seashell;
letter-spacing: 2px;
text-shadow: 3px 3px 3px #555; /* 文本阴影 */
}
header button {
margin-left: auto;
border: none;
outline: none;
background-color: white;
width: 5rem;
padding: auto;
border-radius: 0.4rem; /* 设置按钮边角圆滑 */
}
header button:hover {
background-color: tomato;
color: white;
cursor: pointer;
box-shadow: 2px 3px 5px #555;
transition: 0.3s; /* 设置渐变 */
}
/* 打开首页,点击登录前隐藏表单 */
.modal {
display: none;
}
/* 设置模态框表单样式 */
.modal .modal_form fieldset {
background-color: lightgreen;
border: none;
padding: 2em;
box-shadow: 0 0 5px #555;
width: 20rem;
}
.modal .modal_form fieldset legend {
background-color: lightcyan;
border: none;
padding: 2em;
box-shadow: 0 0 5px #888;
height: 0.5em;
width: 10em;
}
/* 模态框定位 */
.modal .modal_form {
position: fixed;
top: 10em;
left: 20em;
right: 20em;
}
/* 半透明遮罩定位 */
.modal .modal_bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 四个参数分别是红、绿、蓝、透明度 */
}
</style>
</html>
flex布局常用的三个属性
plac-item:项目在文档交叉轴的对齐方式,值有:start,end,center,stretch(拉伸对齐)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex布局术语,容器,项目</title>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
/* flex容器 */
display: flex;
height: 20em;
border: 1px solid #000;
}
.container > .item {
/* flex容器中的"子元素" 则成为" 弹性项目/flex项目" */
width: 10em;
/* height: 10em; */
padding: 1em;
background-color: lightcyan;
border: 1px solid #000;
}
.container {
/* 用在容器中的属性 */
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-wrap: wrap; */
/* 1. 主轴方向,是否换行? */
flex-flow: row nowrap;
flex-flow:
/* flex-flow: row wrap; */
/* 2. place-content: 容器中的剩余空间在项目之间进行分配 */
place-content: start;
place-content: end;
place-content: center;
/* 二端对齐 */
place-content: space-between;
/* 分散对齐 */
place-content: space-around;
/* 平均对齐 */
place-content: space-evenly;
/* 3. 项目在交叉轴上的对齐 */
place-items: stretch;
place-items: start;
place-items: end;
place-items: center;
/* flex容器上只需要记住三个属性就可以了 */
/* 1. flex-flow: 主轴方向, 换行 */
/* 2. place-content: 项目在主轴上的排列与空间分配 */
/* 2. place-items: 项目在交叉轴上的对齐方式 */
}
</style>
</body>
</html>