元素
区块元素：每一行代码对应网页中的一行，这一行都不会随字数改变。
行内元素：不会独占一整行，有多少内容占多少空间的元素。
<--> 标题&字体加粗斜体 a标签建立链接</-->
<h1>烘培工坊</h1>
<h2>健康的面包新鲜出炉！</h2>
<p><strong>亚麻的西语，葵花的微风，每一口都是自然的故事</strong></p>
<p><em>了解更多</em></p>
<a herf="#">了解更多</a>清单&列表
<-->清单的作用一般是网站导览列 前方有数字序号</-->
<ol>
<li>要点一</li>
<li>要点二</li>
<li>清单内容</li>
</ol>
<-->导览列 前方是小圆点 需要链接</-->
<ul>
<li><a herf="#">最新消息</a></li>
</ul>引述他人文字
<--> 使用<br>将长句断行 </-->
<blokequote>"选择天然食材，精湛匠心烘培，<br>让幸福在每口面包中的香气蔓延"</blokequote>插入图片（区块元素）
<--> 插入图片引用地址 alt在图片无法正常显示时提供文字介绍 </-->
<img src="images/shop.jpeg" alt="烘焙工坊大安店">CSS版面设计&网页美化
1.将语法写入HTML标签里
<h2 style="color:red">健康的面包新鲜出炉！</h2>
<-->缺点：如果很多h2标题则比较繁琐可加入到head标签中</-->2.将语法写入head标签中
<--> head标签中定义标题颜色，font-size调整字体大小 </-->
<style>
h2 {
color:red;
}
p {
color:blue:
font-size:36px;
}
</style>3.建立css文档 head标签内引用
<--> css文档链接到head标签 方便管理多个多页便于为维护和更新 </-->
<--> 文件类型是样式表 档名和路径是style.css </-->
<link rel="stylesheet" href="style.css">HTML5设计网页
<--> 包含网站的logo等相关资讯 </-->
<header> </header>
<--> 放置网站的导览列或主选单 </-->
<nav> </nav>
<--> 包含网页主要内容 使用section标签分类标题 </-->
<main>
<section> 标题代码 </section>
<section> 标题代码 </section>
</main>
<--> 标注网站的版权声明等附加资讯 </-->
<footer> </footer>
<--> 在.css文件中 定义标签背景颜色 方便查看 </-->
herder,section,footer {
brackground-color:#d6ccc2;
}csss三个属性
<--> 边框 内边距 外边距 </-->
border:边框
padding:内容与边框之间的空隙大小
margin:不同网页元素之间的距离
<--> 不处理三个属性会对页面造成困扰 故在.css文件中定义初值 </-->
*{
padding: 0;
margin: 0;
}
herder,section,footer {
brackground-color:#d6ccc2;
border:5px #9d8189 solid;
<--> 边框粗细 颜色 样式:直线(dashed:虚线/dotted:圆点) </-->
padding: 30px 0 20px 50px;
<--> 内边距 上 右 下 左；若为三个值即上 左右 下；两个值即上下 左右</-->
margin: 30px;
<--> 外边距 </-->
}CSS美化网页页首
header {
background-color: rgb(35,28,26,0.8); <--> 页首标题背景为半透明 0~1决定透明度 </-->
height:80px; <--> 页首高度为80像素 </-->
width:100%; <--> 宽度设置100%与视窗同宽 </-->
position: fixed; <--> 将导览列固定在顶部 不会随界面移动 </-->
}
<--> 定位模式: positon主要有relative(相对)/absolute(绝对)
相对模式根据原来的位置移动/绝对模式根据容易的边界进行移动 </-->
header ul {
position:absolute;
right:5vw; <--> 距离页首的右边缘5vw </-->
top:0; <--> 上边缘为0 </-->
line-height:80px; <--> 导览列置中于页首 行高等于页首高度为80像素 </-->
}
h1 {
position:absolute;
left:120px; <--> 距离页首的左边缘120像素 </-->
top:0;
line-height:80px;
background-image:url(images/Logo.svg); <--> 图片插入语法 </-->
background-repect:no-repeat; <--> 解决logo重复问题 </-->
background-position:center; <--> logo处于中心位置 </-->
width:210px; <--> 宽度 </-->
text-indent:-9999px; <--> 文字缩排语法 将标题推到很远的地方 </-->
}
<--> 由于li标签是区块元素 故每个连结都会独占一整行呈现上下相叠的状态
使用CSS语法将导览列变成横式排列 并加大每个按钮的右边距
相对单位vw(Viewport Width):视窗宽度 会根据视窗的大小而调整 </-->
herder li {
display:inline;
margin-right:4vw;
}
header a {
color:white; <--> 标签a字体为白色 </-->
text-decoration:none; <--> 标签a底线取消 </-->
}
<--> hover悬停语法 </-->
header a:hover {
text-decoration:underline; <--> 鼠标移动到标题会出现底线来引导用户注意力 </-->
}CSS设计剩下的版面
由于使用三个section标签将网页内容分为三个区块，如果直接对section撰写CSS语法，会使三个section外观完全相同，个别区块少一分独特性和灵活度。在section标签内加入class属性进行区分，且可以重复使用。
<section calss="news"> </section>
<--> .css文件中在class名称的前方要加一个点 </-->
.news {
background-color: antiquewhite;
color: white;
height: 100vh; <--> 固定导览列后需要将第二个区块高度太高 </-->
background-image: url("images/banner.png");
background-repeat: no-repect;
background-size: cover; <--> 背景大小设置为覆盖 auto:原本大小 contain:图片宽度或高度可能留一些空白区域 </-->
background-position: center; <--> 图片置中于整个区块 </-->
display:flex; <--> 水平排列 </-->
flex-direction:column; <--> flex方向为栏 纵向堆叠 </-->
align-items: center; <--> 水平对齐为中央 </-->
justif-content: center; <--> 垂直对齐为中央 </-->
}
.news h2 {
font-size: 60px; <--> h2标签字体放大 </-->
margin-top: 60px; <--> h2上外边距加大 维持原来的视觉比例 在固定导览列后调整 </-->
}
.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; <--> 边框半径语法 加入圆角效果 </-->
}页面布局技巧：Flexbox(弹性盒子)
display:flex; <--> 使用语法 使子元素产生各种排列方式 </-->
justify-content: center; <--> 水平置中 </-->
justify-content: space-between; <--> 伸展到父元素的两侧 </-->
justify-content: space-evenly; <--> 均分子元素以外的空袭 </-->
align-items: center; <--> 垂直置中 </-->
<--> .css文件中.news下 写上面了</-->引用文字
<section calss="slogan"> </section>
.slogan {
background-color: #485652; <--> 墨绿色 </-->
color:white;
height:250px;
display:flex;
justify-content:center;
align-items: center;
font-size: 20px;
line-height: 1.8em; <--> 行高1.8倍</-->
}辅助标签 区域<--> div用来划分或组织HTML的元素 将原本的三个区块简化成两个 </-->
<section class="shop">
<img src="images/Shop.png" alt="烘培工坊大安店">
<div class="info">
<h2>8月1日大安旗舰店隆重开张!</h2>
<p>享受花园庭院的悠闲时光，内有座位品美食相伴，<br>
即日起来店消费加LINE好友可领精致小点心,等您以同品味!</p>
</div>
</section>
.shop {
dispaly: flex;
}
.shop img {
width: 50%;
}
.info {
width: 50%;
background-color: white;
display: flex;
flex-direction: column; <--> flex方向为栏 纵向堆叠 </-->
align-items: center;
justify-content: center;
}
.info h2 {
font-size: 40px;
margin-bottom: 30px; <--> 底部外边距为30像素 </-->
}
.info p {
text-align: center; <--> p段落居中对齐 </-->
line-height: 2em;
}
页尾标签
<--> 页尾套用上面section内容 </-->
footer {
background-color: #000000; <--> 黑色 </-->
color:#B7B7B7;
height:60px;
display:flex;
justify-content:center;
align-items: center;
font-size: 14px;
}
产品展示
<--> 用section标签建立一个区块 每项产品包覆在一个div标签里 </-->
<section class="product">
<div>
<img src="images/p1.png" alt="巴黎风法国土司">
<h3>巴黎风法国土司</h3>
<p>外皮金黄酥脆，内质松软<br>请您体验法式浪漫的味觉享受</p>
<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>
<--> .css </-->
.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%; <--> div里的图片和div本身同宽 </-->
border-radius: 10px; <--> 圆角效果 </-->
}
.product h3 {
font-size: 20px;
margin: 20px 0;
}
.product p {
font-size: 14px;
line-height: 1.6em;
}
表单
<--> 放在main中 </-->
<secton class="newsletter">
<p>欢迎订阅烘培工坊电子报，可不定期收到限定优惠哦！</p>
<from> <--> 定义表单的开始和结束 </-->
<input type="email" placeholder="请输入您的 Email" required> <--> 表单输入元素 通过type指定输入类型 placeholder:栏位的提示文字 required:属性必填 </-->
<button type="submit">送出</button> <--> 表单提交按钮 </-->
</from>
</secton>
<--> select:用来创建下拉菜单 option:定义下拉菜单的各项选项 </-->
<--> 常用表单元素类型：
text:单行文本你输入框
password: 密码输入框 显示为掩码字符
radio: 单选按钮
checkbox: 复选框
submit: 提交按钮
reset: 重置按钮 重置表单所有字段
</-->
<--> .css文件 </-->
.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; <--> 颜色改为白色 </-->
}
响应式设计：css媒体查询
<--> 适应不同的荧幕大小 .css文件 </-->
<--> main中插入汉堡选单
<button class="menu">⛸</button>
</-->
.menu {
display: none; <--> 一般在电脑界面进行隐藏 </-->
}
@media screen and (max-width: 768px) { <--> 距离小于768像素触发 </-->
header ul {
display: none; <--> 隐藏导览列信息 </-->
}
header h1 { <--> logo水平置中 </-->
left: 50%; <--> 图标距左边框50% </-->
transform: translateX(-50%); <--> 图标随X轴移动图片宽度的一半 </-->
}
.news h2 {
font-size: 40px;
}
.menu {
display: block;
back-ground-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;
}
}
<--> 代码练习 </-->
<!DOCTYPE html>
<html lang="zh-TW">
<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>
<--> div用来划分或组织HTML的元素 将原本的三个区块简化成两个 </-->
<section class="shop">
<img src="images/Shop.png" alt="烘培工坊大安店">
<div class="info">
<h2>8月1日大安旗舰店隆重开张!</h2>
<p>享受花园庭院的悠闲时光，内有座位品美食相伴，<br>
即日起来店消费加LINE好友可领精致小点心,等您以同品味!</p>
</div>
</section>
.shop {
dispaly: flex;
}
.shop img {
width: 50%;
}
.info {
width: 50%;
background-color: white;
display: flex;
flex-direction: column; <--> flex方向为栏 纵向堆叠 </-->
align-items: center;
justify-content: center;
}
.info h2 {
font-size: 40px;
margin-bottom: 30px; <--> 底部外边距为30像素 </-->
}
.info p {
text-align: center; <--> p段落居中对齐 </-->
line-height: 2em;
}页尾标签
<--> 页尾套用上面section内容 </-->
footer {
background-color: #000000; <--> 黑色 </-->
color:#B7B7B7;
height:60px;
display:flex;
justify-content:center;
align-items: center;
font-size: 14px;
}产品展示
<--> 用section标签建立一个区块 每项产品包覆在一个div标签里 </-->
<section class="product">
<div>
<img src="images/p1.png" alt="巴黎风法国土司">
<h3>巴黎风法国土司</h3>
<p>外皮金黄酥脆，内质松软<br>请您体验法式浪漫的味觉享受</p>
<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>
<--> .css </-->
.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%; <--> div里的图片和div本身同宽 </-->
border-radius: 10px; <--> 圆角效果 </-->
}
.product h3 {
font-size: 20px;
margin: 20px 0;
}
.product p {
font-size: 14px;
line-height: 1.6em;
}表单
<--> 放在main中 </-->
<secton class="newsletter">
<p>欢迎订阅烘培工坊电子报，可不定期收到限定优惠哦！</p>
<from> <--> 定义表单的开始和结束 </-->
<input type="email" placeholder="请输入您的 Email" required> <--> 表单输入元素 通过type指定输入类型 placeholder:栏位的提示文字 required:属性必填 </-->
<button type="submit">送出</button> <--> 表单提交按钮 </-->
</from>
</secton>
<--> select:用来创建下拉菜单 option:定义下拉菜单的各项选项 </-->
<--> 常用表单元素类型：
text:单行文本你输入框
password: 密码输入框 显示为掩码字符
radio: 单选按钮
checkbox: 复选框
submit: 提交按钮
reset: 重置按钮 重置表单所有字段
</-->
<--> .css文件 </-->
.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; <--> 颜色改为白色 </-->
}响应式设计：css媒体查询
<--> 适应不同的荧幕大小 .css文件 </-->
<--> main中插入汉堡选单
<button class="menu">⛸</button>
</-->
.menu {
display: none; <--> 一般在电脑界面进行隐藏 </-->
}
@media screen and (max-width: 768px) { <--> 距离小于768像素触发 </-->
header ul {
display: none; <--> 隐藏导览列信息 </-->
}
header h1 { <--> logo水平置中 </-->
left: 50%; <--> 图标距左边框50% </-->
transform: translateX(-50%); <--> 图标随X轴移动图片宽度的一半 </-->
}
.news h2 {
font-size: 40px;
}
.menu {
display: block;
back-ground-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;
}
}<--> 代码练习 </-->
<!DOCTYPE html>
<html lang="zh-TW">
<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>