今天給各位分享html網(wǎng)頁設計素材的知識，其中也會對html頁面設計素材進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、學習html，現(xiàn)在要求做網(wǎng)頁，哪里有比較簡單的素材
• 2、html網(wǎng)頁設計模板素材哪里下載？
• 3、求一份關(guān)于一個旅游景點或美食的簡單網(wǎng)頁設計作品 html格式,6個左右的子頁面,素材圖片什么的都要
• 4、關(guān)于html頁面制作

學習html，現(xiàn)在要求做網(wǎng)頁，哪里有比較簡單的素材

網(wǎng)頁素材在網(wǎng)上是有很多的，類似中國素材網(wǎng)等，自己可以下載下來去用PS軟件去處理好這些東西

html網(wǎng)頁設計模板素材哪里下載？

網(wǎng)頁模板就是已經(jīng)做好的網(wǎng)頁框架,使用網(wǎng)頁編輯軟件輸入自己需要的內(nèi)容,再發(fā)布到自己的網(wǎng)站。你通過千站素材可以下載很多的成品模板以及該模板帶有的一套網(wǎng)站系統(tǒng)。通過html網(wǎng)頁模板搭建網(wǎng)站有利于保持網(wǎng)頁風格的一致；提高工作效率。

求一份關(guān)于一個旅游景點或美食的簡單網(wǎng)頁設計作品 html格式,6個左右的子頁面,素材圖片什么的都要

樓主你好！我可以給你提供一份，你只要登錄

找到相應版塊就能夠下載了

關(guān)于html頁面制作

制作的網(wǎng)頁：

整體思路：

先布局再CSS控制

骨架搭好了，初始化樣式，

后再弄CSS樣式。注意：將CSS的樣式導入到外部樣式表時，要注意圖片的位置，以及

對外部樣式表的引入

1、頭部的背景圖片的高度128px來自素材的圖片高，容器的寬度大小也來自圖片

的寬，那么這里背景圖片設置的有意思嗎？不設置效果一樣呀?。?/p>

2、圖片的位置：當你在編寫index.html頁面代碼時，出現(xiàn)一些圖片路徑時，那么

先分清楚哪些是同級目錄文件

我現(xiàn)在在操作首頁實戰(zhàn).html，里面有圖片1的路徑，從上面可以看出首頁實戰(zhàn).html和img文件夾為同級的目錄，則路徑應該寫為:img/1.jpg

效果圖

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title/title

styletype="text/css"

#container{

width:1002px;

background-color:gray;

}

#header{

height:120px;

background-color:?aquamarine;

}

#main{

height:?600px;

background:?darkgoldenrod;

}

#footer{

height:?120px;

background:?yellowgreen;

}

#main-left{

float:?left;

background:?yellow;

width:?700px;

height:?100%;

}

#main-right{

float:?right;

background:?pink;

width:?302px;

height:100%?;

}

/style

/head

body

divid="container"

divid="header"/div

divid="main"

divid="main-left"/div

divid="main-right"/div

/div

divid="footer"/div

/div

/body

/html

注意：這里對id為main的div里面的子div

main-left和main-right設置浮動樣式時，要設置寬和高不然不起作用(起單獨一個寬或者高也不起作用，這里的背景顏色只是父div的背景顏色)?？赡艿脑蚴莇iv里面沒內(nèi)容，沒長和寬，自然不會顯示背景顏色

3、當一個div包含兩個左右浮動的div并且后面接個普通的div時

div id="main"

div id="lside"

/div

div id="rside"

/div

/div

div id=”footer”?

/div

因為兩個浮動的div浮在水面上，但是父div(即id為main的div)沒有高度所以沒把父div撐開。Footer的div會在水平面上，所以加背景顏色和height后可以看到此div在這兩個浮動div下面，要使footer的div呈現(xiàn)在下面并且不被覆蓋，

第一種方法：給main的div加height：800px；讓他撐開

第二種方法：在兩個浮動div后面加上一個class為cl的div，樣式為clear：both；

網(wǎng)頁制作的初步完成：

Html代碼：

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title/title

linkrel="stylesheet"type="text/css"href="css/reset.css"/

linkrel="stylesheet"href="css/首頁實戰(zhàn)-2.css"/

/head

body

divid="container" ??????????????!--div#container--

divid="header" ?????????????!--div#header+div#main+div#footer--

imgsrc="img/logo.jpg"alt=""id="logo"/

ulid="nav"

liahref="#"導航1/a/li

????!--li*7a{導航$}--

liahref="#"導航2/a/li

liahref="#"導航3/a/li

liahref="#"導航4/a/li

liahref="#"導航5/a/li

liahref="#"導航6/a/li

liahref="#"導航7/a/li

/ul

/div

imgsrc="img/about_banner.jpg"alt=""id="banner"/

divid="main"

divid="lside"

divclass="subtitle"

imgsrc="img/circle.gif"/

h1核心業(yè)務/h1

ahref=""MORE/a

/div

divclass="four"

h2電子商務類網(wǎng)站建設/h2

imgsrc="img/eshop_service.jpg"alt=""/

ul ????????????????????????????!--ulli*5{方便的貨物管理$}--

liahref="#"方便的貨物管理/a/li

liahref="#"自定義會員類型/a/li

liahref="#"在線支付功能/a/li

liahref="#"豐富的訂單統(tǒng)計/a/li

liahref="#"財務報表生成/a/li

/ul

/div

divclass="four"

h2電子商務類網(wǎng)站建設/h2

imgsrc="img/eshop_service.jpg"alt=""/

ul ????????????????????????????!--ulli*5{方便的貨物管理$}--

liahref="#"方便的貨物管理/a/li

liahref="#"自定義會員類型/a/li

liahref="#"在線支付功能/a/li

liahref="#"豐富的訂單統(tǒng)計/a/li

liahref="#"財務報表生成/a/li

/ul

/div

divclass="four"

h2電子商務類網(wǎng)站建設/h2

imgsrc="img/eshop_service.jpg"alt=""/

ul ????????????????????????????!--ulli*5{方便的貨物管理$}--

liahref="#"方便的貨物管理/a/li

liahref="#"自定義會員類型/a/li

liahref="#"在線支付功能/a/li

liahref="#"豐富的訂單統(tǒng)計/a/li

liahref="#"財務報表生成/a/li

/ul

/div

divclass="four"

h2電子商務類網(wǎng)站建設/h2

imgsrc="img/eshop_service.jpg"alt=""/

ul ????????????????????????????!--ulli*5{方便的貨物管理$}--

liahref="#"方便的貨物管理/a/li

liahref="#"自定義會員類型/a/li

liahref="#"在線支付功能/a/li

liahref="#"豐富的訂單統(tǒng)計/a/li

liahref="#"財務報表生成/a/li

/ul

/div

/div

divid="rside"

divclass="subtitle"

imgsrc="img/circle.gif"/

h1文章觀點/h1

ahref=""MORE/a

/div

ulid="art" ??????????????!--ul#navli*7{文章$}--

liahref="#"這是一篇好文章1/a/li

???!--li*5a{這是一篇好文章$}--

liahref="#"這是一篇好文章2/a/li

liahref="#"這是一篇好文章3/a/li

liahref="#"這是一篇好文章4/a/li

liahref="#"這是一篇好文章5/a/li

/ul

divclass="subtitle"

imgsrc="img/circle.gif"/

h1聯(lián)系我們/h1

ahref=""MORE/a

/div

divid="contact"

/div

/div

/div

divid="footer"

ul ??????????????????????????????????!--ulli*7a{聯(lián)系我們} --

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

liahref="#"聯(lián)系我們/a/li

/ul

address?2006-2009 北京市靈犀慧通科技有限公司版權(quán)所有

京ICP備07020337號 W3C Valid CSS W3C Valid XHTML 1.0 Strict/address

/div

/div

/body

/html

樣式代碼：

#container?{

margin:?0?auto;

width:?1002px;

}

#header?{

height:?128px;

background:?gray url(../img/top_bg.jpg)no-repeat;

}

#nav?li?{

float:?left;

/*1、讓導航橫向*/

/*background: purple; ???*/

/*2、將導航撐開*/

width:?90px;

margin-right:?1px;

}

#nav?a?{

font-size:?16px;

font-family:?"微軟雅黑";

color:?#363636;

/*8、文字顏色*/

display:?block;

/*5、鼠標移動上去后背景顏色局限在a標簽內(nèi)容中*/

height:?37px;

/*6、這些高度都有規(guī)定的*/

width:?90px;

text-align:?center;

/*7 、讓文字居中*/

}

#nav?a:hover?{

/*3、鼠標放上來后變的樣式*/

color:?white;

background:?url(../img/nav_on.gif);

/*4、鼠標移動后的背景顏色*/

}

#banner{

margin:?10px?0;

}

#main{

/*height: 800px; */??????????????????/* ?9、撐開*/

}

.subtitle{

height:?37px;

background:?url(../img/index_main_top_bg.gif); ??/*14對原先設置的背景顏色進行更改*/

}

.subtitle?img{

float:?left;

????????????????????????/*10將初始化的圖片左浮動*/

margin:?5px?0?0?10px;

????????????????/*11對圖片進行微調(diào)*/

}

.subtitle?h1{

float:left;

font-size:?16px;

??????????????????????????/*12對標題中字體進行設置*/

font-family:?"微軟雅黑",simhei,sans-serif;

margin-left:10px;

}

.subtitle?a{

float:?right;

font-size:?12px;

???????????????????????????/*13對超鏈接進行微調(diào)*/

color:?gray;

}

.four{

width:?326px;

height:?200px;

background:?#EEE; ????????????????????/*這里將原先的背景改成其他的顏色(用QQ截圖下面有顯示RGB的顏色,這里只是轉(zhuǎn)換成16進制)*/

float:?left;

margin:?10px;

}

.four?h2{

font-size:?16px;

font-family:?"微軟雅黑";

margin:?6px?0?6px?10px;

????????????????????/*16將h2標題做做修改*/

}

.four?img{

float:?left; ??????????????????????????/*11、讓class為four標簽的img左浮動*/

margin-left:?10px;

???????????????????????????/*15圖片背后有背景顏色為白色*/

padding:?6px;

background:?white;

}

.four?ul{

float:?left;

margin-left:?10px;

}

.four?li{

background:?url(../img/service_intro_bg.gif)no-repeat; ?????/*16標簽前面的小黑點*/

padding-left:?10px;

?????????????????????????????/*17小黑點在字的下面*/

height:?20px;

}

.four?a{

color:?gray; ??????????????????????????????????/*18a標簽的顏色*/

}

#lside{

height:?480px;

width:?694px;

border:?1px?solid?#EEE;

float:?left; ???????????????????????????/*8、讓左右兩個div并列一起*/

/*background: cornflowerblue;*/??????????????/*這里設置是來區(qū)分9*/??/*19刪除背景圖*/

border-top:?none;

}

#rside{

/*height: 600px;*/

width:?294px;

/*border:1px solid gray;*/

float:?right; ???????????????????????????/*讓左右兩個div并列一起*/

/*background: greenyellow; */????????????????/*這是一整個大的div到后面設置的話這個要去掉了*/

}

#art{

background:?#EEE;

margin-top:?1px;

padding-top:10px;

}

#art?a{

display:?block;

background:?url(../img/article_head.gif)no-repeat;

height:?29px;

padding-left:?30px;

}

#art?a:hover{

background:?url(../img/article_on_bg.gif); ??/*鼠標移動到文章標題后的背景*/

}

#contact{

margin-top:?1px;

height:?250px;

background:?#EEE;

}

#footer{

height:?120px;

/*background: gray;*/

clear:both; ????????????????????????/* 9、撐開*/

margin-top:?20px;

}

#footer?ul{

height:?40px;

background:?#EEE;

}

#footer?li{

float:?left;

margin-top:?15px;

margin-right:?10px;

}

#footer?address{

font-family:?"微軟雅黑",sans-serif;

font-size:10px;

margin-top:?15px;

}

html網(wǎng)頁設計素材的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于html頁面設計素材、html網(wǎng)頁設計素材的信息別忘了在本站進行查找喔。