html前端静态网页项目模仿旅游和设计两类网站
Posted 小牛儿学JAVA
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html前端静态网页项目模仿旅游和设计两类网站相关的知识，希望对你有一定的参考价值。
直接上干货
html基础
项目介绍
前端练手项目（2）
项目实现必须对html和CSS有相应的基础，相对基础的前端网页设计，欢迎与作者交谈。希望对大家有所帮助！加油，你可以的！
总共两个项目一个致美创意和飘城旅游
致美创意
总共五个页面
部分源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>致美创意</title>
<style type="text/css">
body{margin:0px;padding: 0px;font-size: 13px;font-family: }
a{text-decoration: none;color: black;}
#Heading{width:100%;height: 30px;margin: 0px auto;background-image: linear-gradient(to top,#dadada,#f7f7f7);border-bottom: 1px solid #eeeeee;}
#img_heading_tel{float: right;margin-right: 150px;margin-top: 8px;}
#d_nav{width: 80%;margin: 0px auto;height: 99px;border: 0px solid black;}
#a_logo{width:195px ;height:41px ;float: left;display: inline;margin-top: 40px;margin-left: 180px;}
.a_nav{width: 80px;margin:0px 10px;font-size: 13px;float: left;text-align: center;display: inline;height: 29px;}
.a_nav:hover{font-weight: bold;}
#a_nav1{border-bottom: 3px solid black;}
#nav_nav{float: right;border: 0px solid black;width: ;margin-right: 134px;margin-top: 54px;}
.s_floot{float: left;display: inline;}
#a_imgbg{background: url(../../image/img/homepage_10.png) no-repeat center top;display: block;width: 1222px;height: 401px;margin: 0px auto;}
#d_body{width: 1050px;height: auto;margin: 0px auto;border: 0px solid black;margin-top: 45px;position: relative;}
#d_function{width: 950px;height: 110px;margin: 0px auto;border: 0px solid black;}
#d_function1{width: 108px;height: 110px;display: inline;margin-left: 70px;}
#d_exhib{margin-top: 80px;}
.d_head{text-align: center;font-weight: normal;color: red;font-size: 24px;border: 1px solid #dadbdc;text-shadow:1px -1px 1px #a31618;background:#2d3237;}
.hr_head{border-top: 2px solid #efe8e9;margin-top: 6px;}
#s_head_chinese{text-align: center;font-size: 14px;width: 76px;height: 14px;position: absolute;top: 222px;left: 482px;background: white;}
#d_exhid{margin-top: 46px;width: 100%;}
.d_bord{width: 172px;height: 300px;float: left;display: inline;margin:0px 20px;}
#d_bord1{background: #2d3237;margin-left: 10px;}
.a_bord_img1{background-image: url(../../image/img/homepage_30_29.png);display: block;width: 172px;height: 230px;}
.a_bord_chinese_1{color: red;display: block;margin-top: 14px;margin-left: 27px;line-height: 19px;}
.a_bord_chinese_2{color: black;display: block;margin-top: 14px;margin-left: 27px;line-height: 19px;}
.a_bord_english{color: white;display: block;margin-left: 27px;line-height: 19px;font-variant: small-caps;}
#d_bord2{background: red;}
.a_bord_img2{background-image: url(../../image/img/homepage_30_31.png);display: block;width: 172px;height: 230px;}
#d_bord3{background: #2d3237;}
.a_bord_img3{background-image: url(../../image/img/homepage_30_33.png);display: block;width: 172px;height: 230px;}
#d_bord4{background: red;}
.a_bord_img4{background-image: url(../../image/img/homepage_30_35.png);display: block;width: 172px;height: 230px;}
#d_bord5{background: #2d3237;}
.a_bord_img5{background-image: url(../../image/img/homepage_30_37.png);display: block;width: 172px;height: 230px;}
#d_about_us{margin-top: 400px;clear: both;text-align: center;}
.s_white{color: white;}
#s_head_about{position: absolute;font-size: 14px;width: 76px;height: 14px;top: 665px;left: 482px;background: white;}
#d_about_us_text{margin-top: 22px;color: #666666;}
#d_about_text{line-height: 27px;}
#h3_about_head{font-size: 18px;line-height: 34px;}
.b_font{font-size: 18px;}
#d_service{margin-top: 80px;}
#s_head_service{position: absolute;font-size: 14px;width: 76px;height: 14px;top: 909px;left: 482px;display: block;background:white;}
#d_process_content{margin: 48px auto ;border: 0px
solid black;width: 750px;height: 22px;overflow: visible;}
.image_process{float: left;margin-left: 14px;display: inline;margin-top: -2px;}
.s_process{color: #666666;display: inline;float: left;font-weight: bold;margin-left: 14px;}
.image_right{margin-right:8px;margin-top: 7px;float: left; }
#d_bottom{width: 100%;height: 100px;margin-top: 0px;text-align: center;background:rgb(234,234,234) ;}
#d_bottom_text{margin-top: 40px;line-height: 2em;}
#chu:hover{font-weight: bold;}
</style>
</head>
<body>
<div id="Heading">
<img src="../../image/img/homepage_03.png" id="img_heading_tel">
</div>
<div id="d_nav">
<a href="#" id="a_logo"><img src="../../image/img/homepage_07.png"></a>
<nav id="nav_nav">
<span>
<a href="index.html" class="a_nav" id="a_nav1">首页</a><span class="s_floot">|</span>
<a href="about.html" class="a_nav" >关于致美</a><span class="s_floot">|</span>
<a href="achieveme.html" class="a_nav" >成功案例</a><span class="s_floot">|</span>
<a href="news.html" class="a_nav" >新闻动态</a><span class="s_floot">|</span>
<a href="#" class="a_nav" >在线咨询</a><span class="s_floot">|</span>
<a href="contant.html" class="a_nav" >联系我们</a><span class="s_floot"></span>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_function">
<a id="d_function1" href="#"><img src="../../image/img/homepage_13.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_15.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_17.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_19.png"></a>
<a id="d_function1" href="#"><img src="../../image/img/homepage_21.png"></a>
</div>
<div id="d_exhib">
<div class="d_head">EXHIBITION</div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_chinese">案例演示</span>
</div>
<div id="d_exhid">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_bord_img1">
</a>
<a href="#" class="a_bord_chinese_1">品牌设计</a>
<a href="#" class="a_bord_english">BRAND DISIGN</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_bord_img2"></a>
<a href="#" class="a_bord_chinese_2">平面设计</a>
<a href="#" class="a_bord_english">GRAPHIC DISIGN</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_bord_img3"></a>
<a href="#" class="a_bord_chinese_1">网页设计</a>
<a href="#" class="a_bord_english">WEB DISIGN</a>
</div>
<div class=以上是关于html前端静态网页项目模仿旅游和设计两类网站的主要内容，如果未能解决你的问题，请参考以下文章
基于HTML电商项目的设计与实现——html静态网站基于数码类电商购物网站网页设计与实现共计30个页面...
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载...
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载
超酷超炫的汽车类前端静态页面html网站可用于毕业设计，项目开发（含html源码下载）
web期末网站设计大作业：鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作