一谊路、??作品介紹
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 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎揍堕、計算機基礎到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術文章 + 資源分享）
