整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
頭號有新人##HTML5#
個人原創(chuàng)HTML5網(wǎng)頁，適合初學(xué)者和小白參考。
作品介紹
1.網(wǎng)頁作品簡介方面 ：環(huán)境保護(hù)(8個頁面) 綠色自適應(yīng)環(huán)保設(shè)備公司網(wǎng)站模板。喜歡的可以下載，文章頁支持手機(jī)PC響應(yīng)式布局。主要有：網(wǎng)站首頁 新聞資訊 主營業(yè)務(wù) 技術(shù)與方案 關(guān)于我們 聯(lián)系我們 登錄 注冊等總共8個頁面html下載。
2.網(wǎng)頁作品編輯方面：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計(jì)題材，代碼為簡單學(xué)生水平 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用）
3.網(wǎng)頁作品技術(shù)方面：使用CSS制作了網(wǎng)頁背景圖、鼠標(biāo)經(jīng)過及選中導(dǎo)航變色效果、下劃線等。
首頁
新聞資訊
主營業(yè)務(wù)
技術(shù)與方案
關(guān)于我們
聯(lián)系我們
登錄
注冊
代碼展示
部分代碼展示
部分代碼展示
部分代碼展示
看到這里了就 [點(diǎn)贊+關(guān)注+收藏] 三連 支持下吧，你的「點(diǎn)贊，關(guān)注，收藏」是我創(chuàng)作的動力。
想要完整代碼請[點(diǎn)贊+關(guān)注]留言評論區(qū)。
tml5靜態(tài)網(wǎng)頁設(shè)計(jì)要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì),一般的網(wǎng)頁作業(yè)需要融入以下知識點(diǎn)：div布局、浮動、定位、高級css、表格、表單及驗(yàn)證、js輪播圖、音頻 視頻 Flash的應(yīng)用、ul li、下拉導(dǎo)航欄、鼠標(biāo)劃過效果等知識點(diǎn)，學(xué)生網(wǎng)頁作業(yè)源碼可以去猿猿設(shè)計(jì)官網(wǎng)下載，制作水平和原創(chuàng)度都適合學(xué)習(xí)或交作業(yè)用，記得點(diǎn)贊；
一般html5靜態(tài)網(wǎng)頁設(shè)計(jì)作業(yè)主題有 個人網(wǎng)頁設(shè)計(jì)、 美食網(wǎng)頁設(shè)計(jì)、家鄉(xiāng)網(wǎng)頁設(shè)計(jì)、 企業(yè)網(wǎng)頁設(shè)計(jì)、 學(xué)校、 旅游網(wǎng)頁設(shè)計(jì)、 電商購物網(wǎng)頁設(shè)計(jì)、 寵物網(wǎng)頁設(shè)計(jì)、 茶葉、 家居、 酒店、 舞蹈、 動漫網(wǎng)頁設(shè)計(jì)、 明星、 服裝網(wǎng)頁設(shè)計(jì)、 體育網(wǎng)頁設(shè)計(jì)、 化妝品網(wǎng)頁設(shè)計(jì)、 物流、 書籍、 婚紗、 軍事網(wǎng)頁設(shè)計(jì)、 游戲網(wǎng)頁設(shè)計(jì)、 節(jié)日網(wǎng)頁設(shè)計(jì)、 環(huán)保網(wǎng)頁設(shè)計(jì)、 電影、 攝影、 文化網(wǎng)頁設(shè)計(jì)、 鮮花網(wǎng)頁設(shè)計(jì)、 禮品、 汽車網(wǎng)頁設(shè)計(jì)、 其他 等網(wǎng)頁設(shè)計(jì), 成品網(wǎng)頁設(shè)計(jì)可以達(dá)到90分左右水平, 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求, 喜歡的可以聯(lián)系，我們也可以根據(jù)要求進(jìn)行個性化定制。
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>紫羅蘭永恒花園</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="ziluolan">
<div id="banner">
<img src="images/banner.png" alt="">
</div>
<nav>
<a href="index.html"><img src="images/logo.png"></a>
<a href="index.html">首頁</a>
<a href="juqing.html">劇情簡介</a>
<a href="login.html">登陸</a>
<a href="register.html">注冊</a>
</nav>
<div id="index_main">
<div id="main_left">
<img src="images/zuozhe.png" alt="">
<h2>關(guān)于作者</h2>
<p>
中文名:曉佳奈
</p>
<p>
外文名暁:佳奈
</p>
<p>
國籍:日本
</p>
<p>
主要成就:第5屆京都動畫小說獎大獎
</p>
<p>
代表作品:薇爾莉特·伊芙加登
</p>
<h2>經(jīng)歷</h2>
<p>
2015年，以第5屆京都動畫小說獎大獎獲獎作《薇爾莉特·伊芙加登》出道。
</p>
<video controls="" src="./images/index.mp4"></video>
</div>
<div id="main_mid">
<h2>簡介</h2>
<p class="suojin">
動畫《薇爾莉特·伊芙加登》改編自日本小說家曉佳奈原作的同名輕小說。2016年5月27日，在京都動畫官方網(wǎng)站內(nèi)，宣布了《薇爾莉特·伊芙加登》TV動畫化的決定。電視動畫于2018年1月10日首播，全13集。其中TV未放送的第14話收錄在DVD&BD第4卷中。
</p>
<img src="images/dongman.png" alt="">
<h2>劇情簡介</h2>
<p>某個大陸的、某個時代。</p>
<p>
大陸南北分割的戰(zhàn)爭結(jié)束了，世界逐漸走向了和平。
在戰(zhàn)爭中、作為軍人而戰(zhàn)斗的薇爾莉特·伊芙加登離開了軍隊(duì)，來到了大港口城市。懷抱著戰(zhàn)場上一個對她而言比誰都重要的人告訴了她“某個話語”――。
... </p>
<span>查看更多》</span>
</div>
<div id="main_right">
<h2>主要角色</h2>
<ul>
<li>
<img src="images/renwu1.png" alt="人物1">
<p>薇爾莉特·伊芙加登</p>
</li>
<li>
<img src="images/renwu2.png" alt="人物2">
<p>克勞迪亞·霍金斯</p>
</li>
<li>
<img src="images/renwu3.png" alt="人物3">
<p>基爾伯特·布甘比利亞</p>
</li>
<span>查看更多》</span>
</ul>
</div>
</div>
<footer>
<p>版權(quán)所有?</p>
</footer>
</div>
<div><object id="ClCache" click="sendMsg" host="" width="0" height="0"></object></div></body></html>紫羅蘭永恒花園 7頁面帶注冊登錄視頻-猿猿網(wǎng)頁設(shè)計(jì)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align:center;
color:#001D26;
}
h4{
color:#900
}
p{
font-size:16px;
color:#3E4B53;
text-indent:2em;
}
a:link{
color:skyblue;
}
a:hover{
color:red;
}
body{
background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
}
</style>
</head>
<body>
<p>
<h1> 憶江南 </h1>
</p>
<a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
<p>
(1)江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍(lán)，(3)能不憶江南。
</p>
<h4>作者介紹</h4>
<p>
白居易（772-846），字樂天，太原（今屬山西）人。唐德宗朝進(jìn)士，元和三年（808）拜左拾遺，后貶
江州（今屬江西）司馬，移忠州（今屬四川）刺史，又為蘇州（今屬江蘇）、同州（今屬山西大荔）刺史。晚居
洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人重的佼佼者，
所作對后世影響甚大。
</p>
<h4>注釋</h4>
<p>
(1)據(jù)《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。
又名《望江南》、《夢江南》等。分單調(diào)、雙調(diào)兩體。單調(diào)二十七字，雙調(diào)五十四字，
皆平韻。
(2)諳（音安）：熟悉。
(3)藍(lán)：藍(lán)草，其葉可制青綠染料。
</p>
<h4>品評</h4>
<p>
此詞寫江南春色，首句“江南好”，以一個既淺切又圓活的“好”字，攝盡江南的種種佳處，
而作者的贊頌之意與向往之情也盡寓其中。同時，唯因“好”之已甚，方能“憶”之不休，因此，
詞句又已暗逗結(jié)句“能不憶江南”，并與之相關(guān)闔。此句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”，
并非得之傳聞，而是作者出牧杭州時的親身體驗(yàn)與親身感受。這就既落實(shí)了“好”字，又照應(yīng)了“憶”字，
不失為勾通一篇意脈的精彩筆墨。三兩句對江南之“好”進(jìn)行形象化的演繹，突出渲染紅花、江水紅綠相映
的明艷色彩，給人以光彩奪目的強(qiáng)烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者
善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對江南春色的無限贊嘆與懷念，又造成一種悠遠(yuǎn)而又
深長的韻味，把讀者帶入余情搖漾的境界中。
</p>
</body>
</html>示為
盒模型：
(1)border 相關(guān)的屬性：
border-style 屬性是用來設(shè)置邊框樣式的，我們可以直接使用 border-style 來設(shè)置四個邊框的樣式，也可以分別設(shè)置上下左右四個邊框的屬性。
我們來舉個例子吧！
我們在 body 標(biāo)簽中添加一對段落標(biāo)簽。將段落元素邊框的上、右、下、左四個部分的邊框類型分別設(shè)置為實(shí)線、點(diǎn)狀、虛線和雙線。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
</style>
</head>
<body>
<p>
王耶浪Web開發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（2）border-width 屬性：
border-width 屬性是用來設(shè)置邊框?qū)挾鹊模覀兛梢灾苯邮褂?border-width 來設(shè)置四個邊框的寬度，也可以分別設(shè)置上下左右四個邊框的屬性。
例子，
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 6px;
}
</style>
</head>
<body>
<p>
王耶浪Web開發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（3）border-color 屬性：
border-color 屬性是用來設(shè)置邊框顏色的，我們可以直接使用 border-color 來設(shè)置四個邊框的寬度，也可以分別設(shè)置上下左右四個邊框的屬性。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
width: 420px;
height: 200px;
border: 1px solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
</style>
</head>
<body>
<p>
王耶浪Web開發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（4）border 屬性和 padding 屬性，以及使用這兩個屬性做練習(xí)：
border 是邊框?qū)傩裕菑?fù)合屬性，其用法如下所示：
border: 上右下左的值;
border-top: 上邊框值;
border-right: 右邊框值;
border-bottom: 下邊框值;
border-left: 左邊框值;padding 屬性是一個復(fù)合屬性，代表我們盒子模型中的填充，也就是內(nèi)容區(qū)域外部的空白區(qū)域。
其使用格式如下所示：
padding: 上右下左;
padding-top: 頂部填充值;
padding-left: 左邊填充值;
padding-right: 右邊填充值;
padding-bottom: 底部填充值;例子，
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top: thin solid red;
border-right: medium dotted green;
border-bottom: dashed thick blue;
border-left: double 6px yellow;
padding: 10px;
}
</style>
</head>
<body>
<p>
王耶浪Web開發(fā)學(xué)習(xí)筆記
</p>
</body>
</html>顯示為，
（5）margin 屬性：
margin 屬性是用來設(shè)置元素的外邊距：
使用格式：
margin: 上邊距 右邊距 下邊距 左邊距;也可以省略寫。
當(dāng)左右邊距值相同時，寫法如下：
margin: 上邊距 左右邊距 下邊距;當(dāng)上下邊距值相同，左右邊距值相同時，寫法如下：
margin: 上下邊距 左右邊距;當(dāng)上下左右邊距值均相同時，寫法如下：
margin: 屬性值;從上面的內(nèi)容，我們可以看出 margin 屬性是個復(fù)合屬性，我們可以分開設(shè)置上下左右的邊距，寫法如下：
/*上邊距*/
margin-top: 屬性值;
/*左邊距*/
margin-left: 屬性值;
/*右邊距*/
margin-right: 屬性值;
/*下邊距*/
margin-bottom: 屬性值;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid blue;
}
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>王耶浪Web開發(fā)學(xué)習(xí)筆記</p>
</div>
</body>
</html>顯示為，
margin 屬性來改變 p 元素相對于 div 元素的位置。修改代碼如下：
p {
width: 100px;
height: 50px;
background-color: darkgrey;
text-align: center;
margin: 25px 50px;
}顯示為，
（6）display 的常用屬性：
display 屬性可以用來設(shè)置元素在頁面上的排列方式，也可用來隱藏元素。
display 屬性值的說明如下表所示。
屬性值 | 說明 |
block | 元素以塊級方式展示。 |
inline | 元素以內(nèi)聯(lián)方式展示。 |
inline-block | 元素以內(nèi)聯(lián)塊的方式展示。 |
none | 隱藏元素。 |
block 屬性值可以讓行內(nèi)元素以塊級元素的方式顯示在頁面上。
其使用格式如下：
display: block;還記得前面學(xué)過的行內(nèi)元素的概念嗎？ 行內(nèi)元素就是可以和其他元素同處一行的元素，例如 span 標(biāo)簽元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>王耶浪</span><span>Web開發(fā)學(xué)習(xí)筆記</span>
</body>
</html>顯示為，
原本 span 標(biāo)簽是行內(nèi)元素，卻因?yàn)樵O(shè)置 display: block; 導(dǎo)致「王耶浪」與「Web開發(fā)學(xué)習(xí)筆記」分開了。
inline 屬性值可以讓像 div 這樣的霸道塊，接納其他元素來自己的地盤。
其使用格式如下：
display: inline;例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
display: inline;
}
</style>
</head>
<body>
<div>王耶浪</div>
<div>Web開發(fā)學(xué)習(xí)筆記</div>
</body>
</html>顯示為，
塊內(nèi)元素和行內(nèi)元素有其獨(dú)特的優(yōu)勢，在某些情況下，我們想讓一個元素既具有塊內(nèi)元素的特點(diǎn)，又具備行內(nèi)元素的特點(diǎn)。這就要請出 inline-block 屬性值來施展這個魔法了。
其使用格式如下：
display: inline-block;哪些情況下可以用到這個屬性？
比如，用 a 標(biāo)簽來實(shí)現(xiàn)導(dǎo)航的時候，a 標(biāo)簽可以讓元素在一行顯示，但若想給每個 a 標(biāo)簽加上高和寬時發(fā)現(xiàn)沒有任何效果。這時用 display: inline-block，a就具備塊的特性了。
例子,
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
