目录
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
一、网页概述
本实例应用html5+css3： Div、导航栏、留言表单、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>美食网</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<div class="top">
<div id="nav">
<div class="logo">logo</div>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="wenhua.html">饮食文化</a></li>
<li><a href="fenlei.html">美食分类</a></li>
<li><a href="zhuce.html">用户注册</a></li>
<li><a href="denglu.html">用户登录</a></li>
<li><a href="liuyan.html">用户留言</a></li>
</ul>
</div>
</div>
<div class="i-div">
<div class="i-div-ner">
<div class="idiv1">
<img src="images/img1.jpg" />
<h1>辣味美食</h1>
<p>辣味在众多味觉感受中最为奇特，它不似其它味道那么绵软，作为味觉感受中的一份子，吸引着人类不断尝试。</p>
</div>
<div class="idiv1 green">
<img src="images/img2.jpg" />
<h1>绿色美食</h1>
<p>绿色食品定为A级和AA级两个标准。A级允许限量使用限定的化学合成物质，而AA级则禁止使用。</p>
</div>
<div class="idiv1 color2">
<img src="images/img3.jpg" />
<h1>养生美食</h1>
<p>药补不如食补,饮食养生是我国中医一个重要的传统理论，在长期的实践中积累了极为丰富的经验。</p>
</div>
<div class="idiv1 color3 mar0">
<img src="images/img4.jpg" />
<h1>甜品美食</h1>
<p>诱人的零食大多都是甜品，糕点是甜品，干果饮料是甜品，甜滑的口感让人心情愉悦，给人以幸福感。</p>
</div>
</div>
</div>
<div class="foot"><img src="images/logo.png" /></div>
</div>
</body>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
font-size: 12px;
font-family: "微软雅黑",arial;
line-height: 22px;
background: #f9fae1;
}
div,p,input,ul,li,p,h1,h2,h3 {
height: auto;
margin: 0;
; padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a:link {
color: #333;
}
a:hover {
color: #629705;
text-decoration: none;
overflow: hidden;
}
img {
border: 0;
margin: 0;
padding: 0;
}
.main {
width: 1400px;
height: auto;
margin: 0 auto;
background: #FFF;
}
.top {
height: 545px;
background:url(../images/top.jpg) no-repeat;
}
#nav{
width:1400px;
height:100px;
background:#000000;
background-color:rgba(0,0,0,0.5);
position:absolute;
z-index:9999;
}
.logo{
width:206px;
height:54px;
float:left;
margin-top:19px;
margin-left:110px;
}
#nav ul{
display:block;
width:780px;
height:50px;
float:right;
margin-right:70px;
margin-top:36px;
}
#nav ul li{
height:50px;
line-height:50px;
float:left;
margin:0px 30px;
float:left;
}
#nav ul li a{
color:#FFF;
font-size:18px;
}
.i-div{
width:1400px;
height:942px;
background:url(../images/ibg.jpg) no-repeat;
}
.i-div-ner{
width:1200px;
height:570px;
padding-top:20px;
margin:0 auto;
}
.idiv1{
width:285px;
height:570px;
float:left;
background:#282828;
margin-right:17px;
}
.idiv1 img{
margin-bottom:15px;
}
.idiv1 h1{
height:35px;
line-height:35px;
color:#FFF;
font-size:18px;
padding:0px 17px;
}
.idiv1 p{
padding:0px 17px;
line-height:25px;
font-size:14px;
color:#FFF;
}
.mar0{
margin-right:0px !important;
}
.green{
background:#4d7c0b !important;
}
.color2{
background:#e16d0d !important;
}
.color3{
background:#67554b !important;
}
.foot{
height:136px;
width:1400px;
background:#272727;
text-align:center;
}
.foot img{
margin-top:43px;
}
/* 饮食文化 */
.whdiv{
width:1400px;
height: auto;
overflow:hidden;
background:#FFF;
}
.whdiv-ner{
width:1200px;
padding-top:20px;
margin:0 auto;
}
.title{
height:67px;
padding-top:30px;
margin-bottom:27px;
text-align:center;
}
.title h1{
height:37px;
line-height:37px;
font-size:22px;
font-weight:normal;
}
.title h2{
height:30px;
line-height:30px;
font-size:16px;
font-weight:normal;
}
.wh{
width:1200px;
height:818px;
}
.wh-left{
width:298px;
height:795px;
float:left;
padding-top:20px;
}
.wh-left img{
margin-bottom:20px;
}
.wh-right{
width:854px;
height:694px;
float:left;
}
.wshang{
height:490px;
}
.wshang .tit{
width:60px;
float:right;
}
.wshang .wenzi{
width:794px;
height:460px;
float:right;
padding-top:20px;
}
.wshang .wenzi .tit2{
width:48px;
height:245px;
float:right;
margin-left:15px;
}
.wshang .wenzi p {
color:#272727;
width: 30px;
float: right;
font-size: 16px;
line-height: 18px;
border-right:#333 1px solid;
padding: 0px 2px;
margin-right:10px;
margin-right: 10px;
text-align: right;
}
.wxia{
height:213px;
}
.wxia img{
margin-left:88px;
}
/* 饮食分类 */
.fenlei{
width:1200px;
height:590px;
margin-bottom:47px;
}
.fenlei .titf{
width:185px;
height:70px;
margin:0 auto;
margin-bottom:35px;
}
.fenlei ul{
padding:0px;
margin:0px;
}
.fenlei ul li{
width:251px;
height:483px;
float:left;
margin-right:65px;
text-align:center;
}
.fenlei ul li img{
margin-bottom:5px;
}
.fenlei ul li h1{
height:33px;
line-height:33px;
font-weight:normal;
color:#181818;
font-size:20px;
}
.fenlei ul li h2{
display:block;
width:55px;
height:27px;
border-bottom:#F00 1px solid;
font-size:16px;
line-height:27px;
font-weight:normal;
margin:0 auto;
margin-bottom:17px;
}
.fenlei ul li p{
line-height:23px;
font-size:14px;
color:#1a1a1a;
font-family:"宋体";
}
/* 用户注册 */
.zhuce{
height:575px;
padding-top:20px;
}
.zhuce-left{
width:690px;
height:595px;
float:left;
text-align:center;
}
.zhuce-right{
width:378px;
height:383px;
float:left;
background:#fcf0e0;
}
.zhuce-right .div1{
height:30px;
text-align:right;
padding-right:10px;
}
.zhuce-right .div2{
height:37px;
line-height:37px;
font-size:16px;
color:#080808;
margin-bottom:12px;
padding-left:35px;
}
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
标签：css3,Web,right,网页,height,width,font,margin,left From： https://blog.csdn.net/m0_67368443/article/details/144547701