admin管理员组文章数量:1655803
Html-移动端与响应式
一、 viewport视窗的设置
此声明只适用于移动端 可以固定移动端的宽长
viewport视窗的设置
content=" width=device-width,
浏览器的宽度分辨率等于系统的分辨率
initial-scale=1.0
初始比例是1
minimum-scale=1
最小的缩放比例
maximum-scale=1
最大的放大比
user-scalable="no"
用户不允许缩放
<meta
name="viewport"
content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=720,height=1280,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>移动端练习</title>
</head>
<style>
body {
margin: 0;
}
.control {
width: 720px;
height: 1280px;
background-color: pink;
display: flex;
flex-direction: column;
}
.title {
flex: 3;
background-color: skyblue;
background-image: url("../imag/baidulogo.jpg");
background-size: auto 100%;
}
.ad {
background-color: rgb(60, 199, 18);
flex: 2;
}
.newinformation {
flex: 5;
background-color: rgb(226, 243, 71);
}
</style>
<body>
<div class="control">
<div class="content title">
<div class="table_1">
<table></table>
</div>
</div>
<div class="content ad"></div>
<div class="content newinformation"></div>
</div>
</body>
</html>
二、苹果官网首页练习
模板:苹果官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Document</title>
<link rel="stylesheet" href="./css/iphonestyle.css" />
<link rel="stylesheet" href="./css/banner.css" />
</head>
<body>
<div class="nav">
<a href="" class="logo"></a>
<a href="" class="text">Mac</a>
<a href="" class="text">ipad</a>
<a href="" class="text">iphone</a>
<a href="" class="text">watch</a>
<a href="" class="text">music</a>
<a href="" class="text">TV</a>
<a href="" class="text">SUPPORT</a>
<a href="" class="search text"></a>
<a href="" class="buy"></a>
<input type="checkbox" id="choose" hidden="hidden" />
<label for="choose" class="togglebtn">
<span class="line"></span>
<span class="line"></span>
</label>
<!-- .navpage>.navmain>(.searchInput+.navList>(a.navText)*7) -->
<div class="navpage">
<div class="navmain">
<div class="searchInput">
<div class="icon"></div>
<input type="text" placeholder="search apple" />
</div>
<hr />
<div class="navList">
<a href="" class="navText">MAC</a>
<a href="" class="navText">IPAD</a>
<a href="" class="navText">IPHOME</a>
<a href="" class="navText">WATCH</a>
<a href="" class="navText">TV</a>
<a href="" class="navText">MUSIC</a>
<a href="" class="navText">SUPORT</a>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="copywarp">
<div class="redapple"></div>
<h2 class="headline">让节日,快乐每一个人。</h2>
<div class="rightlogo"> <a href="">选购好礼</a></div>
</div>
<div class="picture">
<img src="./imag/banner_1.png" draggable="false" alt="" class="img_1">
<img src="./imag/banner_2.png" draggable="false" alt="" class="img_2">
<img src="./imag/banner_3.png" draggable="false" alt="" class="img_3">
</div>
</div>
</body>
</html>
.banner {
display: flex;
width: 100%;
height: 569px;
background-color: #edeffe;
flex-direction: column;
justify-content: center;
align-items: center;
}
.copywarp {
flex: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.copywarp .redapple {
margin: 20px 0;
width: 54px;
height: 67px;
background-image: url("../imag/applered.png");
background-position: center;
background-repeat: no-repeat;
}
.copywarp h2 {
width: 500px;
position: inherit;
font-size: 43px;
line-height: 1.08349;
color: #1d1d1f;
padding-left: 20px;
margin-bottom: 20px;
}
.copywarp .rightlogo a {
text-decoration: none;
color: #06c;
}
.copywarp .rightlogo a:hover {
text-decoration: underline;
}
.rightlogo {
position: relative;
}
.copywarp .rightlogo::before {
position: absolute;
left: 65px;
top: 3px;
content: " ";
display: block;
width: 15px;
height: 15px;
background-image: url("../imag/xiangyou1.png");
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
}
.picture {
width: 80%;
height: 90%;
height: 281px;
flex: 3;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0px;
}
.picture .img_1 {
flex: 1;
}
.picture .img_2 {
flex: 1;
}
.picture .img_3 {
flex: 1;
}
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 44px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-family: "宋体";
font-size: 12px;
}
.nav a {
color: #fff;
/* 设置a标签下划线为none */
text-decoration: none;
width: 102px;
text-align: center;
}
.nav > .logo {
height: 44px;
width: 44px;
background-image: url("../imag/logo.png");
background-repeat: no-repeat;
background-position: center;
}
.nav > .search {
width: 44px;
height: 44px;
background-image: url("../imag/search.png");
background-repeat: no-repeat;
background-position: center;
}
.nav > .buy {
width: 44px;
height: 44px;
background-image: url("../imag/buy.png");
background-repeat: no-repeat;
background-position: center;
}
label {
width: 44px;
height: 44px;
}
.togglebtn {
width: 44px;
display: none;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
}
.togglebtn > .line {
width: 18px;
height: 1px;
background-color: #fff;
display: none;
transition: all 0.5s;
transform-origin: left center;
}
.togglebtn .line:nth-child(1) {
position: absolute;
top: 15px;
}
.togglebtn .line:nth-child(2) {
position: absolute;
top: 27px;
}
/*
设定屏幕小于768像素时的像素
*/
.navpage {
width: 100vw;
overflow: hidden;
display: flex;
height: 0vh;
transition: all 0.8s;
position: fixed;
left: 0;
top: 0;
background-color: #000;
}
.navpage .navmain {
width: 100%;
}
@media only screen and (max-width: 768px) {
.togglebtn {
display: flex;
position: relative;
z-index: 100;
}
.nav > .logo {
position: relative;
z-index: 100;
}
.togglebtn > .line {
display: block;
}
.nav > .text {
display: none;
}
.nav {
justify-content: space-between;
}
.nav > a {
width: 50px;
}
.nav .togglebtn {
order: 1;
}
.nav .logo {
order: 2;
}
.nav .buy {
order: 3;
}
#choose:checked ~ .togglebtn .line:nth-child(1) {
transform: rotate(44deg);
}
#choose:checked ~ .togglebtn .line:nth-child(2) {
transform: rotate(-43deg);
}
#choose:checked ~ .navpage {
display: flex;
/*
vw:viewport width 视窗的宽度 ==100vw =100%视窗的高度
vh:viewport height:100vh == 100% viewport height
*/
width: 100vw;
height: 100vh;
color: #fff;
position: fixed;
left: 0;
top: 0;
background-color: #000;
flex-direction: column;
padding-top: 44px;
}
.searchInput {
margin: 0px 28px;
display: flex;
justify-content: flex-start;
align-items: center;
height: 44px;
border-radius: 4px;
color: #ccc;
background-color: rgba(45, 45, 45, 0.98);
}
.searchInput .icon {
width: 32px;
height: 36px;
background-image: url("../imag/search.png");
background-repeat: no-repeat;
background-position: center;
/* 设置图片背景时,一定要考虑 图片的url 位置 尺寸 重复*/
}
.searchInput input {
flex: 1;
margin: 0 10px;
height: 100%;
background: transparent;
border: none;
outline: none;
color: #fff;
}
hr {
border-color: #333;
margin-top: 15px;
}
.navList {
margin: 0 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.navList a {
width: 100%;
height: 44px;
color: #fff;
text-align: left;
line-height: 44px;
border-bottom: 1px solid #333;
}
.navList a:last-child {
border-bottom: none;
}
}
练习完结版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Document</title>
<link rel="stylesheet" href="./css/iphonestyle.css" />
<link rel="stylesheet" href="./css/banner.css" />
<link rel="stylesheet" href="./css/hbanner.css" />
</head>
<body>
<div class="nav">
<a href="" class="logo"></a>
<a href="" class="text">Mac</a>
<a href="" class="text">ipad</a>
<a href="" class="text">iphone</a>
<a href="" class="text">watch</a>
<a href="" class="text">music</a>
<a href="" class="text">TV</a>
<a href="" class="text">SUPPORT</a>
<a href="" class="search text"></a>
<a href="" class="buy"></a>
<input type="checkbox" id="choose" hidden="hidden" />
<label for="choose" class="togglebtn">
<span class="line"></span>
<span class="line"></span>
</label>
<!-- .navpage>.navmain>(.searchInput+.navList>(a.navText)*7) -->
<div class="navpage">
<div class="navmain">
<div class="searchInput">
<div class="icon"></div>
<input type="text" placeholder="search apple" />
</div>
<hr />
<div class="navList">
<a href="" class="navText">MAC</a>
<a href="" class="navText">IPAD</a>
<a href="" class="navText">IPHOME</a>
<a href="" class="navText">WATCH</a>
<a href="" class="navText">TV</a>
<a href="" class="navText">MUSIC</a>
<a href="" class="navText">SUPORT</a>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="copywarp">
<div class="redapple"></div>
<h2 class="headline">让节日,快乐每一个人。</h2>
<h2 class="text" hidden>让节日,</h2>
<h2 class="text" hidden>快乐每一个人。</h2>
<div class="rightlogo"><a href="">选购好礼</a></div>
</div>
<div class="picture">
<img src="./imag/banner_1.png" draggable="false" alt="" class="img_1" />
<img src="./imag/banner_2.png" draggable="false" alt="" class="img_2" />
<img src="./imag/banner_3.png" draggable="false" alt="" class="img_3" />
</div>
</div>
<div class="hbanner">
<div class="banner">
<span>新款</span>
<span></span>
<h5>更大屏幕腕上见</h5>
<div class="ad">
<a href="">进一步了解 <span></span></a>
<a href="">购买 <span></span></a>
</div>
</div>
<div class="banner">
<span class="tltlelogo2"></span>
<h5>更大屏幕腕上见</h5>
<div class="ad">
<a href="">进一步了解 <span></span></a>
<a href="">购买 <span></span></a>
</div>
</div>
</div>
</body>
</html>
iphonestyle
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 44px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-family: "宋体";
font-size: 12px;
}
.nav a {
color:rgba(255,255,255,0.82);
/* 设置a标签下划线为none */
text-decoration: none;
width: 102px;
text-align: center;
}
.nav a:hover{
color: #fff;
}
.nav > .logo {
height: 44px;
width: 44px;
background-image: url("../imag/logo.png");
background-repeat: no-repeat;
background-position: center;
}
.nav > .search {
width: 44px;
height: 44px;
background-image: url("../imag/search.png");
background-repeat: no-repeat;
background-position: center;
}
.nav > .buy {
width: 44px;
height: 44px;
background-image: url("../imag/buy.png");
background-repeat: no-repeat;
background-position: center;
}
label {
width: 44px;
height: 44px;
}
.togglebtn {
width: 44px;
display: none;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
}
.togglebtn > .line {
width: 18px;
height: 1px;
background-color: #fff;
display: none;
transition: all 0.5s;
transform-origin: left center;
}
.togglebtn .line:nth-child(1) {
position: absolute;
top: 15px;
}
.togglebtn .line:nth-child(2) {
position: absolute;
top: 27px;
}
/*
设定屏幕小于768像素时的像素
*/
.navpage {
z-index: 10;
width: 100vw;
overflow: hidden;
display: flex;
height: 0vh;
transition: all 0.8s;
position: fixed;
left: 0;
top: 0;
background-color: #000;
}
.navpage .navmain {
width: 100%;
}
@media only screen and (max-width: 700px) {
.togglebtn {
display: flex;
position: relative;
z-index: 100;
}
.nav > .logo {
position: relative;
z-index: 100;
}
.togglebtn > .line {
display: block;
}
.nav > .text {
display: none;
}
.nav {
justify-content: space-between;
}
.nav > a {
width: 50px;
}
.nav .togglebtn {
order: 1;
}
.nav .logo {
order: 2;
}
.nav .buy {
order: 3;
}
#choose:checked ~ .togglebtn .line:nth-child(1) {
transform: rotate(44deg);
}
#choose:checked ~ .togglebtn .line:nth-child(2) {
transform: rotate(-43deg);
}
#choose:checked ~ .navpage {
display: flex;
/*
vw:viewport width 视窗的宽度 ==100vw =100%视窗的高度
vh:viewport height:100vh == 100% viewport height
*/
width: 100vw;
height: 100vh;
color: #fff;
position: fixed;
left: 0;
z-index: 10;
top: 0;
background-color: #000;
flex-direction: column;
padding-top: 44px;
}
.searchInput {
margin: 0px 28px;
display: flex;
justify-content: flex-start;
align-items: center;
height: 44px;
border-radius: 4px;
color: #ccc;
background-color: rgba(45, 45, 45, 0.98);
}
.searchInput .icon {
width: 32px;
height: 36px;
background-image: url("../imag/search.png");
background-repeat: no-repeat;
background-position: center;
/* 设置图片背景时,一定要考虑 图片的url 位置 尺寸 重复*/
}
.searchInput input {
flex: 1;
margin: 0 10px;
height: 100%;
background: transparent;
border: none;
outline: none;
color: #fff;
}
hr {
border-color: #333;
margin-top: 15px;
}
.navList {
margin: 0 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
.navList a {
width: 100%;
height: 44px;
color: #fff;
text-align: left;
line-height: 44px;
border-bottom: 1px solid #333;
}
.navList a:last-child {
border-bottom: none;
}
}
banner
@import url("./hbanner.css");
.banner {
display: flex;
width: 100%;
height: 580px;
background-color: #edeffe;
flex-direction: column;
justify-content: center;
align-items: center;
}
.copywarp {
flex: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.copywarp .redapple {
margin: 20px 0;
width: 54px;
height: 67px;
background-image: url("../imag/applered.png");
background-position: center;
background-repeat: no-repeat;
}
.copywarp h2 {
width: 500px;
position: inherit;
font-size: 43px;
line-height: 1.08349;
color: #1d1d1f;
padding-left: 20px;
margin-bottom: 20px;
}
.copywarp .rightlogo a {
text-decoration: none;
color: #06c;
}
.copywarp .rightlogo a:hover {
text-decoration: underline;
}
.rightlogo {
position: relative;
}
.rightlogo::before {
position: absolute;
left: 65px;
top: 3px;
content: " ";
display: block;
width: 15px;
height: 15px;
background-image: url("../imag/xiangyou1.png");
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
}
.picture {
width: 70%;
height: 90%;
height: 281px;
flex: 3;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 40px 0;
}
.picture img {
flex: 1;
}
@media only screen and (max-width: 1050px) {
.banner {
height: 569px;
}
}
@media only screen and (max-width: 700px) {
.banner {
margin: 0;
padding: 0;
height: 500px;
}
.copywarp {
padding: 0;
}
.copywarp > .redapple {
background-size: 80% auto;
width: 45px;
height: 55px;
}
.picture {
margin: 0;
padding: 0;
flex: 1.5;
display: flex;
}
.picture img:nth-child(2),
.picture img:nth-child(3) {
display: none;
}
.picture img:nth-child(1) {
flex: 1;
padding: 0 100px;
padding-bottom: 20px;
}
.copywarp > .headline {
display: none;
}
.copywarp > .text {
width: 250px;
text-align: center;
height: 32px;
font-size: 30px;
margin-bottom: 10px;
display: block;
}
.hbanner {
flex-direction: column !important;
justify-content: center;
align-items: center;
height: 1184px;
}
.hbanner .banner:nth-child(1),
.hbanner .banner:nth-child(2) {
flex: 1;
height: 592px;
width: 100%;
}
}
hbanner
.hbanner {
display: flex;
flex-direction: row;
}
.hbanner .banner {
display: flex;
justify-content: flex-start;
flex: 1;
text-align: center;
width: 50%;
}
.hbanner .banner span:nth-child(1) {
padding-top: 30px;
font-size: 12px;
line-height: 1.33337;
height: 16px;
color: #bf4800;
}
.hbanner .banner span.tltlelogo2 {
background-image: url("../imag/ipad.png");
width: 607px;
height: 26px;
margin-top: 30px;
background-size: auto 26px;
background-position: center;
background-repeat: no-repeat;
}
.hbanner > .banner span:nth-child(2) {
background-image: url("../imag/hbannertitle.png");
width: 329px;
height: 45px;
background-position: center;
background-repeat: no-repeat;
}
.hbanner > .banner h5 {
margin-top: 10px;
width: 329px;
height: 23px;
font-size: 19px;
line-height: 1.21053;
}
.hbanner > .banner > .ad {
display: flex;
flex-direction: row;
font-size: 15px;
font-family: "微软雅黑";
line-height: 15px;
text-align: center;
margin-top: 10px;
}
.hbanner > .banner > .ad > a {
width: 90px;
color: #06c;
height: 15px;
text-align: center;
text-decoration: none;
}
.hbanner > .banner > .ad > a:nth-child(1) > span,
.hbanner > .banner > .ad > a:nth-child(2) > span {
margin: 0px;
width: 15px;
height: 15px;
padding: 0;
float: right;
background-image: url("../imag/xiangyou1.png");
background-position: center center;
background-size: 14px 14px;
background-repeat: no-repeat;
display: block;
}
.hbanner > .banner > .ad > a:nth-child(2) {
width: 50px;
padding-left: 35px;
}
.hbanner > .banner > .ad > a:hover {
text-decoration: underline;
}
.hbanner .banner:nth-child(1) {
background-image: url("../imag/watch1.jpg");
background-repeat: no-repeat;
background-size: auto 110%;
background-position: center center;
margin: 14px 7px 14px 14px;
}
.hbanner .banner:nth-child(2) {
background-image: url("../imag/watch2.jpg");
background-repeat: no-repeat;
background-size: auto 110%;
background-position: center center;
margin: 14px 14px 14px 7px;
}
本文标签: html
版权声明:本文标题:Html-移动端与响应式 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729706615a1210798.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论