本文根据B站PAPAYA电脑教室视频整理，地址：https://www.bilibili.com/video/BV1Wr4y1R7Bd/?spm_id_from=333.999.0.0&vd_source=691dc2bac1168ca10abf7c0c5df16c1e。
HTML（HyperText Markup Language）决定网页中有哪些文字、图片、按扭。CSS（Cascading Style Sheets）将文件、图片、按扭进行美化。
在开始前，要下载安装一个免费的软件visualstudio，用于编写代码。下载地址：https://code.visualstudio.com/docs/?dv=win
软件默认语言是英文，打开软件后按快捷键Ctrl + Shift + P，打印相关设置功能菜单，选Configure，然后选中文即可将软件设置为中文。
下图显示了今天要制作网页及其结构：
制作上图中的网站首页需要在visualstudio中新建两个文件：
1. index.html，用于存放网页文件、图片等
2. style.css，用于对网页进行美化
同时，将要用到的图片存放于项目所在的文件夹。
在文件夹中点击index.html，可以预览页面效果。
代码部分：
1. index.html链接部分由于没有制作相关网页，因此用“#”代替。
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width , initial-scale=1.0″>
<title>烘培工坊</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<button class=”menu”>☰</button>
<h1>烘培工坊</h1>
<nav>
<ul>
<li><a href=”#”>最新消息</a></li>
<li><a href=”#”>關於我們</a></li>
<li><a href=”#”>門市據點</a></li>
<li><a href=”#”>會員專區</a></li>
</ul>
</nav>
</header>
<main>
<section class=”news”>
<h2>健康穀物麵包新鮮出爐！</h2>
<p>亞麻的細語、葵花的微風，每一口都是自然的敘事</p>
<p><a href=”#”>瞭解更多</a></p>
</section>
<section class=”slogan”>
<blockquote>” 嚴選天然食材，精湛匠心烘培，<br>
讓幸福在每口麵包中的香氣中蔓延 “</blockquote>
</section>
<section class=”shop”>
<img src=”images/Shop.png” alt=”烘培工坊大安店”>
<div class=”info”>
<h2>8月1日大安旗艦店隆重開張！</h2>
<p>享受花園庭院的悠閒時光，內用座位區美食相伴，<br>
即日起來店消費加 LINE 好友可獲精緻小點心，等您一同品味！</p>
</div>
</section>
<section class=”product”>
<div>
<img src=”images/p1.png” alt=”巴黎風法國土司”>
<h3>巴黎風法國土司</h3>
<p>外皮金黃酥脆，內質鬆軟<br>讓您體驗法式浪漫的味覺享受</p>
</div>
<div>
<img src=”images/p2.png” alt=”皇家奶油可頌麵包
“>
<h3>皇家奶油可頌麵包</h3>
<p>酥脆口感搭配奶油的濃郁香氣<br>品嘗簡單而純粹的美味</p>
</div>
<div>
<img src=”images/p3.png” alt=”健康營養全麥土司”>
<h3>健康營養全麥土司</h3>
<p>全麥製成，口感柔韌紮實<br>天然養分健康首選</p>
</div>
</section>
<section class=”newsletter”>
<p>歡迎訂閱烘培工坊電子報，可不定期收到限定優惠喔！</p>
<form>
<input type=”email” placeholder=”请输入您的Email” required>
<button type=”submit”>送出</button>
</form>
</section>
</main>
<footer>
<p>Copyright © 2023 烘培工坊 All Rights Reserved.</p>
</footer>
</body>
</html>
2. style.css关于css, https://www.w3schools.com这个网站有比较详细介绍。
*{ padding:0;
margin: 0;}
header{background-color: rgba(35,28,26,0.8);
height:80px;
width:100%;
position:fixed;}
h1{color:whhte;
position:absolute;
left: 120px;
top:0;
line-height: 80px;
background-image: url(images/Logo.svg);
background-repeat: no-repeat;
background-position: center;
width: 210px;
text-indent: -9999px;}
header li{display:inline;
margin-right:4vw;}
header ul{position:absolute;
right:5vw;
top:0;
line-height:80px;}
header a{color:white;
text-decoration:none;}
header a:hover{
text-decoration: underline;}
.news{background-color: antiquewhite;
color: white;
height:95vh;
background-image: url(“images/banner.png”);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;}
.news h2{font-size: 60px;
margin-top:60px;}
.news p{color:#fef7e6;
font-size: 18px;
margin:25px 0;}
.news a{color:white;
text-decoration: none;
border:1px solid #acacac;
padding:10px 20px;
border-radius:5px;}
.slogan{background-color: #485652;
color:white;
height:250px;
display:flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height:1.8em;}
.shop{display:flex;}
.shop img{width:50%;}
.info{width:50%;
background-color: white;
display:flex;
flex-direction:column;
align-items: center;
justify-content: center;}
.info h2{font-size:40px;
margin-bottom:30px;}
.info p{text-align:center;
line-height: 2em;}
.product{display:flex;
background-color: #ede9db;
justify-content: space-between;
align-items: center;
padding:100px 180px 80px;}
.product div{width:300px;
text-align:center;}
.product img{width:100%;
border-radius: 10px;}
.product h3{font-size: 20px;
margin:20px 0;}
.product p{font-size: 14px;
line-height:1.6em;}
.newsletter{background-color: #485652;
color:white;
padding:60px 0;
display:flex;
flex-direction:column;
align-items:center;}
.newsletter p{margin-bottom:20px;}
.newsletter input, .newsletter button{
background-color: transparent;
color:white;
border:1px solid #949d9a;
padding:10px;
border-radius:5px}
.newsletter input{width:200px;
margin-right:15px;}
.newsletter button{width:80px;
cursor:pointer;}
input::placeholder{color:#DDDDDD;}
input:focus{outline:none;
border-color:#e0e9a3;}
footer{background-color: #000000;
color:#b7b7b7;
height:60px;
display:flex;
align-items: center;
justify-content: center;
font-size: 14px;}
完成后预览如下：
.menu{display:none;}
/* 响应式设计语法，屏幕宽度小于768px的设置 */
@media screen and (max-width:768px){
header ul{display:none;}
header h1{left:50%;
transform:translateX(-50%);}
.news h2{font-size:40px;}
.menu{display:block;
background-color: transparent;
color:white;
font-size:35px;
position:absolute;
top:15px;
left:20px;
border:none;
cursor:pointer;}
.shop{flex-direction: column;}
.shop img{width:100%;}
.info{width:100%;
padding:40px 0;}
.info h2{font-size:30px;}
.product{flex-direction: column;
padding:60px 0;}
.product div{margin-bottom: 30px;}}
完成后，当屏幕尺寸变小时，预览如下：
相关文章
萌ICP备20240170号