html網頁設計素材（html頁面設計素材）
今天給各位分享html網頁設計素材的知識，其中也會對html頁面設計素材進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！
本文目錄一覽：
- 1、學習html，現(xiàn)在要求做網頁，哪里有比較簡單的素材
- 2、html網頁設計模板素材哪里下載？
- 3、求一份關于一個旅游景點或美食的簡單網頁設計作品 html格式,6個左右的子頁面,素材圖片什么的都要
- 4、關于html頁面制作
學習html，現(xiàn)在要求做網頁，哪里有比較簡單的素材
網頁素材在網上是有很多的，類似中國素材網等，自己可以下載下來去用PS軟件去處理好這些東西
html網頁設計模板素材哪里下載？
網頁模板就是已經做好的網頁框架,使用網頁編輯軟件輸入自己需要的內容,再發(fā)布到自己的網站。你通過千站素材可以下載很多的成品模板以及該模板帶有的一套網站系統(tǒng)。通過html網頁模板搭建網站有利于保持網頁風格的一致；提高工作效率。
求一份關于一個旅游景點或美食的簡單網頁設計作品 html格式,6個左右的子頁面,素材圖片什么的都要
樓主你好！我可以給你提供一份，你只要登錄
找到相應版塊就能夠下載了
關于html頁面制作
制作的網頁：
整體思路：
先布局再CSS控制
骨架搭好了，初始化樣式，
后再弄CSS樣式。注意：將CSS的樣式導入到外部樣式表時，要注意圖片的位置，以及
對外部樣式表的引入
1、頭部的背景圖片的高度128px來自素材的圖片高，容器的寬度大小也來自圖片
的寬，那么這里背景圖片設置的有意思嗎？不設置效果一樣呀??！
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里面沒內容，沒長和寬，自然不會顯示背景顏色
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；
網頁制作的初步完成：
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電子商務類網站建設/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電子商務類網站建設/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電子商務類網站建設/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電子商務類網站建設/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 北京市靈犀慧通科技有限公司版權所有
京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標簽內容中*/
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對圖片進行微調*/
}
.subtitle?h1{
float:left;
font-size:?16px;
??????????????????????????/*12對標題中字體進行設置*/
font-family:?"微軟雅黑",simhei,sans-serif;
margin-left:10px;
}
.subtitle?a{
float:?right;
font-size:?12px;
???????????????????????????/*13對超鏈接進行微調*/
color:?gray;
}
.four{
width:?326px;
height:?200px;
background:?#EEE; ????????????????????/*這里將原先的背景改成其他的顏色(用QQ截圖下面有顯示RGB的顏色,這里只是轉換成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網頁設計素材的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于html頁面設計素材、html網頁設計素材的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權聲明：本文由飛速云SEO網絡優(yōu)化推廣發(fā)布，如需轉載請注明出處。
