html网页制作——云南美食网页设计美食网页介绍代码

最新推荐文章于 2024-03-29 10:32:08 发布

旧城空忆

最新推荐文章于 2024-03-29 10:32:08 发布

阅读量1.8k

点赞数 21

分类专栏：网页设计文章标签： javascript html css html5 前端美食

本文链接：https://blog.csdn.net/qq_3200628753/article/details/126212667

版权

网页设计专栏收录该内容

644 篇文章

订阅专栏

本文介绍了学生制作的家乡旅游景点网页，运用了HTML和CSS的基础知识，包括Div的嵌套、布局、CSS样式（如颜色、间距等）、鼠标悬停效果，以及表格和表单元素。适合初学者学习和理解网页设计与前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员登陆</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!----网站头部开始---->
<div class="top"><div class="logo"><img src="images/logo.png"/></div></div>
<div id="nav">
<ul>                            
<li><a href="index.html">首页</a></li>
<li><a href="about.html">云南简介</a></li>
<li><a href="xinpin.html">美食展示</a></li>
<li><a href="zuofa.html">云南米线</a></li>
<li><a href="denglu.html">会员登陆</a></li>
<li><a href="zhuce.html">会员注册</a></li>
</ul>
</div>
<!-----网站头部结束-------------->
<!------网站主体部分开始----------------------->
<div class="main">
<div class="banner2">
<img src="images/ban3.jpg" />
</div>
<div class="nr">
<div class="tit">会员登陆</div>
<div class="huiy">
  
  <div class="mc">
<form method="post" action="">
<div class="one">
<label for="username">用户名：</label>
<input type="text" id="username" class="a1" />
</div>
<div class="one">
<label for="passwowd">密码：</label>
<input type="password" id="password" class="a1" />
</div>

<div class="two">
<input type="submit" class="btn" id="send" value="提交" />
<input type="reset" class="btn" id="res" value="重置" />
</div>
</form>

                    </div>
                    <div id="form-company" class="reg-other">
      <div class="phone-fast-reg"></div>
    </div>


</div>

</div>

</div>
<!------网站主体结束--------------------------->
<!------网站底部分开始----------------------->
<div class="foot">
<div class="banq">
网站版权 云南美食网
</div>
</div>
<!------网站底部体结束--------------------------->
</body>
</html>

2.CSS样式代码 🏠

@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	font-size: 14px;
	font-family: "微软雅黑";
	line-height: 22px;
	background: url(../images/body-bg.jpg);
}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
	height: auto;
	margin: 0;
	; padding: 0;
	vertical-align: middle;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
	color: #333;
	text-decoration: none;
}

a:link {
	color: #333;
}

a:hover {
	color: #629705;
	text-decoration: none;
	overflow: hidden;
}

/*---网页开始-----*/

	line-height: 40px;
	color: #FFF;
	margin: 0 auto;
	text-align: center;
}
/*---foot结束-----*/