网页大作业代码自取[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。
网页大作业（内有代码可免费自取）
为了便于大家自取，代码都写在一页上，本人还是建议大家通过外链样式来引入css，代码仅供学习，如有侵权联系删除。
在这里插入图片描述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container{
width: 1228px;
height: 500px;
margin: 0 auto;
}
#top{
width: 1222px;
height: 20px;
background-color: #e7e7e7;
}
#top-left{
width: 800px;
float: left;
}
#contact{
float: left;
}
#top-right{
width: 161px;
float: right;
}
#nav{
width: 1222px;
height: auto;
margin-top: 30px;
line-height: 20px;
}
#logo{
padding-left: 120px;
float: left;
}
#cnav{
padding-left: 60px;
padding-top: 15px;
float: left;
line-height: 20px;
}
a{
text-decoration: none;
color: grey;
font-size: 16px;
}
a:hover{
color: black;
text-decoration:underline;
}
#show1{
padding-top: 15px;
}
</style> <style type="text/css"> #home{
width: 940px;
height: auto;
margin: 15px auto 0px;
}
#show2{
width: 940px;
height: 111px;
}
#show2 div{
width: 110px;
height: 110px;
float: left;
padding: 0 39px 20px;
}
#liubai{
padding-top: 30px;
}
#show3{
width: 940px;
height: 33px;
text-align: center;
background-color: black;
}
#show4{
width: 940px;
height: 230px;
}
#show4 div{
width: 172px;
height: 230px;
float:left;
padding: 0 7px 0px;
}
#maintext{
width: 940px;
height: auto;
text-align: center;
}
#ctext{
width: 940px;
height: auto;
text-align: center;
}
#button{
width: 1228px;
height: auto;
background-color: #e7e7e7;
margin: 0px auto;
text-align: center;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="top-left"> </div>
<div id="contact"><img src="./image/img/homepage_03.png"></div> <!--此处放联系方式图片图片大小261px x 20px-->
<div id="top-right"></div>
</div>
<div id="nav">
<div id="logo"><img src="./image/img/homepage_07.png"></div> <!--此处放logo图片图片大小195px x 41px-->
<div id="cnav">
<a href="./zhimei.html">主页 |</a>
<a href="./aboutus.html">关于至美 |</a>
<a href="./chenggong.html">成功案例 |</a>
<a href="./news.html">新闻动态 |</a>
<a href="./contant.html">在线咨询 |</a>
<a href="./contant.html">联系我们 </a>
</div>
</div>
<div id="show1"><img src="./image/img/homepage_10.png"></div> <!--此处放主页图片图片图片大小1222px x 401px-->
</div>
<div id="home">
<div id="show2">
<div><a href="#"><img src="./image/img/homepage_13.png"></a></div> <!--此处放网页内容的图片 图片大小108px x 110px-->
<div><a href="#"><img src="./image/img/homepage_15.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_17.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_19.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_21.png"></a></div>
</div>
<div id="liubai"></div>
<div id="show3" style="color:red;font-size:30px" >EXHIBITION</div>
——————————————————————————案例 展示————————————————————————
<div id="liubai"></div>
<div id="show4">
<div><a href="#"><img src="./image/img/homepage_30_29.png"></a></div> <!--此处放网页内容的图片 图片大小172px x 230px-->
<div><a href="#"><img src="./image/img/homepage_30_31.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_30_33.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_30_35.png"></a></div>
<div><a href="#"><img src="./image/img/homepage_30_37.png"></a></div>
</div>
<div id="liubai"></div>
<div id="show3" style="font-size:30px" >
<span style="color:red">ABOUT</span>
<span style="color:white">US</span>
</div>
——————————————————————————关于 我们————————————————————————
<div id="liubai"></div>
<div id="maintext">
<p style="font-size:20px;">至美创意 因为<strong>专注</strong> 所以<strong>专业</strong></p>
<p>无论你是创业路上的文艺青年、店面商铺的老板、需要强化品牌的企业家、网店的店主</p>
<p>我们都能为您提供高端低价的设计、我们以最有效、最快速的方式为您提供最合适的方案</p>
</div>
<div id="show3" style="font-size:30px" >
<span style="color:red">SERVICE</span>
<span style="color:white">PROCESS</span>
</div>
——————————————————————————服务 流程————————————————————————
<div id="ctext">
<img src="./image/img/homepage_29.png">项目洽谈，根据需求报价 <!--图片尺寸22 x 22px-->
<img src="./image/img/homepage_40.png">
<img src="./image/img/homepage_31.png">预付定金，开始设计
<img src="./image/img/homepage_40.png">
<img src="./image/img/homepage_34.png">修改定稿完成设计
<img src="./image/img/homepage_40.png">
<img src="./image/img/homepage_37.png">签收付尾款
</div>
<div id="liubai"></div>
<div id="liubai"></div>
</div>
<div id="button" >
<a href="./zhimei.html" style="color:black">主页 |</a>
<a href="./aboutus.html" style="color:black">关于至美 |</a>
<a href="./chenggong.html" style="color:black">成功案例 |</a>
<a href="./contant.html" style="color:black">在线咨询 </a>
<br>
<p>copyright © 2004-2015 至美创意工作室</p>
<p>技术支持:初秋二一</p>
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/190088.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月24日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录