1. 参考课件中的练习目录,仿写页脚与主体
<!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>移动端通用布局代码</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="font_icon/iconfont.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!-- 页眉 -->
<header>
<!-- logo -->
<a class="logo" href="#"><img src="./images/taobao.png" alt=""></a>
<!-- 搜索框 -->
<a href="#" class="search">
<span>寻找宝贝店铺</span>
<span>搜索</span>
</a>
<!-- 签到 -->
<a href="#" class="iconfont icon-qiandao-xuanzhong"></a>
</header>
<!-- 主体 -->
<main>
<div class="tag">
<ul>
<li><a href="#">
<img src="./images/navs/tmxb.webp" alt="">
<span>天猫新品</span>
</a></li>
<li><a href="#">
<img src="./images/navs/jrbk.webp" alt="">
<span>今日爆款</span>
</a></li>
<li><a href="#">
<img src="./images/navs/tmgj.webp" alt="">
<span>天猫国际</span>
</a></li>
<li><a href="#">
<img src="./images/navs/fzlx.webp" alt="">
<span>飞猪旅行</span>
</a></li>
<li><a href="#">
<img src="./images/navs/tmcx.webp" alt="">
<span>天猫超市</span>
</a></li>
<li><a href="#">
<img src="./images/navs/tbch.webp" alt="">
<span>淘宝吃货</span>
</a></li>
<li><a href="#">
<img src="./images/navs/sqk.webp" alt="">
<span>省钱卡</span>
</a></li>
<li><a href="#">
<img src="./images/navs/ltjb.webp" alt="">
<span>领淘宝金币</span>
</a></li>
<li><a href="#">
<img src="./images/navs/alpm.webp" alt="">
<span>阿里拍卖</span>
</a></li>
<li><a href="#">
<img src="./images/navs/fl.webp" alt="">
<span>分类</span>
</a></li>
</ul>
</div>
<div class="shop">
<ul>
<li><a href="#">
<img src="./images/items/item-1.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
<li><a href="#">
<img src="./images/items/item-2.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
<li><a href="#">
<img src="./images/items/item-3.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
<li><a href="#">
<img src="./images/items/item-4.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
<li><a href="#">
<img src="./images/items/item-5.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
<li><a href="#">
<img src="./images/items/item-6.webp" alt="">
<div class="title">甘汁园 姜汁红糖 350g/盒驱寒保暖缓解痛经独立包装</div>
<div class="price">
<span>¥ 10.8</span>
<span>100+人已购买</span>
</div>
</a></li>
</ul>
</div>
</main>
<!-- 页脚 -->
<footer>
<a href="#" class="iconfont icon-taobao"></a>
<a href="#" class="iconfont icon-gouwuche"><span>购物车</span></a>
<a href="#" class="iconfont icon-wode"><span>我的淘宝</span></a>
</footer>
</body>
</html>
header {
top: 0;
left: 0;
right: 0;
z-index: 999;
display: grid;
/* 1行三列 */
grid-template-columns: .58rem 1fr .33rem;
grid-auto-rows: 0.5rem;
place-items: center;
gap: 0.1rem;
background: #f4f4f4;
}
header a.logo {
padding-left: .1rem;
}
header > a.search {
width: 100%;
border: 1px solid #ff5000;
height: .35rem;
border-radius: .3rem;
display: flex;
place-content: space-between;
place-items: center;
}
header > a.search> span:first-child{
padding-left: .1rem;
}
header > a.search> span:last-child{
padding: .06rem .2rem;
margin-right: .01rem;
/* 渐变 */
background: linear-gradient(to left,#ff5000,#ffc000);
color: #fff;
border-radius: .3rem;
}
header > a.iconfont {
color: #ff5000;
font-size: .24rem;
}
footer{
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
header,
footer{
height: 50px;
position: fixed;
}
main{
position: relative;
top: 50px;
}
main .tag >ul {
display: grid;
grid-template-columns: repeat(5,1fr);
grid-template-rows: .70rem .70rem;
text-align: center;
background-color: #fff;
border-radius: .12rem;
margin-top: .1rem;
gap: .01rem;
}
main .tag >ul li img{
width: .61rem;
}
main .shop > ul {
margin-top: .1rem;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: .1rem;
}
main .shop > ul li {
background-color: #fff;
border-radius: .12rem;
overflow: hidden;
}
main .shop > ul li .title{
padding: .1rem;
}
main .shop > ul li .price {
padding: .1rem;
}
main .shop > ul li .price span:first-child{
color: #ff5000;
font-size: .14rem;
}
main .shop > ul li .price span:last-child{
margin-left: .1rem;
}
效果图:
2. (附加)思考, 移动布局中,不写width=device-width, 只写 initial-scale=1.0, 是否可达到同样效果?为什么
a.当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器会自动缩放。
当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器会自动缩放。
如果width属性值大于理想视口宽度,则视觉视口放大为width的值,计算得到scale小于1.0;
如果width属性值小于理想视口宽度,则视觉视口缩小为width的值,计算得到scale大于1.0;
这么做的目的是让设备屏幕把完整的页面呈现出来(页面横向塞满屏幕,计算得到scale),
布局视口 = 视觉视口 = 理想视口/缩放比例
b.当只指定initial-scale属性,而不设置width属性时,浏览器会将布局视口宽度设置为视觉视口宽度,以将页面正好铺满屏幕。因为initial-scale属性用于设置页面初始的缩放比例,缩放比例为理想视口与视觉视口的比值。当指定initial-scale = 1,而不设置width属性时,大部分浏览器会将布局视口宽度设置为设备理想视口宽度。
因为:initial-scale = 1.0
所以:视觉视口 = 理想视口 / .0 =理想视口
又因为: 没有设置width
所以:视觉视口 = 布局视口
所以:视觉视口 = 布局视口 = 理想视口
综上所述,只写initial-scale = 1.0可以达到同样效果