新手练手的前端项目含源码 同时可作为html课程设计参考
直接上干货
html基础
项目介绍
项目实现必须对HTML和CSS有相应的基础，相对基础的前端网页设计，欢迎与作者交谈。希望对大家有所帮助！加油，你可以的！
总共两个项目一个致美创意和飘城旅游
致美创意
总共五个页面
部分源码：
<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">EXHIBITIONdiv>
<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 DISIGNa>
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 DISIGNa>
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 DISIGNa>
div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_bord_img4">a>
<a href="#" class="a_bord_chinese_2">电子设计a>
<a href="#" class="a_bord_english">ELECTRONIC DISIGNa>
div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_bord_img5">a>
<a href="#" class="a_bord_chinese_1">空间/建筑a>
<a href="#" class="a_bord_english">SPACE/<br/>ARCHITECTUREa>
div>
div>
<div id="d_about_us">
<div>
<div class="d_head">ABOUT <span class="s_white">USspan> div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_about">关于我们span>
div>
<div id="d_about_us_text">
<span id="h3_about_head">致美创意，因为<b class="b_font">专注b>，所有<b class="b_font">专业b>span>
<p id="d_about_text">无论您是创业路上的文艺青年、店面商铺的老板、需要强化品牌的企业家、网店店主....…<br/>我们都能为您提供高端、低价的设计，我们以最有效、最快速的方式为您提供最合适的设计方案p>
div>
div>
<div id="d_service">
<div>
<div class="d_head">SERVICE <span class="s_white">PROCESSspan> div>
<hr class="hr_head" color="#2d3237" />
<span id="s_head_service">服务流程span>
div>
<div id="d_process_content">
<img src="../../image/img/homepage_29.png" class="image_process"><span class="s_process">项目洽谈，根据需求报价span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_31.png" class="image_process">
<span class="s_process" class="s_process">预付订金，开始设计span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_34.png" class="image_process">
<span class="s_process">修改定稿，完成设计span>
<img src="../../image/img/homepage_40.png" class="image_right">
<img src="../../image/img/homepage_37.png" class="image_process">
<span class="s_process">签收付尾款span>
div>
div>
div>
<div id="d_bottom">
<div id="d_bottom_text">
<span><br>
<a href="" id="chu">首页a>|
<a href="" id="chu">关于致美a>|
<a href="" id="chu">成功案例a>|
<a href="" id="chu">在线咨询a>
span><br/>
<span>Copyright © 2014-2015 致美创意工作室span><br/>
技术支持：
<a href="" id="chu">凡客建站a> |
<a href="" id="chu">管理登录a>
div>
div>
body>
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: 1px solid}
#d_left{
width:20%;height: auto;border: 0px solid black;margin-top: 20px;float: left;}
#d_word{
height: 28px;width: 100%;border-bottom: 2px solid rgb(166,166,166);position: relative;}
.d_word_contant{
position: absolute;display: block;border-bottom: 2px solid rgb(255,86,0);width: 70px;top: 10px;font-size: 13px;}
#d_kefu{
margin-top: 5px;width: 100%;height: 60px;border-bottom: 2px dotted rgb(166,166,166);}
#kefu{
height:21px;width: 100%;margin-top: 8px; }
.d_kefu_s{
display:inline;margin-top: -2px;float: left;ma}
.zzz{
float: left;margin-left: 5px;}
#work_time{
margin-top: 10px;border-bottom: 2px dotted rgb(166,166,166);height: 90px;}
#d_work_time{
display: inline;margin-top: -2px;float: left;}
.d_work_tiem_word{
float: left;font-size: 16px;margin-left: 3px;}
#kong{
clear: both;margin-top: 15px;line-height: 2em;}
#d_content{
margin-top: 15px;}
.d_b{
clear: both;width: 100%;height: 16px;float: left;margin-top: 10px;}
#d_right{
width: 76%;height:750px;border: 0px solid black;float: right;margin-left:10px;margin-top: 20px;}
#d_logo{
width: 100%;height: auto;line-height: 2em;text-align: center;padding-top: 30px;color: rgb(93,93,93);}
.d_logo_why{
font-size: 20px;}
#d_fenxiang{
margin-top: 10px;width: 80%;height: 45px;border: 0px solid black;}
.d_img_fen{
float: left;display: inline;margin-left: 10px;}
.d_left{
float: left;}
#d_word_logo{
clear: both;margin-top: 10px;border-top: 2px dotted rgb(166,166,166);padding-right: 90px;}
/*.d_word_stype{line-height: 2em;}*/
.d_word_z{
text-indent: 21px;}
#d_button{
width:100%;height: 40px;text-align: center;margin-top: 20px;}
.button_d{
background-color:#fff;border: 1px solid rgb(219,234,239);margin-left: 10px;}
#d_bottom{
width: 100%;height: 100px;margin-top: 0px;text-align: center;background:rgb(234,234,234) ;clear: both;}
#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" >首页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" id="a_nav1">联系我们a><span class="s_floot">span>
span>
nav>
div>
<a href="#" id="a_imgbg">a>
<div id="d_body">
<div id="d_left">
<div id="d_word">
<span class="d_word_contant">在线客服span>
div>
<div id="d_kefu">
<div id="kefu">
<a href="#">
<img src="../../image/img/contant_03.png" class="d_kefu_s" /><span class="zzz">客服一span>a>
div>
<div id="kefu" >
<a href="#">
<img src="../../image/img/contant_03.png" class="d_kefu_s" /><span class="zzz"> 客服二
a>span>
div>
div>
<div id="work_time">
<img src="../../image/img/contant_33.png" id="d_work_time"/>
<b class="d_work_tiem_word">工作时间b><br/>
<div id="kong">
<span>周一至周五：8：30-17：30span><br/>
<span>周六至周日：9：00-17：00span>
div>
div>
<div id="d_content">
<img src="../../image/img/contant_39.png" id="d_work_time" />
<b class="d_work_tiem_word">联系方式b><br/>
<span class="d_b">陈经理：1300000span><br/>
div>
div>
<div id="d_right">
<div id="d_logo">
<span class="d_logo_why">为什么要设计logo？span>
<br/>2015-06-11 11:16
div>
<div id="d_fenxiang">
<span class="d_left">分享到：span>
<img src="../../image/img/contant_07.png" class="d_img_fen"><a class="d_left" href="#">复制网址a>
<img src="../../image/img/contant_11.png" class="d_img_fen"><a class="d_left" href="#">腾讯微博a>
<img src="../../image/img/contant_13.png" class="d_img_fen"><a class="d_left" href="#">新浪微博a>
<img src="../../image/img/contant_15.png" class="d_img_fen"><a class="d_left" href="#">QQ空间a>
<img src="../../image/img/contant_17.png" class="d_img_fen"><a class="d_left" href="#">开心网a>
<img src="../../image/img/contant_19.png" class="d_img_fen"><a class="d_left" href="#">人人网a>
<img src="../../image/img/contant_28.png" class="d_img_fen"><a class="d_left">
豆瓣网a>
<img src="../../image/img/contant_29.png" class="d_img_fen"><a class="d_left" href="#">搜狐微博a>
<img src="../../image/img/contant_30.png" class="d_img_fen"><a class="d_left" href="#">网易微博a>
<img src="../../image/img/contant_31.png" class="d_img_fen"><a class="d_left" href="#">百度空间a>
<img src="../../image/img/contant_39.png" class="d_img_fen"><a class="d_left" href="#">百度贴吧a>
div>
<div id="d_word_logo">
<p class="d_word_stype">logo传递的是一种精神和理念，他应该传递出公司的文化和生命，所以公司或者说是任何组织都应该有着自己相符的标志。p>
<br/>
<p class="d_word_stype">第一，展现品牌实力<br/>
<span class="d_word_z">logo是独一无二的，能够代表一个企业，所以让客户看了之后就会加深对企业的印象。如今的市场商品种类繁多，各种logo商标符号更是数不胜数，只有特点鲜明、容易辨认和记忆、含义深刻、造型优美的标志，才能在同业中突显出来。让它能够区别于其它企业、产品或服务，使受众对企业留下深刻印象，所以设计一个好的logo尤为重要。span>
p> <br/>
<p class="d_word_stype">
第二，展现品牌实力<br/>
<span class="d_word_z">
当客户开始了解一个企业或品牌时，他们所感觉到一不只是这家企业的产品和服务，他们肯定对企业的整体形象。有个自己的印象，比如说这家企业Logo是否经过专业设计﹖等等这些细节都将影响客户对这家企业或品牌实力的才考察。
span>
p><br/>
<p class="d_word_stype">
第三，提升企业形象<br/>
<span class="d_word_z">
logo代表着企业的经营理念，文化特色，价值取向，反映企业的产品特点，经营思路，是企业精神的具体象征。当客户看到我们的企业logo设计得非常专业，非常独特时，在心里就暗暗给这个企业加分，因为客户从logo识别中就可以看一个企业的气质，这些信息就能够告诉客户这是怎样的一个团队、这个团队具备什么样的影响力，因此一个好的logo对提升企业形象有很大的作用。
span>
p>
<br/>
<p class="d_word_stype">
第四，提高推广力度<br/>
<span class="d_word_z">
随着企业的经营和企业信息的不断传播，logo所代表的内涵越来越丰富。企业的经营活动，广告宣传，文化建设，公益活动都会被大众接受，并通过对logo符号的记忆刻画在脑海中，经过日积月累，当大众再次见到logo时，就会联系到曾经购买过的产品，曾经受到的服务，从而logo具备了能将企业与大众联系起来，成为连接企业与受众的桥梁。
span>
p>
div>
<div id="d_button">
<button class="button_d">上一篇button>
<button class="button_d">下一篇button>
div>
div>
div>
<div id="d_bottom">
<div id="d_bottom_text">
<span><br>
<a href="" id="chu">首页a>|
<a href="" id="chu">关于致美a>|
<a href="" id="chu">成功案例a>|
<a href="" id="chu">在线咨询a>
span><br/>
<span>Copyright © 2014-2015 致美创意工作室span><br/>
技术支持：
<a href="" id="chu">凡客建站a> |
<a href="" id="chu">管理登录a>
div>
div>
body>
html>
飘城旅游：
部分源码
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>风景欣赏title>
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/column.css">
head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社h1>
<nav class="link">
<h2 class="none">网站导航h2>
<ul>
<li><a href="飘城旅行社门户.html">首页a>li>
<li><a href="旅游咨询.html">旅游资讯a>li>
<li><a href="机票订购.html">机票订购a>li>
<li class="active"><a href="风景欣赏.html">风景欣赏a>li>
<li><a href="公司简介.html">公司简介a>li>
ul>
nav>
div>
header>
<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等h3>
hgroup>
div>
div>
<div id="container">
<aside class="sidebar">
<div class="sidebox recommend">
<h2>景点推荐h2>
<div class="tag">
<ul>
<li><a href="###">曼谷(12)a>li>
<li><a href="###">东京(5)a>li>
<li><a href="###">西双版纳(8)a>li>
<li><a href="###">漓江(16)a>li>
<li><a href="###">呼伦贝尔(4)a>li>
<li><a href="###">首尔(9)a>li>
<li><a href="###">巴厘岛(15)a>li>
<li><a href="###">土耳其(22)a>li>
<li><a href="###">夏威夷(5)a>li>
<li><a href="###">巴厘岛(11)a>li>
<li><a href="###">毛里求斯(7)a>li>
<li><a href="###">吉普岛(4)a>li>
<li><a href="###">希腊(18)a>li>
<li><a href="###">法瑞意(8)a>li>
<li><a href="###">马尔代夫(9)a>li>
<li><a href="###">新西兰(16)a>li>
<li><a href="###">埃及(11)a>li>
<li><a href="###">迪拜(14)a>li>
<li><a href="###">斯里兰卡(7)a>li>
<li><a href="###">麦哈顿(3)a>li>
<li><a href="###">大阪(15)a>li>
ul>
div>
div>
<div class="sidebox hot">
<h2>热门旅游h2>
<div class="figure">
<figure>
<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
<figcaption>曼谷-芭提雅6日游figcaption>
figure>
<figure>
<img src="img/hot2.jpg" alt="马尔代夫双鱼6日游">
<figcaption>马尔代夫双鱼6日游figcaption>
figure>
<figure>
<img src="img/hot3.jpg" alt="海南双飞5日游">
<figcaption>海南双飞5日游figcaption>
figure>
<figure>
<img src="img/hot4.jpg" alt="富山大阪东京8日游">
<figcaption>富山大阪东京8日游figcaption>
figure>
<figure>
<img src="img/hot5.jpg" alt="法瑞意德12日游">
<figcaption>法瑞意德12日游figcaption>
figure>
<figure>
<img src="img/hot6.jpg" alt="巴厘岛6日半游">
<figcaption>巴厘岛6日半游figcaption>
figure>
<figure>
<img src="img/hot7.jpg" alt="塞舌尔迪拜9日游">
<figcaption>塞舌尔迪拜9日游figcaption>
figure>
<figure>
<img src="img/hot8.jpg" alt="花样土耳其10日游">
<figcaption>花样土耳其10日游figcaption>
figure>
div>
div>
<div class="sidebox treasure">
<h2>旅游百宝箱h2>
<div class="box">
<a href="###" class="trea1">天气预报a>
<a href="###" class="trea2">火车票查询a>
<a href="###" class="trea3">航空查询a>
<a href="###" class="trea4">地铁线路查询a>
div>
div>
aside>
<div class="list scenery">
<section>
<h2>风景欣赏h2>
<figure>
<img src="img/s1.jpg" alt="曼谷-芭提雅">
<figcaption>曼谷-芭提雅[共8张]figcaption>
figure>
<figure>
<img src="img/s2.jpg" alt="马尔代夫双鱼岛">
<figcaption>马尔代夫双鱼岛[共12张]figcaption>
figure>
<figure>
<img src="img/s3.jpg" alt="海南">
<figcaption>海南[共19 张]figcaption>
figure>
<figure>
<img src="img/s4.jpg" alt="富山-大阪-东京">
<figcaption>富山-大阪-东京[共22张]figcaption>
figure>
<figure>
<img src="img/s5.jpg" alt="法瑞意德">
<figcaption>法瑞意德[共31张]figcaption>
figure>
<figure>
<img src="img/s6.jpg" alt="巴厘岛">
<figcaption>巴厘岛[共12张]figcaption>
figure>
<figure>
<img src="img/s7.jpg" alt="塞舌尔迪拜">
<figcaption>塞舌尔迪拜[共7张]figcaption>
figure>
<figure>
<img src="img/s8.jpg" alt="花样姐姐土耳其">
<figcaption>花样姐姐土耳其[共14张]figcaption>
figure>
section>
<div class="more">加载更多...div>
div>
div>
<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴h2>
<hr>
<ul>
<li>途牛旅游网li>
<li>驴妈妈旅游网li>
<li>携程旅游li>
<li>中国青年旅行社li>
ul>
div>
<div class="block center">
<h2>旅游FAQh2>
<hr>
<ul>
<li>旅游合同签订方式？li>
<li>儿童价是基于什么制定的？li>
<li>旅游的线路品质怎么界定的？li>
<li>单房差是什么？li>
<li>旅游保险有那些种类？li>
ul>
div>
<div class="block right">
<h2>联系方式h2>
<hr>
<ul>
<li>微博：weibo.com/yckuli>
<li>邮件：[email protected]li>
<li>地址：江苏盐城无名路123 号li>
ul>
div>
div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345div>
footer>
body>
html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>飘城旅行title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/basic.css">
head>
<body>
<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社h1>
<nav class="link">
<ul>
<h2 class="none">网站导航h2>
<li class="active"><a href="飘城旅行社门户.html">首页a>li>
<li><a href="旅游咨询.html">旅游资讯a>li>
<li><a href="机票订购.html">机票订购a>li>
<li><a href="风景欣赏.html">风景欣赏a>li>
<li><a href="公司简介.html">公司简介a>li>
ul>
nav>
div>
header>
<div id="search">
<div class="center">div>
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索button>
div>
<div id="tour">
<section class="center">
<h2>热门旅游h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐p>
section>
<figure>
<img src="img/tour1.jpg" alt="">
<figcaption>
<strong class="title"><曼谷-芭提雅6日游>strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券
<div class="info">
<em class="sat">满意度 77%em>
<span class="price">￥ <strong>2864strong> 起span>
div>
<div class="type">国内长线div>
figcaption>
figure>
<figure>
<img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6日自助游">
<figcaption>
<strong class="title"><马尔代夫双鱼岛Olhuveli4晚6日自助游>strong> 上海出发，机+酒包含:早晚餐+快艇
<div class="info">
<em class="sat">满意度 97%em>
<span class="price">¥ <strong>8039strong> 起span>
div>
<div class="type">出境长线div>
figcaption>
figure>
<figure>
<img src="img/tour3.jpg" alt="海南双飞5日游">
<figcaption>
<strong class="title"><海南双飞5日游>strong> 含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送
<div class="info">
<em class="sat">满意度 90%em>
<span class="price">¥ <strong>2709strong> 起span>
div>
<div class="type">自助旅游div>
figcaption>
figure>
<figure>
<img src="img/tour4.jpg" alt="富山-大阪-东京8日游">
<figcaption>
<strong class="title"><富山-大阪-东京8日游>strong> 暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物
<div class="info">
<em class="sat">满意度 97%em>
<span class="price">¥ <strong>9499strong> 起span>
div>
<div class="type">自助旅游div>
figcaption>
figure>
<figure>
<img src="img/tour5.jpg" alt="法瑞意德12日游">
<figcaption>
<strong class="title"><法瑞意德12日游>strong> 4至5星，金色列车，少女峰，部分THE MALL
<div class="info">
<em class="sat">满意度 97%em>
<span class="price">¥ <strong>9199strong> 起span>
div>
<div class="type">国内短线div>
figcaption>
figure>
<figure>
<img src="img/tour6.jpg" alt="巴厘岛6日半自助游">
<figcaption>
<strong class="title"><巴厘岛6日半自助游>strong> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
<div class="info">
<em class="sat">满意度 95%em>
<span class="price">¥ <strong>6488strong> 起span>
div>
<div class="type">出境长线div>
figcaption>
figure>
<figure>
<img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游">
<figcaption>
<strong class="title"><塞舌尔迪拜9日自助游>strong> 一游两国，4晚塞舌尔，2晚迪拜，香港EK往返
<div class="info">
<em class="sat">满意度 100%em>
<span class="price">¥ <strong>9669strong> 起span>
div>
<div class="type">游轮观光div>
figcaption>
figure>
<figure>
<img src="img/tour8.jpg" alt="花样姐姐土耳其9日或10日游">
<figcaption>
<strong class="title"><花样姐姐土耳其9日或10日游>strong> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾
<div class="info">
<em class="sat">满意度 93%em>
<span class="price">¥ <strong>9999strong> 起span>
div>
<div class="type">出境长线div>
figcaption>
figure>
<figure>
<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游">
<figcaption>
<strong class="title"><大阪-京都-箱根双飞6日游>strong> 盐城直飞，不走回头路，境外无自费，超值之旅
<div class="info">
<em class="sat">满意度 100%em>
<span class="price">¥ <strong>5284strong> 起span>
div>
<div class="type">国内短线div>
figcaption>
figure>
div>
<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴h2>
<hr>
<ul>
<li>途牛旅游网li>
<li>驴妈妈旅游网li>
<li>携程旅游li>
<li>中国青年旅行社li>
ul>
div>
<div class="block center">
<h2>旅游FAQh2>
<hr>
<ul>
<li>旅游合同签订方式？li>
<li>儿童价是基于什么制定的？li>
<li>旅游的线路品质怎么界定的？li>
<li>单房差是什么？li>
<li>旅游保险有那些种类？li>
ul>
div>
<div class="block right">
<h2>联系方式h2>
<hr>
<ul>
<li>微博：weibo.com/yckuli>
<li>邮件：[email protected]li>
<li>地址：江苏盐城无名路123 号li>
ul>
div>
div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证：L-YC-BK12345div>
footer>
body>
html>
@charset "utf-8";
#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2 {
color: #eee;
font-size: 36px;
letter-spacing: 1px;
}
#headline h3 {
color: #eee;
font-size: 20px;
letter-spacing: 1px;
}
#container {
width: 1263px;
margin: 30px auto;
}
#container .sidebar {
width: 340px;
float: right;
}
#container .sidebox {
border: 1px solid #eee;
margin: 0 0 10px 0;
text-align: center;
}
#container .sidebox h2 {
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
text-indent: 8px;
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #666;
text-align: left;
}
#container .tag {
padding: 10px 0;
}
#container .tag li {
display: inline-block;
width: 100px;
height: 35px;
line-height: 35px;
margin: 2px 0;
background-color: #eee;
text-align: left;
text-indent: 8px;
}
#container .tag a {
display: block;
color: #999;
}
#container .tag a:hover {
background-color: #458b00;
color: #fff;
}
#container .figure {
padding: 10px 0;
}
#container figure {
display: inline-block;
padding: 4px;
color: #666;
}
#container .box {
padding: 10px 0;
}
#container .box a {
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
margin: 2px 0;
text-align: left;
text-indent: 35px;
color: #999;
}
#container .box a.trea1 {
background: #eee url(../img/trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {
background: #eee url(../img/trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {
background: #eee url(../img/trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {
background: #eee url(../img/trea4.png) no-repeat 10px center;
}
#container .list {
width: 910px;
float: left;
}
#container .infor {
height: 45px;
line-height: 45px;
background-color: #eee;
margin: 0 0 20px 0;
}
#container .information .left {
display: inline-block;
float: left;
}
#container .information .left li {
display: inline-block;
width: 150px;
height: 43px;
line-height: 43px;
text-align: center;
}
#container .information .left li:first-child {
background-color: #fff;
border-top: 2px solid #458b00;
position: relative;
left: 1px;
}
#container .information .left a {
color: #666;
}
#container .information .right {
display: inline-block;
padding: 0 20px 0 0;
float: right;
}
#container .information .right li {
display: inline-block;
width: 60px;
height: 45px;
line-height: 45px;
text-align: center;
}
#container .information .right a {
padding: 3px 8px;
color: #666;
}
#container .information .right a.selected, #container .information .right a:hover {
background-color: #458b00;
color: #fff;
}
#container .tour {
width: 908px;
padding: 0;
margin: 0 0 20px 0;
border: 1px solid #eee;
position: relative;
}
#container .tour img {
float: left;
}
#container .tour figcaption {
width: 528px;
height: 230px;
float: right;
}
#container .tour hgroup {
width: 300px;
}
#container .tour h2 {
font-size: 24px;
color: #333;
font-weight: normal;
padding: 10px 0 10px 25px;
}
#container .tour h3 {
font-size: 16px;
color: #666;
line-height: 1.5;
font-weight: normal;
padding: 10px 0 10px 25px;
}
#container .tour ol {
padding: 0 0 0 25px;
color: #666;
line-height: 2;
}
#container .tour mark {
background-color: #fff;
border: 1px solid #458b00;
border-radius: 4px;
padding: 0 5px;
color: #458b00;
}
#container .tour .buy {
position: absolute;
top: 55px;
right: 30px;
}
#container .tour .price {
color: #f60;
font-size: 20px;
}
#container .tour .price strong {
font-size: 36px;
}
#container .tour .price s {
font-size: 16px;
color: #999;
}
#container .tour .reserve {
margin: 10px 0 0 0;
}
#container .tour .reserve a {
display: block;
width: 152px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 4px;
font-size: 20px;
color: #fff;
background-color: #f60;
}
#container .tour .type {
width: 90px;
height: 25px;
line-height: 25px;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #59b200;
position: absolute;
top: 0;
left: 0;
}
#container .tour .disc {
position: absolute;
top: 0;
right: 0;
width: 52px;
height: 52px;
background: url(../img/disc.png) no-repeat;
}
#container .tour .disc span {
display: block;
transform: rotate(45deg);
width: 52px;
height: 52px;
padding: 5px 0 0 0;
text-indent: 7px;
font-size: 14px;
color: #ff7a4d;
}
#container .tour footer {
width: 528px;
height: 30px;
line-height: 30px;
letter-spacing: 1px;
text-indent: 25px;
background-color: #fafafa;
position: absolute;
bottom: 0;
}
#container .tour time {
color: #458b00;
}
#container .information .more {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
border: 1px solid #ccc;
background-color: #fafafa;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
color: #666;
}
#container .ticket {
color: #666;
font-size: 20px;
}
#container .ticket h2 {
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #999;
padding: 0 0 15px 0;
font-size: 30px;
font-weight: normal;
}
#container .ticket .type {
margin: 20px 0 10px 0;
}
#container .ticket .type mark {
color: #fff;
background-color: #458b00;
padding: 5px 8px;
border-radius: 4px;
margin: 0 10px 0 16px;
}
#container .ticket .left {
width: 43%;
display: inline-block;
}
#container .ticket .right {
width: 43%;
display: inline-block;
}
#container .ticket .button {
width: 9%;
display: inline-block;
}
#container .ticket .submit {
display: block;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 4px;
font-size: 20px;
color: #fff;
background-color: #f60;
border: none;
position: relative;
top: 8px;
cursor: pointer;
}
#container .ticket .form p {
line-height: 3;
}
#container .ticket .form input {
width: 250px;
height: 30px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ccc;
color: #666;
padding: 5px;
margin: 0 0 0 16px;
font-size: 18px;
}
#container .ticket .new {
margin: 20px 0 0 0;
}
#container .ticket .new ul {
margin: 20px 0 0 0;
}
#container .ticket .new li {
display: inline-block;
padding: 5px 10px;
}
#container .ticket .new li:first-child {
padding-left: 0;
}
#container .ticket .new li:nth-child(2) {
background-color: #458b00;
color: #fff;
border-radius: 4px;
}
#container .ticket table {
margin: 20px 0 0 0;
width: 100%;
border: 1px solid #ddd;
border-collapse: collapse;
}
#container .ticket th {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ddd;
}
#container .ticket td {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ddd;
text-align: center;
}
#container .ticket tr:nth-child(2n) {
background-color: #fafafa;
}
#container .ticket tr:hover {
background-color: #eee;
}
#container .ticket .price {
color: #f60;
}
#container .ticket .more {
color: #666;
}
#container .ticket .reserve {
display: inline-block;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
border-radius: 4px;
font-size: 20px;
color: #fff;
background-color: #f60;
}
#container .scenery figure {
border: 1px solid #ddd;
display: inline-block;
padding: 4px;
border-radius: 4px;
margin: 15px 5px 15px 0;
width: 435px;
text-align: left;
}
#container .scenery figcaption {
text-align: center;
padding: 5px 0;
}
#container .about p {
line-height: 2;
margin: 20px 0;
}
#container .about address {
line-height: 1.6;
margin: 20px 0;
font-style: normal;
}