📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站示範
- 五、⚙️ 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
💄美妝介紹、👜美妝分享、👒 品牌化妝品官網網站 、等網站的設計與制作。
二、✍️網站描述
🏷️ 網頁中包含：Div+CSS、滑鼠滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視訊音頻元素，同時設計了logo（源檔案），基本期末作業所需的知識點全覆寫。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言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代碼）。
四、🌐網站示範
五、⚙️ 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DR鑽戒官方旗航店</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
<div id="top">DR 一生浪漫隻給你</div><br>
<div id="topbar">
<div class="nav">
<ul>
<li>
<a href="" class="active">DR</a>
<a href="strategy.html">求婚鑽戒</a>
<a href="star.html">明星推薦</a>
<a href="experince.html">真愛體驗店</a>
<a href="culture.html">DR品牌文化</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- <p>DR 男士一生隻能定制一枚</p><br /> -->
<img src="picture/beijing.jpg">
</div>
<div class="inner">
<p>DR求婚鑽戒</p>
<div class="hr"></div>
<div class="inner-p">
<div>基于讓愛情變的更美好的品牌使命，緻力于對真愛唯一的傳播與見證</div>
<div><span>男士一生僅能定制一枚，</span>贈予一生唯一真愛的人</div>
<div>在求婚的那一刻，許下對愛一生的承諾</div>
</div>
</div>
<div class="tips">
<p>DR求婚Tips</p>
<div class="hr"></div>
<ul>
<li>
<img src="picture/part03_img01.jpg" alt="">
<div class="title">求婚場地的選擇？</div>
<div class="know">點選了解 ></div>
</li>
<li>
<img src="picture/part03_img02.jpg" alt="">
<div class="title">如何選購一枚求婚鑽戒？</div>
<div class="know">點選了解 ></div>
</li>
<li class="last">
<img src="picture/part03_img03.jpg" alt="">
<div class="title">尋找附近的DR真愛體驗店？</div>
<div class="know">點選了解 ></div>
</li>
</ul>
</div>
<div class="story">
<p>DR真愛體驗店求婚故事</p>
<div class="hr"></div>
<div class="i">每一枚DR求婚鑽戒背後，都有一個相愛一生的故事。</div>
<div class="i">DR真愛體驗店見證族DR族浪漫的愛情故事，期待我們也能見證您一生唯一的愛情！</div>
<div class="item clearfix">
<div class="lg">
<img src="picture/part04_banner03.jpg" alt="">
</div>
<div class="rg">
<div class="box">
<div class="title">幸福，會從眼睛裡跑出來</div>
<div class="p">
親愛的，我想過無數次要怎麼和你求婚。<br>
不善言辭的我選擇了一個可以讓我說出真心話<br>
而不必擔心被打擾的地方<br>
-DR蘭州國芳百貨店向你求婚，<br>
為你戴上了一生一枚的DR鑽戒，<br>
看着你像孩子一樣驚慌、驚喜、激動，<br>
心變得很滿很溫暖，親愛的，<br>
謝謝你接受這個不善言辭的我，<br>
這個不能給你很多陪伴的我，<br>
這個還不夠浪漫的我。<br>
</div>
<div class="img">
<img src="picture/part04_img03.png" alt="">
</div>
<div class="p1">DR-蘭州國芳百貨店</div>
<div class="t">DR體驗店服務咨詢</div>
</div>
</div>
</div>
<div class="t t1">查詢附近體驗店</div>
</div>
<div id="footer">
</div>
</body>
</html> 💒CSS樣式代碼
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
.gray{
color: #963;
}
ul,ol{
list-style: none;
}
body{
font-size: 14px;
}
.clearfix:after{
content:".";
visibility: hidden;
height: 0;
display: block;
clear:both;
}
#top{
width:500px;
height: 50px;
line-height: 50px;
margin: 0 auto;
text-align: center;
font-size: 38px;
color: #963;
}
li{
width: 1000px;
margin: 0 auto;
}
a{
width: 500px;
padding: 20px;
}
.b1{
color: #963;
float: left;
}
#topbar{
width:1350px;
height: 30px;
margin: 0 auto;
background-color:#ccc;
}
a:hover{
color: #963;
}
.nav{
width:1350px;
height: 30px;
background-color: #FBFBFF;
margin: 0 auto;
}
.nav .active{
color: #963;
} 六、🥇 如何讓學習不再盲目
第一、帶着目标去學習，無論看書報課還是各種線下活動。
首先要明确自己的學習目标是什麼，是想解決什麼問題，實作怎樣的目标。