目录
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html5+css3，包括菜单栏、留言表单等。页面简单，代码精简，为初级的学生水平，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含7个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
节选代码示例如下：
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人网站</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<!--container start-->
<div class="container">
<!--header start-->
<div class="header">
<div class="header_avatar"><img src="images/avatar.jpg"/></div>
<div class="header_nav">
<a href="index.html">个人首页</a>
<a href="view1.html">生活瞬间</a>
<a href="view2.html">学习记录</a>
<a href="view3.html">学校生活</a>
<a href="view4.html">规划人生</a>
<a href="view5.html">旅行打卡</a>
<a href="view6.html">访客留言</a>
</div>
</div>
<!--header end-->
<!--user start-->
<div class="user">
<div class="user_avatar"><img src="images/avatar.jpg"/></div>
<div class="user_name">小猪猪</div>
<div class="user_word">没有什么是一顿饭解决不了的</div>
<div class="user_info">
<p><span>男</span><span>20岁</span><span>狮子座</span></p>
</div>
<div class="user_nav">
<a href="index.html" class="select">个人首页</a>
<a href="view1.html">生活瞬间</a>
<a href="view2.html">学习记录</a>
<a href="view3.html">学校生活</a>
<a href="view4.html">规划人生</a>
<a href="view5.html">旅行打卡</a>
<a href="view6.html">访客留言</a>
</div>
</div>
<!--user end-->
<!--main start-->
<div class="main">
<article class="image_word">
<a href="view1.html"><img src="images/index1.jpg"/></a>
<h3>生活瞬间</h3>
<p><a href="view1.html">只要追求幸福和自身的完美，选择适合我们的生活。你会发现即使忙碌也可以很充实，对生活的经历也会更加清晰。只要抱有希望就会奔向美好的明天。</a></p>
</article>
<article class="word">
<h3>学习记录</h3>
<p><a href="view2.html">有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。沉默多了，承受也就越多，不如轻轻打开另一扇窗户，放逐心情，也许就是另一个轻松美丽的世界。从一扇窗户到另一扇窗户，从一个世界到另一个世界，需要的是一份勇气，一抹心境。只有按生活本来面貌去生活，我们才能成为真正完善的人。人生就是一场漫长对抗，就看你能够追逐多久，坚持多久。</a></p>
</article>
<article class="image_word">
<a href="view3.html"><img src="images/index3.jpg"/></a>
<h3>学校生活</h3>
<p><a href="view3.html">有时候，我们只是需要换一扇窗户看风景。生活有微笑有苦楚，不想说不等于无言，只有心里明了，也许永远选择沉默，选择承受。</a></p>
</article>
<article class="image">
<a href="view4.html"><img src="images/index4.jpg"/></a>
</article>
<article class="image_word">
<a href="view5.html"><img src="images/index5.jpg"/></a>
<h3>旅行打卡</h3>
<p><a href="view5.html">趁阳光正好，趁微风不燥，趁现在还年轻，还可以走很长很长的路，还能诉说很深很深的思念。去寻找那些曾出现在梦境中的路径、山峦与田野。</a></p>
</article>
<article class="image">
<a href="view6.html"><img src="images/index6.jpg"/></a>
</article>
</div>
<!--main end-->
<!--footer start-->
<div class="footer">
<div class="footer_nav">
<a href="index.html">个人首页</a>
<a href="view1.html">生活瞬间</a>
<a href="view2.html">学习记录</a>
<a href="view3.html">学校生活</a>
<a href="view4.html">规划人生</a>
<a href="view5.html">旅行打卡</a>
<a href="view6.html">访客留言</a>
</div>
<div class="footer_copyright">
Copyright @ 2021 wo.com All Rights Reserved. 个人网站 版权所有
</div>
</div>
<!--footer end-->
</div>
<!--container end-->
</body>
</html>
...
2.CSS
@charset "utf-8";
/* CSS Document */
/* element public */
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#333;background-color:#f4f4f4;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#1C8DD5;
}
/*container*/
.container{width:1100px;margin:0 auto;overflow:hidden;
}
/*header*/
.header{width:1100px;height:420px;background-image:url(../images/header.jpg);background-size:100% 100%;float:left;
}
.header_avatar{width:120px;height:120px;margin:110px 0 0 490px;float:left;border:5px solid #fff;border-radius:50%;overflow:hidden;
}
.header_avatar img{width:120px;height:120px;float:left;
}
.header_nav{width:1100px;height:30px;line-height:30px;margin-top:150px;float:left;overflow:hidden;
}
.header_nav a{font-size:15px;font-weight:bold;color:#3c8aae;margin:0 86px 0 20px;float:left;
}
.header_nav a:nth-last-child(1){margin-right:0;
}
/*user*/
.user{width:250px;height:710px;background-color:#fff;margin-top:20px;float:left;
}
.user_avatar{width:120px;height:120px;margin:20px 0 0 65px;float:left;border:5px solid #fff;border-radius:50%;overflow:hidden;
}
.user_avatar img{width:120px;height:120px;float:left;
}
.user_name{width:210px;height:40px;line-height:40px;font-size:16px;font-weight:bold;text-align:center;margin:10px 0 0 20px;float:left;
}
.user_word{width:210px;height:40px;line-height:40px;font-size:14px;color:#9C9C9C;text-align:center;margin-left:20px;float:left;
}
.user_info{width:210px;font-size:14px;margin:15px 0 0 20px;float:left;border-top: 1px solid #cecece;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;
}
.user_info p{width:210px;height:42px;float:left;}
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
标签：css3,Web,网页,float,height,width,margin,left From： https://blog.csdn.net/VX_L_5201314168/article/details/144984296