html+css 静态页面（phone端+pc端）

章鱼Cc_yoo

已于 2022-05-08 15:11:37 修改

阅读量448

点赞数

文章标签： css html

于 2022-05-08 15:11:01 首次发布

本文链接：https://blog.csdn.net/Cc200171/article/details/124648459

版权

本文通过两个案例——活力广东和星巴克，展示了如何使用HTML和CSS创建适应PC及手机端的静态页面。每个案例包含独立的index.html文件以及针对PC（pc.css）、平板（pad.css）和手机（phone.css）的样式文件，实现了多设备适配。

摘要由CSDN通过智能技术生成

案例1 活力广东

index.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>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            height: 100vh;
            /* background-color: aqua; */
            background-image: url(../img/bg.png);
            background-size: cover;
            background-position: center center;
        }
    </style>
    <link rel="stylesheet" href="../css/pc.css" media="only screen and (min-width: 800px)">
    <link rel="stylesheet" href="../css/phone.css" media="only screen and (max-width: 800px)">
</head>
<body>
    <header>
        <img src="../img/logo.png" alt="">
        <img src="../img/welcome.png" alt="">
    </header>
    <main>
        <ul class="top-left">
            <li><img src="../img/visit.png" alt=""></li>
            <li><img src="../img/contract.png" alt=""></li>
            <li><img src="../img/admin.png" alt=""></li>
            <li><img src="../img/guide.png" alt=""></li>
            <li><img src="../img/expo.png" alt=""></li>
            <li><img src="../img/axam.png" alt=""></li>
        </ul>
        <ul class="bottom-right">
			<li><img src="../img/sjzx.png" alt=""></li>
			<li><img src="../img/sina.png" alt=""></li>
			<li><img src="../img/hall.png" alt=""></li>
			<li><img src="../img/tencent.png" alt=""></li>
			<li><img src="../img/visit.png" alt=""></li>
			<li><img src="../img/weico.png" alt=""></li>
		</ul>
    </main>
</body>
</html>

pc.css

header{
    height: 60px;
    /* background-color: pink; */
    margin-top: 112px;
}
header img:nth-of-type(1){
    margin-left: 150px;
}
main{
    width: 863px;
    height: 424px;
    margin: 22px auto 0;
}
li img{
    width: 100%;
    height: 100%;
}
.top-left{
    width: 454px;
    height: 100%;
    float: left;
    /* background-color: pink; */
}
.bottom-right{
    width: 404px;
    height: 100%;
    float: right;
    /* background-color: gold; */
}
.top-left li:nth-of-type(2n+1){
    float: left;
    width: 278px;
    height: 140px;
    margin-bottom: 2px;
}
.top-left li:nth-of-type(2n){
    float: left;
    width: 162px;
    height: 140px;
    margin-left: 14px;
    margin-bottom: 2px;
}
.bottom-right li:nth-of-type(2n+1){
    float: left;
    width: 240px;
	height: 140px;
	margin-bottom: 2px;

}
.bottom-right li:nth-of-type(2n){
    float: left;
    width: 162px;
	height: 140px;
	margin-left: 2px;
	margin-bottom: 2px;
}

phone.css

header{
    width: 90vw;
    height: 66px;
    /* background-color: pink; */
    margin: 44px auto 0;
}
header img:nth-of-type(1){
    display: block;
    height: 34px;
    margin-bottom: 12px;
}
header img:nth-of-type(2){
    display: block;
    height: 20px;
}
main{
    width: 90vw;
    height: 502px;
    margin: 40px auto 0;
}
li img{
    width: 100%;
    height: 100%;
}
.top-left{
    width: 100%;
    height: 250px;
}
.bottom-right{
    width: 100%;
    height: 250px;
    margin-top: 2px;
}
.top-left li:nth-of-type(2n+1) {
    float: left;
	width: 58%;
	height: 82px;
	margin-bottom: 2px;
}

.top-left li:nth-of-type(2n) {
    float: left;
	width: 40%;
	height: 82px;
	margin-left: 2%;
	margin-bottom: 2px;
}
.bottom-right li:nth-of-type(2n) {
    float: left;
	width: 58%;
	height: 82px;
	margin-left: 2%;
	margin-bottom: 2px;
}

.bottom-right li:nth-of-type(2n+1) {
    float: left;
	width: 40%;
	height: 82px;
	margin-bottom: 2px;
}

案例2 星巴克

index.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>start bark</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/pc.css" media="only screen and (min-width: 1200px)">
    <link rel="stylesheet" href="../css/pad.css" media="only screen and (min-width: 800px) and (max-width: 1200px)">
    <link rel="stylesheet" href="../css/phone.css" media="only screen and (max-width: 800px)">
    <style>

    </style>
</head>
<body>
    &