前端设计（郑州旅游网站）

劳资蜀道山^

已于 2024-01-08 20:15:16 修改

阅读量490

点赞数 11

文章标签：前端旅游

于 2024-01-08 19:25:56 首次发布

本文链接：https://blog.csdn.net/qq_73069979/article/details/135464491

版权

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

<p>郑州，古称商都，河南省省会，地处中国华中地区、黄河下游、中原腹地、河南中部偏北，

位于黄河中下游和伏生山脉东北翼向黄淮平原过渡的交接地带，西部高，东部低，中部高，东北低或东南低；

属北温带大陆性季风气候，四季分明。郑州是华夏文明的重要发祥地、

国家历史文化名城、国家重点支持的六个大遗址片区之一、世界历史都市联盟成员。

郑州历史上曾五次为都，拥有不可移动文物近万处，其中世界文化遗产2处，

全国重点文物保护单位74处80项。</p>

<table>

<tr>

</tr>

</table>

</div>

</body>

</html>

.all {}

audio {

display: none;

}

* {

margin: 0px;

padding: 0px;

}

.logo {

height: 520px;

background-color: #331a84;

}

.logo img {

height: 520px;

width: 100%;

}

.nav {

height: 32px;

background-color: #2d2b5a;

}

.nav ul {

list-style-type: none;

}

.nav li {

float: left;

width: 100px;

height: 32px;

text-align: center;

line-height: 32px;

}

.nav li a {

text-decoration: none;

color: gray;

display: block;

}

.nav li:hover {

background-color: darkgray;

}

.nav::after,

.main::after,

.right::after {

content: ".";

display: block;

visibility: hidden;

height: 0px;

clear: both;

}

.main {

margin-left: 500px;

}

.left {

float: left;

background-color: bisque;

margin-left: -500px;

min-height: 500px;

width: 500px;

}

.right {

background-color: #331a84;

min-height: 500px;

}

.footer {

border-radius: ;

background-color: #331a84;

height: 80px;

position: relative;

top: 520px;

}

.footer p {

text-align: center;

line-height: 80px;

width: 100%;

}

.right h4 {

text-align: center;

color: darkgray;

}

.right {

color: darkgray;

}

.right img {

height: 400px;

width: 400px;

margin: 6px;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="logo"><span>我们的美食</span></div>

<ul>

</ul>

</div>

<ul>

<li>图一:

胡辣汤是一种在郑州非常流行的风味小吃之一。

大街小巷的各种早餐铺子都可以看到它的踪影，

郑州王师傅胡辣汤味道突出胡椒的椒香，

来一碗有内容的胡辣汤，配以炸油馍或煎包、馅饼，

那可是一顿让你由里及外温暖的早餐。在郑州最有名的当属逍遥镇胡辣汤。</li>

<li>图二: 郑州最为代表性的美食，口味多样、汤好面筋郑州烩面：是郑州市的特色美食，

有着悠久的历史。按配料的不同可分为：羊肉烩面，牛肉烩面，三鲜烩面，五鲜烩面等等。

其特点：汤好面筋，味道鲜美、营养高。</li>

<li>图三:新郑红枣又名鸡心大枣、鸡心枣，是河南省郑州市新郑市的特产，

素有 “灵宝苹果潼关梨，新郑大枣甜似蜜”的盛赞。红枣味甜、性温，是补血健脾美容的滋补佳果，

而新郑大枣以其皮薄、肉厚、核小、味甜备受人们青睐，成为枣类中的佼佼者。</li>

<li>图四: 郑州特色小吃，油润明亮，鲜嫩软香。铁锅蛋：是当地很有特点的一道菜，相传始创于清末，

距今已有百年历史。</li>

</ul>

</div>

<tr>

</tr>

</table class="a2">

</div>

</body>

</html>

audio {

display: none;

}

* {

margin: 0px;

padding: 0px;

}

.all {}

.logo {

height: 180px;

background-color: #483D8B;

position: relative;

}

.nav {

height: 32px;

background-color: #331a84;

}

.nav ul {

list-style-type: none;

}

.nav li {

float: left;

width: 100px;

height: 32px;

line-height: 32px;

text-align: center;

}

.nav li a {

text-decoration: none;

color: #FAD7D7;

display: block;

}

.nav li:hover {

background-color: darkgray;

}

.nav::after,

.main::after {

content: ".";

display: block;

visibility: hidden;

height: 0px;

clear: both;

}

.main {

margin-left: 200px;

}

.left {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

text-indent: 20px;

border: 1px solid black;

float: left;

background-color: #331a84;

margin-left: -200px;

width: 200px;

min-height: 540px;

}

.right {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

overflow: hidden;

background-color: #C0D9DD;

min-height: 540px;

margin-left: 30px;

margin-top: 20px;

}

.footer {

border-radius: 10px 10px 10px 10px;

background-color: #6495ED;

min-height: 150px;

text-align: center;

line-height: 150px;

}

.a1 img {

height: 266px;

width: 505px;

}

td {

width: 505px;

}

.left li {

color: darkgray;

font-size: 13px;

}

span {

position: absolute;

font-size: 90px;

opacity: 0.8;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</ol></div>

</div>

</body>

</html>

* {

margin: 0px;

padding: 0px;

}

.all {}

.logo {

height: 180px;

background-color: #C0D9DD;

width: 100%;

}

.logo #id2 {

height: 180px;

width: 180px;

float: left;

}

.nav {

height: 32px;

background-color: #331a84;

}

.nav ul {

list-style-type: none;

}

.nav li {

float: left;

width: 100px;

height: 32px;

line-height: 32px;

text-align: center;

}

.nav li:hover {

background-color: darkgray;

}

.nav li a {

text-decoration: none;

color: lightsteelblue;

display: block;

}

.nav::after,

.main::after,

.logo::after {

content: ".";

display: block;

visibility: hidden;

height: 0px;

clear: both;

}

.main {

margin-left: 200px;

}

.left {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

text-indent: 20px;

border: 1px solid black;

float: left;

background-color: #331a84;

margin-left: -200px;

width: 200px;

min-height: 570px;

}

.right {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

overflow: hidden;

background-color: #C0D9DD;

min-height: 500px;

margin-left: 30px;

margin-top: 20px;

}

.footer {

border-radius: 10px 10px 10px 10px;

background-color: #6495ED;

min-height: 150px;

text-align: center;

line-height: 150px;

}

span {

font-size: 150px;

height: 180px;

line-height: 180px;

text-align: center;

padding-left: 139px;

}

#id1 {

height: 180px;

width: 180px;

float: right;

}

.left a {

text-decoration: none;

color: lightsteelblue;

line-height: 35px;

}

video {

height: 572px;

width: 100%;

}

.demo {

width: 600px;

height: 200px;

background: url(../img/bp.jpg) no-repeat;

}

.demo1 {

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.8);

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="logo"><span>郑州欢迎您</span></div>

<ul>

</ul>

</div>

<ul>

<li>图一: 郑州黄河风景名胜区，

位于河南省郑州市西北二十公里处黄河之滨南依巍巍岳山，

北临滔滔黄河。</li>

<li>图二: 少林寺是我国久负盛名的佛教寺院，

位于登封市西12公里处的嵩山五乳峰下，是嵩山风景区的主要核心景区之一。</li>

<li>图三: 有着天下第一名刹少林寺的嵩山，坐落在河南省登封市西北，

主体由太室山、少室山东西两座大山组成。</li>

<li>图四: 嵩阳书院位于河南省登封市中岳嵩山南麓，紧临登封市区，

是我国宋代最高学府之一，北宋时期中国四大书院之首。</li>

</ul>

</div>

<tr>

</tr>

</table class="a2">

</div>

</body>

</html>

audio {

display: none;

}

* {

margin: 0px;

padding: 0px;

}

.all {}

.logo {

height: 180px;

background-color: #483D8B;

position: relative;

}

.nav {

height: 32px;

background-color: #331a84;

}

.nav ul {

list-style-type: none;

}

.nav li {

float: left;

width: 100px;

height: 32px;

line-height: 32px;

text-align: center;

}

.nav li a {

text-decoration: none;

color: #FAD7D7;

display: block;

}

.nav li:hover {

background-color: darkgray;

}

.nav::after,

.main::after {

content: ".";

display: block;

visibility: hidden;

height: 0px;

clear: both;

}

.main {

margin-left: 200px;

}

.left {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

text-indent: 20px;

border: 1px solid black;

float: left;

background-color: #331a84;

margin-left: -200px;

width: 200px;

min-height: 540px;

}

.right {

box-shadow: darkgray 2px 2px 2px 2px;

border-radius: 10px 10px 10px 10px;

overflow: hidden;

background-color: #C0D9DD;

min-height: 540px;

margin-left: 30px;

margin-top: 20px;

}

.footer {

border-radius: 10px 10px 10px 10px;

background-color: #6495ED;

min-height: 150px;

text-align: center;

line-height: 150px;

}

.a1 img {

height: 266px;

width: 505px;

}

td {

width: 505px;

}

.left li {

color: darkgray;

}

span {

position: absolute;

font-size: 90px;

opacity: 0.8;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</div>

<form>

</form>

</div>

</body>

</html>

CSS部分

.all {}

audio {

display: none;

}

* {

margin: 0px;

padding: 0px;

}

.nav {

height: 32px;

background-color: #5e546c;

}

.nav ul {

list-style-type: none;

}

.nav li {

float: left;

width: 100px;

height: 32px;

text-align: center;

line-height: 32px;

}

.nav li a {

text-decoration: none;

color: #fad7d7;

display: block;

}

.nav li:hover {

background-color: #FF0000;

}

.nav::after,

.main::after {

content: ".";

display: block;

visibility: hidden;

height: 0px;

clear: both;

}

.main {

margin-left: 500px;

}

.footer p {

text-align: center;

line-height: 80px;

}

form {

width: 400px;

height: 250px;

background-color: #5e546c;

padding: 120px 100px;

font-size: 18px;

border-radius: 10px;

margin: 120px auto

}

.textinput {

height: 40px;

width: 300px;

padding: 0px 35px;

border: none;

background-color: gainsboro;

font-size: 15px;

box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);

border-radius: 5px;

color: #333333;

}

input[type="submit"] {

width: 110px;

height: 40px;

text-align: center;

border-radius: 5px;

font: 16px "黑体";

background-color: gainsboro;

}

.right value:hover {

background-color: #FF0000;

}

body {

background: url(../img/z6.jpg);

background-repeat: no-repeat;

background-size: 100%;

opacity: 0.8;

}

劳资蜀道山^

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端设计（郑州旅游网站）

中国郑州
复制链接

扫一扫

前端设计（郑州旅游网站）

“相关推荐”对你有帮助么？