一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239948
(title-F99JP 上海美食 5页 无js 带留言表单)]
🧩 截图演示
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱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" />
<link href="css/shouye.css" type="text/css" rel="stylesheet" />
<title>上海美食</title>
</head>
<body style="height:1000px;">
<div class="sum">
<div class="banner"><img src="img/banner.jpg" />
</div>
<div class="menu">
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="zhongcan.html">美食展示</a></li>
<li><a href="meishizhizuo.html">美食制作</a></li>
<li><a href="mingdian.html">名店搜罗</a></li>
<li><a href="liuyan.html">留言板</a></li>
</ul>
</div>
<div class="null"></div>
<div class="content">
<div class="content_left">
<div class="login">
<div class="login_top">登陆</div>
<div class="user">用户名：
<input type="text" size="20" />
</div>
<div class="pass">密 码：
<input type="password" size="20" />
</div>
<div class="down">
<input type="button" value="登 陆" />
<input type="button" value="注 册" />
</div>
</div>
<div class="lnull"></div>
<img src="img/hh1.jpg" width="200" />
</div>
<div class="content_right">
<div class="zhuce" >
<div class="zhuce_info">姓名：
<input />
</div>
<div class="zhuce_info">电话：
<input />
</div>
<div class="zhuce_info">邮箱：
<input />
</div>
<div class="zhuce_info">手机：
<input />
</div>
<div class="">留言：
<textarea style="width:460px; height:250px; border:1px solid #000; float:right;"></textarea>
</div>
<div class="subout">
<div class="sub" ><a href="#">提交</a></div>
<div class="sub" ><a href="#">重置</a></div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<p align="center" style="line-height:60px; color:#fff;">欢迎光临</p>
</div>
</div>
</body>
</html>
🏠CSS代码
*{ margin:0; padding:0; font-family:Microsoft YaHei;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{ }
.em{ text-indent:2em;}
p{ font-size:14px; line-height:24px; color:#555;}
body {
margin:0;
padding:0;
}
.null {
width:1000px;
height:20px;
}
.sum {
width:1000px;
margin:0 auto;
height:auto;
}
#div1 {
width: 60px;
height: 80px;
position: absolute;
right: 0;
bottom: 0;
color: #FFF;
background-color: #990;
}
.menu {
font-family: arial, sans-serif;
width:1000px;
margin:0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:34px;
color:#fff;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#0362a4;
line-height:34px;
width:199px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none; z-index:99999;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:34px;
left:0;
width:105px; z-index:99999;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7; z-index:99999;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
color:#000;
background-color:#f00; z-index:99999;
}
.content {
width:1000px;
height:600px;
}
.content_left {
width:240px;
height:600px;
float:left;
}
.login {
width:238px;
height:268px;
border:1px solid #CCCCCC;
}
.login_top {
width:238px;
height:40px;
font-size:20px;
color:#333333;
line-height:40px;
text-align:center;
}
.user {
width:238px;
height:60px;
font-size:18px;
}
.pass {
width:238px;
height:60px;
font-size:18px;
}
.right_main{ padding:10px;}
.down {
width:200px; padding-left:30px;
height:88px;
}
.lnull {
width:240px;
height:30px;
}
.list {
width:238px;
height:298px;
border:1px solid #CCCCCC;
}
.list_one_sum {
width:218px;
height:248px;
padding:0 10px 0 10px;
}
.list_one {
width:218px;
height:30px;
border-bottom:1px dotted #CCCCCC;
line-height:30px;
font-size:14px;
}
.list_one_left {
width:30px;
height:30px;
float:left;
}
.list_one_center {
width:138px;
height:30px;
float:left;
}
.list_one_right {
width:50px;overflow:hidden;
height:30px;
float:left;
font-size:11px;
color:#666666;
}
.list_one a {
text-decoration:none;
color:#666666;
}
.list_one a:hover {
text-decoration:underline;
color:#003300;
}
.content_right {
width:740px;
float:right;
height: auto;
}
.content_top {
width:740px;
height:280px;
}
.content_null {
width:740px;
height:20px;
}
.content_down {
width:740px;
height:300px;
}
.content_down_left {
width:360px;
height:300px;
float:left;
}
.content_down_right {
width:360px;
height:300px;
float:right;
}
.foot {
width:1000px; margin-top:30px;
height:60px; background:#0362a4; color:#fff;
}
.top {
width:320px;
margin:0 auto;
}
.foot_top li {
list-style:none;
font-size:14px;
width:80px;
height:40px;
float:left;
}
.foot_top li a {
text-decoration:none;
color:#666666;
}
.foot_top li a:hover {
color:#FF0000;
}
.foot_down {
text-align:center;
font-size:14px;
color:#666666;
}
.zhuce{width:600px; height:300px; margin:auto; margin-top:80px; margin-left:80px; font-size:16px; color:#222;}
.zhuce_info{width:600px; height:30px; margin:10px auto;}
.zhuce_info input{ width:450px; height:20px; padding:5px; border:1px solid #333; font-size:14px; color:#333; float:right;}
.subout{width:400px; height:50px; margin-left:200px; font-size:18px; color:#222;}
.sub{width:120px; height:25px; padding:5px; margin:10px; float:left; background-color:#900; text-align:center; }
.sub:hover{ background-color:#000;}
.sub a{ font-size:18px; color:#fff;}
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
