目录
一、网页概述
本实例应用html+css，div+css布局、音频、登录页面、带实验报告等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含2个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鲜家</title>
</head>
<body>
<div class="text clearfix" style="text-align:left; background-color:#cc9966; height: 70px;" >
<span style="float:left;color: black;margin: 0 380px 0 0"><div align="left"><img src="img/XJ.png" alt="图片" title="鲜家" width=100px height=50px ></div></span>
<span style="display: inline; font-size: 20px;color: red;margin: 0 50px 0 0">首页</span>
<span style="display: inline;font-size: 20px;color: red;margin: 0 50px 0 0">鲜花</span>
<span style="display: inline;font-size: 20px;color: red;margin: 0 50px 0 0">永生花</span>
<span style="display: inline;font-size: 20px;color: red;margin: 0 50px 0 0">礼品</span>
<span style="display: inline;font-size: 20px;color: red;margin: 0 50px 0 0">每日一花</span>
<a href="鲜花常识.html"><span style="display: inline;font-size: 20px;color: red;margin: 0 50px 0 0">满天星花语</span></a>
<a href="denglu.html"><span style="float: right;margin: 0 120px 0 0;"> 登录</span></a>
<audio controls style="width: 186px;height: 30px; float: right;margin: 0 80px 0 0;"><source src="video/赵咏华%20-%20最浪漫的事.mp3"></audio>
</div>
<div align="center">
<img src="img/index1.jpg" alt="图片" title="" width="100%" height="90%">
<div>
<h1><a align="left" span style="font-size:40px ;color: #cc6633;" >Flowers every Monday</a></h1>
<h2><a align="left" span style="font-size:30px ;color: #cc6633;" >每周一花 · 装点美好生活</a></h2>
<div id="c1" style="float: left;">
<h1>内容摘要：</h1>
<h3>满天星是清雅之士所喜爱的花卉，素蕴含"清纯、致远、浪漫"之意。</h3>
<h3>数百朵玲珑细致、洁白无瑕的小花，松松散散聚在一起，宛若无际夜空中的点点繁星，</h3>
<h3>似雾般朦胧，极具婉约、雅素之美，又如爱人的呼吸般温柔动人。</h3><br>
</div>
<div align="center">
<img src="img/主1.jpg" alt="图片" title="" width="20%" height="20%">
<img src="img/主2.jpg" alt="图片" title="" width="20%" height="20%">
<div >
<div id="c1" style="float: right;">
<h1>内容摘要：</h1>
<h3>满天星，由于它花型小、浅色、花姿蓬松具立体感，</h3>
<h3>气质高雅清秀，给人以朦胧感，花序群体效果极佳，是重要的陪衬花材，</h3>
<h3>为当今最流行的切花之一，虽然价格昂贵，但十分畅销。。</h3><br>
</div>
<div align="center">
<img src="img/主3.jpg" alt="图片" title="" width="20%" height="20%">
<img src="img/主4.jpg" alt="图片" title="" width="20%" height="20%">
</div>
<a href="#">
<button id="button1">查看全部商品</button>
</a>
<div style="background-color: darkgray;width: 1418px; height: 150px; ">
<div class="s1" style=" width: 350px;float: left;height: 150px;border:2px solid black; ">
<h1 id="md1"style="margin: auto;">鲜家网友情链接</h1><br>
<dd style="margin: auto;text-indent: 2em;">服装批发</dd>
<dd style="margin: auto;text-indent: 2em;">创业项目</dd>
<dd style="margin: auto;text-indent: 2em;">分类信息</dd>
</dl>
</div>
<div class="s2" style="width: 350px;float: left;height: 150px;border:2px solid black;">
<h1 id="md2"style="margin: auto;">鲜家</h1>
<h2 style="margin: auto;">会员专区</h2>
<dl style="margin: auto;">
<dt style="margin: auto;"><b style="margin: auto;">每周一花</b></dt>
<dd style="margin: auto; text-indent: 2em;">成为会员后，花妹会根据您的累计消费情况给您定级。</dd>
</dl>
</div>
<div class="s3" style="width: 350px;float: left;height: 150px;border:2px solid black;">
<h1 id="md3" style="margin: auto;">JOIN US</h1>
<h2 style="margin: auto;">招聘</h2>
<dl style="margin: auto;">
<dt style="margin: auto;"><b style="margin: auto;">爱浪漫、爱鲜花、爱有你的每一天</b></dt>
</dl>
...
2.CSS
代码如下（节选示例）：
.s1:hover{
background-color: #cc6633;
color: #fff;
}
.s2:hover{
background-color:#cc6633;
color: #fff;
}
.s3:hover{
background-color:#cc6633;
color: #fff;
}
.s4:hover{
background-color: #cc6633;
color: #fff;
}
#button1{
width:25%;/*长度*/
padding:10px;/*内边距上下左右都为10px距离*/
margin-bottom:10px;/*按钮之间距离*/
background-color:#cc9966;/*背景颜色*/
border:1px solid black;/*边框黑线描边 线条粗细1px 黑色*/
border-radius:5px;/*弧形四角 弧度为5px*/
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
