目录
一、网页概述
本实例应用html5+css3，代码简单，带实验报告。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
本网页共包含1个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/void_zero.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="warp">
<div id="header">
<div id="back1">
<img src="img/img_gg/mt_03.jpg" alt="" />
</div>
<div id="back2">
<img src="img/img_gg/mt_06.jpg" alt="" />
</div>
<div id="header_tit">
<p id="p_tit">奉行卓越品质</p>
<p id="p_tit">则可拥抱世界</p>
</div>
<div id="head_div_menu">
<ul id="menu">
<li id="menufenge"><a id="head_a" href="index.html"><p id="head_p">网站首页</p></a></li>
<li id="menufenge"><a id="head_a" href="html/gywm.html"><p id="head_p">关于我们</p></a></li>
<li id="menufenge"><a id="head_a" href="html/xwzx.html"><p id="head_p">新闻资讯</p></a></li>
<li id="menufenge"><a id="head_a" href="html/cgal.html"><p id="head_p">成功案例</p></a></li>
<li id="menufenge"><a id="head_a" href="html/zxfu.html"><p id="head_p">尊享服务</p></a></li>
<li id="menufenge"><a id="head_a" href=""><p id="head_p">招商加盟</p></a></li>
<li id="menufenge"><a id="head_a" href=""><p id="head_p">联系我们</p></a></li>
</ul>
</div>
</div>
<div id="clear">
<div id="back_photo">
<div id="photo">
<img src="img/img_index/111.png" >
</div>
<div id="word">
<p id="p1">跨屏时代 全网营销</p>
<p id="p2">CROSS SCREEN THE WHOLE <br >
NETWORK MARKETING.</p>
<p id="buton">了解更多>>></p>
</div>
</div>
</div>
<div id="main_top">
<div id="main_title1">
<p id="p1">战略合作 Strategic partners</p>
<p id="p2">真诚、共赢、无微不至</p>
</div>
<div id="main_photo">
<div id="photo"><a href="http://www.dangdang.com"><img src="img/img_index/01.png" alt=""></a></div>
<div id="photo"><a href="https://www.tmall.com/"><img src="img/img_index/02.png" alt=""></a></div>
<div id="photo"><a href="https://www.jd.com/"><img src="img/img_index/03.png" alt=""></a></div>
<div id="photo"><a href="https://www.sina.com.cn/"><img src="img/img_index/04.png" alt=""></a></div>
<div id="photo"><a href="https://www.vip.com/"><img src="img/img_index/05.png" alt=""></a></div>
<div id="photo"><a href="#"><img src="img/img_index/06.png" alt=""></a></div>
<div id="photo"><a href="https://www.vanke.com/"><img src="img/img_index/07.png" alt=""></a></div>
<div id="photo"><a href="https://www.evergrande.com/"><img src="img/img_index/08.png" alt=""></a></div>
<div id="photo"><a href="https://www.ldjt.com.cn/"><img src="img/img_index/09.png" alt=""></a></div>
<div id="photo"><a href="https://www.bgy.com.cn/"><img src="img/img_index/10.png" alt=""></a></div>
<div id="photo"><a href="http://www.polycn.com/"><img src="img/img_index/11.png" alt=""></a></div>
<div id="photo"><a href="https://www.longfor.com/"><img src="img/img_index/12.png" alt=""></a></div>
</div>
</div>
<div id="main_center">
<div id="main_title2">
<p id="p1">我们的优势Our Advantages</p>
<p id="p2">创独一无二的设计,造国际品质的产品，行无微不至的服务</p>
</div>
<div id="main_our">
<div id="ph">
<div id="ph_tit" class="ph_tit1">
</div>
<div id="over">
<p id="tit">我们的设计Our Design</p>
<p id="txt">从实地到方案敲定再到设计出图，每一步都有优秀的设计团队全程跟踪，为您打造
出最合适的作晶是最诚恳的义务。</p>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
#header{
width: 1140px;
height:100px;
margin: 0 auto;
}
#back1{
width: 254px;
height: 100px;
float: left;
line-height: 100px;
}
#back2{
margin: 0 20px 0 30px;
width: 9px;
height: 100px;
float: left;
line-height: 100px;
}
#header_tit{
padding: 25px 0 0 0;
float: left;
}
#head_div_menu{
margin: 28px 0 0 0 ;
float: right;
}
#p_tit{
margin: 5px 0 0 0;
font-size: 12px;
font-style: italic;
color: #9598A2;
}
#header #menufenge{
width: 88px;
height: 72px;
float: left;
line-height: 72px;
padding: 0 5px 0 5px;
text-align: center;
}
#head_p:hover{
width: 88px;
height: 72px;
color: white;
background: #f75a53;
border-radius: 5px;
}
#clear{
width: 100%;
background-color: #c3bbd2;
height: 457px;
}
#clear #back_photo{
width: 1440px;
margin: 0 auto;
height: 457px;
background: url(../img/img_index/Snipaste.png) no-repeat;
}
#back_photo #photo{
width: 496px;
height: 276px;
float: right;
margin: 80px 335px 0 0;
}
#word{
float: left;
margin: 90px 0 0 180px;
}
#word #p1{
color: white;
font-size: 40px;
}
#word #p2{
color: white;
font-size: 30px;
}
#word #buton{
width: 100px;
height: 30px;
line-height: 30px;
color: white;
border: 2px solid white;
font-size: 12px;
text-align: center;
border-radius: 5px;
margin: 53px 0 0 113px ;
}
#main_title1{
width: 1140px;
margin: 0 auto;
}
#main_title1 #p1{
margin: 28px 0 15px 0;
font-size: 30px;
color: black;
text-align: center;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
