网页制作
1、网页首页
创建div在里面放网页头部标题，图片。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="best.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="C:\Users\旺财\Desktop\作业\homework\img\homepage_03.png" id="img_header_tel">
</div>
</div>
<div id="d_nav">
<a href="#" id="a_logo"></a>
<nav id="nav_nav">
<span>
<a href="#" class="a_nav" id="a_nav1">首页</a> <span class="s_float">|</span>
<a href="file:///C:/Users/%E6%97%BA%E8%B4%A2/Desktop/%E4%BD%9C%E4%B8%9A/homework/bestabout.html" class="a_nav">关于至美</a><span class="s_float">|</span>
<a href="file:///C:/Users/%E6%97%BA%E8%B4%A2/Desktop/%E4%BD%9C%E4%B8%9A/homework/bestsuccese.html" class="a_nav">成功案列</a><span class="s_float">|</span>
<a href="file:///C:/Users/%E6%97%BA%E8%B4%A2/Desktop/%E4%BD%9C%E4%B8%9A/homework/bestnew.html" class="a_nav">新闻动态</a><span class="s_float">|</span>
<a href="" class="a_nav">在线咨询</a><span class="s_float">|</span>
<a href="" class="a_nav">联系我们</a>
</span>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_body">
<a href="#" id="a_function1"></a>
<a href="#" id="a_function2"></a>
<a href="#" id="a_function3"></a>
<a href="#" id="a_function4"></a>
<a href="#" id="a_function5"></a>
</div>
<div id="d_exhibition">
<div>
<div class="d_head">EXHIBITION</div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_chinese">案列展示</span>
</div>
<div id="d_exhibition_bord">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_bord_img"></a>
<a href="#" class="a_bord_chinese">品牌设计</a>
<a href="#" class="a_bord_eng">brand desing</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_bord_img" id="a_bord_img2"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese2">平面设计</a>
<a href="#" class="a_bord_eng">graphic desing</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_bord_img" id="a_bord_img3"></a>
<a href="#" class="a_bord_chinese">网页设计</a>
<a href="#" class="a_bord_eng">web desing</a>
</div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_bord_img" id="a_bord_img4"></a>
<a href="#" class="a_bord_chinese">电子商城</a>
<a href="#" class="a_bord_eng">electronic mall</a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_bord_img" id="a_bord_img5"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese5">空间/建筑</a>
<a href="#" class="a_bord_eng">space<br>architecture</a>
</div>
</div>
</div>
<div id="d_about_us">
<div>
<div class="d_head">ABOUT<span class="s_white">US</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_about">关于我们</span>
</div>
<div id="d_about_us_text">
<h3 id="h3_about_head">致美创意。因为专注 ，所以专业 </h3>
<p id="d_about_text">
无论您是创业路上的文艺青年，店面商品的老板、需要强化品牌的企业家、网店店主......<br/>
我们都能为您提供高端、低价的设计，我们以最有效、最快速的方式为您提供最合适的设计方案
</p>
</div>
</div>
<div id="d_process">
<div>
<div class="d_head">SERVICE<span class="s_white">PROCESS</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_about_process">服务流程</span>
</div>
<div id="d_process_contain">
<img src="img/homepage_29.png" class="img_process">
<span class="s_process">项目洽谈，根据需求报价</span>
<img src="img/homepage_40.png" class="img_right">
<img src="img/homepage_31.png" class="img_process">
<span class="s_process">预付定金，开始设计</span>
<img src="img/homepage_40.png" class="img_right">
<img src="img/homepage_34.png" class="img_process">
<span class="s_process">修改项目，完成设计</span>
<img src="img/homepage_40.png" class="img_right">
<img src="img/homepage_37.png" class="img_process">
<span>签收付尾款</span>
</div>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_bottom">
<p>
<a href="#" class="a_bottom">首页</a>|
<a href="#" class="a_bottom">关于致美</a>|
<a href="#" class="a_bottom">成功案列</a>|
<a href="#" class="a_bottom">在线咨询</a><br/>
copyright ©2014-12015 致美创意工作室<br/>
技术支持：<a href="#" class="a_bottom">凡客建站</a>|<a href="#" class="a_bottom">管理登录</a>
</p>
</div>
</div>
<a href="#" id="a_fixed">在线客服<img src="img/homepage_0311_03.png"></a>
</body>
</html>
css：样式
*{
padding: 0;
margin: 0;
font-size: 13px;
font-family: "microsoft yahei";
}
div{
overflow: hidden;
}
img{
border: 0;
}
#d_Header{
width: 100%;
background-image: linear-gradient(to top,#dadada,#f7f7f7);
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1000px;
margin: 0 auto;
height: 34px;
margin-right: 9px;
margin-top: 10px;
}
#img_header_tel{
float: right;
margin-right:9px;
margin-top:10px;
display:inline;
}
#d_nav{
width: 1000px;
margin: 0 auto;
height: 99px;
border: 0px solid red;
}
#a_logo{
background:url(img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 30px;
width: 195px;
height: 41px;
display: inline;
}
#nav_nav{
float: right;
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
font-size: 13px;
float: left;
text-align:center;
display: inline;
height: 29px;
text-decoration: none;
}
.a_nav:hover{
font-weight: bold;
}
.s_float{
float: left;
display: inline;
}
#a_nav1:hover{
border-bottom: 3px solid black;
}
#a_nav2:hover{
border-bottom: 3px solid black;
}
#a_nav3:hover{
border-bottom: 3px solid black;
}
#a_nav4:hover{
border-bottom: 3px solid black;
}
#a_nav5:hover{
border-bottom: 3px solid black;
}
#a_nav6:hover{
border-bottom: 3px solid black;
}
#a_imgbg{
width:1000px;
height:400px;
background: url(img/homepage_10.png) no-repeat center top;
margin: 0 auto;
display: block;
}
<div id="d_Header">
<div id="d_header">
<img src="C:\Users\旺财\Desktop\作业\homework\img\homepage_03.png" id="img_header_tel">
</div>
</div>
<div id="d_nav">
<a href="#" id="a_logo"></a>
<nav id="nav_nav">
<span>
<a href="#" class="a_nav" id="a_nav1">首页</a> <span class="s_float">|</span>
<a href="" class="a_nav" id="a_nav2">关于至美</a><span class="s_float">|</span>
<a href="" class="a_nav" id="a_nav3">成功案列</a><span class="s_float">|</span>
<a href="" class="a_nav" id="
最低0.47元/天 解锁文章
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
