html网页设计素材图片(html网站设计)
关于html页面制作
制作的网页：
整体思路：
先布局再CSS控制
骨架搭好了，初始化样式，
后再弄CSS样式。注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及
对外部样式表的引入
1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片
的宽，那么这里背景图片设置的有意思吗？不设置效果一样呀！！
2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么
先分清楚哪些是同级目录文件
我现在在操作首页实战.html，里面有图片1的路径，从上面可以看出首页实战.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的背景颜色)。可能的原因是div里面没内容，没长和宽，自然不会显示背景颜色
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呈现在下面并且不被覆盖，
第一种方法：给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/首页实战-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核心业务/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="#"丰富的订单统计/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="#"丰富的订单统计/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="#"丰富的订单统计/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="#"丰富的订单统计/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联系我们/h1
ahref=""MORE/a
/div
divid="contact"
/div
/div
/div
divid="footer"
ul ??????????????????????????????????!--ulli*7a{联系我们} --
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/a/li
liahref="#"联系我们/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、这些高度都有规定的*/
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;*/??????????????/*这里设置是来区分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格式,6个左右的子页面,素材图片什么的都要
楼主你好！我可以给你提供一份，你只要登录
找到相应版块就能够下载了
html 初学者 网站模板
!DOCTYPE?html
html
head
meta?charset="UTF-8"
title/title
style
body{
height:500px;
background:?linear-gradient(#A6CADE,#F8C6F8)?no-repeat;
}
ul,li,div?{
padding:0;margin:0;
}
.container{
width:?500px;
margin:0?auto;
}
#tab-con?div{
display:?none;
width:500px;
height:282px;
}
#tab-con?div?img{
width:?100%;
height:100%;
}
#tab-con?div.active{
display:?block;
}
#tab-list?ul?li{
float:left;
list-style:?none;
}
#tab-list?ul?li?a{
display:?block;
width:70px;
text-align:?center;
text-decoration:?none;
color:#000;
background:?#D6D6D1;
}
#tab-list?ul?li.active?a{
color:#fff;
background:#f96302;
}
/style
/head
body
div?class="container"
div?id="tab-con"
div?class="active"img?src="img/test1.jpg"/div
divimg?src="img/test2.jpg"/div
divimg?src="img/test3.jpg"/div
div图片4/div
div图片5/div
div图片6/div
div图片7/div
/div
div?id="tab-list"
ul
lia?href="javascript:;"首页/a/li
lia?href="javascript:;"美食/a/li
lia?href="javascript:;"交通/a/li
lia?href="javascript:;"图片4/a/li
lia?href="javascript:;"图片5/a/li
lia?href="javascript:;"图片6/a/li
lia?href="javascript:;"图片7/a/li
/ul
/div
/div
script
var?tablist?=?document.getElementById('tab-list').getElementsByTagName('li');
var?tabcon?=?document.getElementById('tab-con').getElementsByTagName('div');
for(var?i?=?0;?itablist.length;?i++){
tablist[i].onclick?=?function(){
starttab(this);
};
};
function?starttab(obj){
for(var?i?=?0;?itablist.length;?i++){
if(tablist[i]?==?obj){
tablist[i].className?=?"active";
tabcon[i].className?=?"active";
}else{
tablist[i].className?=?"";
tabcon[i].className?=?"";
};
};
};
/script
/body
/html
html网页制作教程？
HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的语言。HTML网络课程比较复杂，建议询问比较专业的前端培训机构，比如【达内教育】。该机构已从事19年IT技术培训，累计培养100万学员，并且独创TTS8.0教学系统，1v1督学，跟踪式学习，有疑问随时沟通。感兴趣的话点击此处，免费学习一下
【HTML语言】可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来，方便用户浏览。对于我们来说，HTML是学习网页制作的基本功，熟练掌握HTML这项基本功，可以为以后的学习和工作打下良好的基础。要学习任何编程语言，都不好好高骛远，HTML的入门很简单，但是也要遵循学习的基本步骤，选择一本入门书籍，循序渐进地去学习每一张的内容。一边学习，一边查看网页代码对照来学，提升入门速度。
想了解更多有关HTML的相关信息，推荐咨询【达内教育】。秉承“名师出高徒、高徒拿高薪”的教学理念，是达内公司确保教学质量的重要环节。作为美国上市职业教育公司，诚信经营，拒绝虚假宣传是该机构集团的经营理念。该机构在学员报名之前完全公开所有授课讲师的授课安排及背景资料，并与学员签订《指定授课讲师承诺书》，确保学员利益。
达内IT培训机构,试听名额限时抢购。
有哪些好的平面设计素材网站？
《04期-最设计素材2018【某痕】版式设计新课程》百度网盘资源免费下载
链接:
?pwd=zxcv 提取码:zxcv
04期-最设计素材2018【某痕】版式设计新课程|最设计知识星球–【某痕】版式设.pdf|第24节 VI延展2.wmv|第24节 VI延展1.wmv|第23节 字体设计2.wmv|第23节 字体设计1.wmv|第22节 中英文字体设计方法.wmv|第21节 标志设计思路2.wmv|第21节 标志设计思路1.wmv|第20节 书籍设计案例示范2.wmv|第20节 书籍设计案例示范1.wmv|第19节 书籍设计2.wmv|第19节 书籍设计1.wmv|第18节 版面设计 2.wmv|第18节 版面设计 1.wmv ?