📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️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.視訊示範
U21JP 寵物 5頁
🧩 2.圖檔示範
四、💒 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>萌寵有家</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="ban">
<div class="header clearfix">
<div class="logo">
<img src="picture/logo.png" alt="">
萌寵有家
</div>
<div class="my">
傻二哈的世界
</div>
<a href="login.html" class="login">登入/注冊</a>
<div class="search">
<input type="text" placeholder="請輸入你想要了解的萌寵">
<img src="picture/search.png" alt="">
</div>
</div>
</div>
<div class="nav">
<div class="nav-list clearfix">
<a href="" class="nav-item active xl">
<nav>
<div>首頁</div>
<div>下拉菜單</div>
</nav>
</a>
<a href="about.html" class="nav-item">關于我們</a>
<a href="news.html" class="nav-item">萌寵新聞</a>
<a href="adopt.html" class="nav-item">寵物領養</a>
<a href="adopt.html" class="nav-item">寵物領養</a>
</div>
</div>
<div class="banner">
<img src="picture/ban.jfif" alt="">
</div>
<div class="title">萌寵新聞</div>
<div class="ban news clearfix">
<div class="news-item">
<img src="picture/news.jpg" alt="">
<div class="news-item-b">
<h3>如何選到好貓糧，大神網友的這三點秘訣收藏不謝！</h3>
<p>對于養貓新手或是家中有幾隻原住民的小夥伴們而言，怎樣讓喵主子們吃的又營養又健康，是個持續性的問題。那麼面對市面上琳...</p>
<div class="more">檢視詳情</div>
</div>
</div>
<div class="news-item">
<img src="picture/news1.jpg" alt="">
<div class="news-item-b">
<h3>适合的才是最好的！不要讓寵物的腸道敏感雪上加霜！</h3>
<p>目前市面上的寵物糧種類達上百種，如何選擇一款成本效益高的貓糧是困擾衆多鏟屎官的難題，頻頻曝光的毒糧的存在，更加劇了鏟...</p>
<div class="more">檢視詳情</div>
</div>
</div>
<div class="news-item">
<img src="picture/news2.jpg" alt="">
<div class="news-item-b">
<h3>貓營養膏什麼牌子好，WOWO貓咪螺旋藻營養膏補營養護腸胃</h3>
<p>如果貓咪有偏食的習慣或是處于特殊養病時期，缺乏一定的營養或是吸收不到足夠的營養物質，都會對生長發育帶來不良影響，造...</p>
<div class="more">檢視詳情</div>
</div>
</div>
<div class="news-item news-item1">
<img src="picture/new3.jpg" alt="">
<div class="news-item-b">
<h3>西安釋出養狗條例：遛狗牽引帶不得超過兩米 否則慘遭罰款</h3>
<p>文明養狗一直是我們所提倡的，我們不僅要了解，更要落實到行動上，可是有的人還是沒辦法做到，沒關系，警察叔叔幫助你。近...</p>
<div class="more">檢視詳情</div>
</div>
</div>
</div>
<div class="title">萌寵課堂</div>
<div class="classroom">
<div class="ban clearfix">
<div class="classroom-lg">
<video width="100%" controls="" loop="">
<source src="file/1.mp4" type="video/mp4">
您的浏覽器不支援 video 标簽。
</video>
</div>
<div class="classroom-rg">
<a href="javascript:;" class="classroom-rg-item">怎樣喂小狗吃飯 狗狗用餐順序的訓練方法</a>
<a href="javascript:;" class="classroom-rg-item">貓抓家具怎麼辦 防止貓亂抓家具的方法介紹</a>
<a href="javascript:;" class="classroom-rg-item">狗的不同姿态所表達的情緒 注意聽懂狗的 “語言”</a>
<a href="javascript:;" class="classroom-rg-item">如何用狗繩有效訓狗 讓狗狗聽話的訓練方法</a>
<a href="javascript:;" class="classroom-rg-item">如何帶狗坐車 訓練狗不暈車方法</a>
<a href="javascript:;" class="classroom-rg-item">西藏獵犬的訓練方法 配合訓練的時候要适當的獎勵</a>
<a href="javascript:;" class="classroom-rg-item">訓練惠比特犬 惠比特犬力量訓練要負重抗阻力練習</a>
<a href="javascript:;" class="classroom-rg-item">萬能梗訓練 飲食習慣的訓練要定點定量喂</a>
<a href="javascript:;" class="classroom-rg-item">約克夏犬訓練方法 訓斥時不要呼叫約克夏的名字</a>
<a href="javascript:;" class="classroom-rg-item">約克夏怎麼樣訓練 密碼是叫約克夏聽從的信号</a>
<a href="javascript:;" class="classroom-rg-item">澤莫西高地白梗訓練 初期訓練可以采用強迫法</a>
</div>
</div>
</div>
<div class="title">萌寵領養</div>
<div class="ban">
<div class="adopt clearfix">
<div class="adopt-lg">
<img src="picture/new4.jpeg" alt="">
</div>
<div class="adopt-rg adopt-rg1 margin">
<div class="adopt-t">愛·領養它</div>
<div class="adopt-s">一歲的小貓，等待你的關愛</div>
<p>布丁在這裡已經兩個月了，她在等待一個關愛他的人帶她回家，如果你能夠給她一個穩定的居所，不虐待，有時間照顧她，歡迎你來領養她，給她一個家，讓他也感受到溫暖，或許他也會給你一個驚喜，或許她也會治愈你</p>
<div class="detail">詳情></div>
</div>
</div>
<div class="adopt clearfix">
<div class="adopt-rg">
<img src="picture/adopt2.jpg" alt="">
</div>
<div class="adopt-lg margin">
<img src="picture/adopt1.jpg" alt="">
</div>
</div>
<div class="adopt clearfix">
<div class="adopt-lg">
<img src="picture/adopt3.jpg" alt="">
</div>
<div class="adopt-rg margin">
<img src="picture/adopt4.jpg" alt="">
</div>
</div>
</div>
<div class="about">
<div class="title">關于我們</div>
<div class="ban">
<p>建立人與動物的友好關系</p>
<p>
在世界各地,人類與動物的關系已維持了數萬年之久,這清楚地證明人與動物的關系牢不可破。而在各種寵物中,狗無疑是與人類最為親密忠實的朋友
</p>
<p>
寵物作為我們人類的伴侶動物是我們人類獲得幸福和健康生活的一個來源,飼養寵物可以讓人們生活的更健康,更充實,同時對人心髒有好處,能降 低血壓和血脂,研究發現患有心髒病和具它一些慢性病,飼養寵物犬貓後,通過調節人的一些心理狀态,可以明顯減輕臨床症狀。通過遛犬,與它一起玩耍,可以放松人的精神。
</p>
<p>
西方人說：動物是另一種形态的人。它們是人類的朋友，依賴着人，忠誠于人。在這裡，我們為大家講述了人與動物的四種感情，獻給一切愛動物的人和夫妻的動物。
</p>
<p>
<div class="more">詳情</div>
</div>
</div>
<div class="footer">
<div class="ban">
<div>版權</div>
<div>傻二哈的世界 責任有限公司</div>
</div>
</div>
</body>
</html> 🏠CSS樣式代碼
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
.clearfix:after {
content: ".";
visibility: hidden;
height: 0;
display: block;
clear: both;
}
input {
outline: none;
}
body {
font-size: 14px;
color: #333;
font-weight: '微軟雅黑';
}
.ban {
width: 1200px;
margin: auto;
}
.header{
height: 80px;
line-height: 80px;
}
.logo{
float: left;
font-size: 28px;
}
.logo img{
width: 30px;
height: 30px;
vertical-align: middle;
}
.my,.login,.search{
float: right;
}
.login{
margin-right: 20px;
}
.search{
width: 600px;
}
.search input{
width: 300px;
height: 36px;
padding-left: 12px;
border: 1px solid #eee;
}
.search img{
width: 22px;
height: 22px;
vertical-align: middle;
}
.nav{
background: rgb(253, 136, 27);
height: 40px;
line-height: 40px;
}
.nav-list{
width: 500px;
margin: auto;
}
.nav a{
float: left;
padding: 0 20px;
color: #fff;
}
.nav .active{
background: rgb(253, 92, 43);
}
.footer{
background: #333;
color: #eee;
padding: 30px 0;
} 五、🎁更多源碼
1.如果我的部落格對你有幫助
請 “👍點贊” “✍️評論” “💙收藏”
一鍵三連哦！