天天看點
傳回

HTML+CSS大作業：餐飲美食網頁設計與實作——下午茶甜點美食帶psd(6頁)

📂文章目錄

  • ​​二、📚網站介紹​​
  • ​​三、🔗網站效果​​
  • ​​▶️1.視訊示範​​
  • ​​🧩 2.圖檔示範​​
  • ​​四、💒 網站代碼​​
  • ​​🧱HTML結構代碼​​
  • ​​🏠CSS樣式代碼​​
  • ​​五、🎁更多源碼​​

二、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：​

​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​

​​ 等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

三、🔗網站效果

▶️1.視訊示範

F73JP-下午茶甜點美食帶psd(6頁)

🧩 2.圖檔示範

HTML+CSS大作業：餐飲美食網頁設計與實作——下午茶甜點美食帶psd(6頁)

四、💒 網站代碼

🧱HTML結構代碼 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下午茶</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="in-box01">
<div class="in-box01-tit">我的DIY菜單</div>
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="sous">搜尋<input class="inpu" /></div>
<div class="jies">
<p>工作休閑的方式有很多種</p>
<p>一份甜點，一杯冷飲，可以</p>
<p>令你心情愉悅</p>
<div class="anniu">專注下午茶品質</div>
</div>
<div class="jis"></div>
<div class="daohang">
<ul>
<li><a href="index.html">官網首頁</a></li>
<li><a href="jieshao.html">關于我們</a></li>
<li><a href="fuwu.html">關于服務</a></li>
<li><a href="xianchang.html">産品中心</a></li>
<li><a href="wenhua.html">下午茶文化</a></li>
</ul>
</div>
</div>
<div class="in-box2">
<div class="in-box2-tit">品味輕奢魅力無限</div>
<div class="in-box2-fenlei">
<div class="bx1">
<div class="bx1-lef"><img src="images/in03.jpg" /></div>
<div class="bx1-rig"><h1>缤紛系列 </h1><p>每日新鮮水果，為健康而生，</p><p>為吃貨而省！</p><img src="images/iny03.jpg" /></div>
</div>

<div class="bx1">
<div class="bx1-lef"><img src="images/in04.jpg" /></div>
<div class="bx1-rig"><h1>當紅小曲 </h1><p>各種精美糕點由你選擇，新鮮制作，</p><p>當天配送，為繁忙的工作帶來一絲悠閑</p><img src="images/iny04.jpg" /></div>
</div>

<div class="bx1">
<div class="bx1-lef"><img src="images/in05.jpg" /></div>
<div class="bx1-rig"><h1>西式甜點 </h1><p>補充身體能量，熱情工作每一天</p><img src="images/iny05.jpg" /></div>
</div>
<div class="bx1"><img src="images/in06.jpg" /></div>

</div>
</div>
<div class="in-box3">
<div class="in-box3-ner">
<ul>
<li><img src="images/in07.jpg" /><h1>品質保障</h1><p>水果每天鮮切點心</p><p>每天定制生産每天</p><p>按時送達</p></li>
<li><img src="images/in08.jpg" /><h1>優質服務</h1><p>專業人員全程一對</p><p>一服務貼心呵護</p></li>
<li><img src="images/in09.jpg" /><h1>每周上新</h1><p>由專業的營養師為你精心</p><p>搭配制各類食材，每周上新</p></li>
</ul>
</div>
<div class="in-box3-jiange"></div>
</div>
<div class="in-foot">
<div class="in-foot-ner">
<div class="shang">
<div class="shang-box">
<h1>我們的服務</h1>
<a href="xianchang.html"><p>下午茶現場</p></a>
<p>DIY下午茶</p></a>
<p>下午茶精品套餐</p>
<a href="wenhua.html"><p>下午茶文化</p></a>
</div>
<div class="shang-box">
<h1>使用指南</h1>
<p>如何DIY下午茶</p>
<p>如何購買套餐</p>
<p>如何支付定金</p>
<p>如何申請發票</p>
</div>
<div class="shang-box">
<a href="jieshao.html"><h1>關于我們</h1></a>
<a href="jieshao.html"><p>關于不錯</p></a>
<p>聯系我們</p>
<a href="hezuo.html"><p>品牌合作</p></a>
<p>幫助中心</p>
</div>
<div class="shang-box2">
<img src="images/in12.jpg" />
<p>400-118-1217</p><p>139-1060-6951</p>
</div>
</div>
<div class="xia">2020-2029 bucuo100.com, All Rights Reserved.</div>
</div>
</div>

</div>
</body>
</html>

🏠CSS樣式代碼 

li {
  list-style: none;
}

img {
  border: 0;
  margin: 0;
  padding: 0;
}

a {
  color: #333;
  text-decoration: none;
}

a:link {
  color: #333;
}

a:hover {
  color: #629705;
  text-decoration: none;
  overflow: hidden;
}

.main {
  width: 1200px;
  height: auto;
  overflow: hidden;
  min-height: 1000px;
  margin: 0 auto;
  background: #FFF;
}

.in-box01 {
  width: 1200px;
  height: 897px;
  background: url(../images/in01.jpg) no-repeat;
}

.in-box01-tit {
  font-size: 17px;
  color: #FFF;
  width: 130px;
  height: 28px;
  margin-left: 710px;
}

.logo {
  width: 95px;
  height: 344px;
  position: relative;
  top: 84px;
  left: 122px;
}

.sous {
  width: 263px;
  height: 45px;
  background: #9ea5ab;
  line-height: 45px;
  color: #FFF;
  font-size: 18px;
  padding-left: 10px;
  position: relative;
  left: 230px;
  top: -240px;
  line-height: 40px;
}

.inpu {
  width: 210px;
  height: 34px;
  margin-left: 10px;
}

.jies {
  width: 330px;
  height: 160px;
  margin-left: 220px;
  margin-top: -200px;
  padding-top: 20px;
}

.jis {
  width: 33px;
  height: 33px;
  background: url(../images/yinhao.jpg) no-repeat right;
  margin-left: 550px;
  margin-top: -190px;
}

五、🎁更多源碼

1.如果我的部落格對你有幫助 ​

​請 “👍點贊” “✍️評論” “💙收藏” ​

​一鍵三連哦！

web web課程與設計 web前端期末大作業 前端 網頁設計與制作
上一篇: 文心一言 VS chatgpt （16）-- 算法導論4.1 1~2題
下一篇: linux（二）——重定向

繼續閱讀