目录
一、前言
本文为个人博客网页设计实例 ，应用html+css，页面简单大气，供大家参考。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web">
<div class="top">
<div class="topbg">
<div class="topner">
<div class="logo"><img src="images/logo.png" /></div>
<div class="nav">
<ul>
<li>
<a href="index.html">
<h1>首页</h1>
<p>INDEX</p>
</a></li>
<li>
<a href="rizhi.html">
<h1>日志</h1>
<p>JOURNAL</p>
</a></li>
<li>
<a href="zuopin.html">
<h1>作品</h1>
<p>WORKS</p>
</a></li>
<li>
<a href="jianjie.html">
<h1>个人简介</h1>
<p>INTRO</p>
</a></li>
<li>
<a href="lianjie.html">
<h1>友情链接</h1>
<p>LINK</p>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-----------main--------------->
<div class="main">
<div class="sbox1">
<div class="title">
<h1>个人简介</h1>
<div class="xian"></div>
<p>PERSONAL PROFILE</p>
</div>
<div class="ner">
<div class="left">
<div class="lef">
<h1>德玛西</h1>
<h2>视觉传达设计专业学生</h2>
<p>擅长:摄影、平面设计、</p>
<p> 手绘、UI设计......</p>
<div class="more"><a href="#">查看更多</a></div>
</div>
<div class="rig"><img src="images/simg2.jpg" /></div>
</div>
<div class="right">
<h1>关于我的</h1>
<div class="wenz">我是一个西南财经大学天府学院艺术设计学院的大四学生，所学的专业是视觉传达设计，喜欢摄影、手绘和UI设计......</div>
<div class="tubiao">
<img src="images/img1.png" />
<img src="images/img2.png" />
<img src="images/img3.png" />
<img src="images/img4.png" />
<img src="images/img5.png" />
</div>
</div>
</div>
</div>
<div class="sbox2">
<div class="title">
<h1>技术交流</h1>
<div class="xian"></div>
<p>TECHNICAL EXCHANGE</p>
</div>
<div class="ner">
<div class="left">
<img src="images/simg3.jpg" />
<h1>如何做好网页设计</h1>
<h2>2019-10-16 发布</h2>
<p>页面整体和谐了，给浏览者是一个畅快舒服的感觉。要有整体大局的眼光，不去拘泥于局部或细小的地方。根据色彩对人们心理的影响，合理运用好文字的色彩......</p>
</div>
<div class="right">
<div class="bx1"><img src="images/simg4.jpg" />网页设计 —— 专业网页设计及三合一网站设计</div>
<div class="bx1"><img src="images/simg4.jpg" /></div>
<div class="bx1"></div>
<div class="bx1"></div>
<div class="bx1"><img src="images/simg4.jpg" />调色师必须了解的知识 —— 曝光度、对比度、高光、阴影、白色与黑色色阶
</div>
</div>
</div>
</div>
<div class="sbox3">
<div class="title">
<h1>我的日志</h1>
<div class="xian"></div>
<p>MY BLOGS</p>
</div>
<div class="ner">
<div class="left"><img src="images/simg5.jpg" /></div>
<div class="right">
<div class="bx"><img src="images/simg6.jpg" /><div class="tit">我的广东之旅</div></div>
<div class="bx"><img src="images/simg7.jpg" /><div class="tit">第一站的燃手食堂</div></div>
<div class="bx"><img src="images/simg8.jpg" /><div class="tit">魅力广州</div></div>
</div>
</div>
</div>
<div class="sbox4">
<div class="title">
<a href="dongtai.html">
<h1>动态</h1>
<div class="xian"></div>
<p>MY ZONE</p>
</a>
</div>
<div class="ner">
<div class="left">
<a href="bpg.html">
<img src="images/simg9.jpg" />
<h1>毕棚沟之旅</h1>
<p>第一次去毕棚沟，也第一次看到这么
多雪！有点意思，哈哈哈...</p>
<div class="dibu">四川 . 阿坝藏族羌族自治州理县<span>2019.1.28</span></div>
</a>
</div>
<div class="left right">
<img src="images/simg10.jpg" />
<h1>我的广东采风 —— 第2天</h1>
<p>虽然走了很远才到，但是今天晚上好
吃的潮汕牛肉火锅染我觉得不存在了</p>
<div class="dibu">广东 . 广州越秀区<span>2018.11.9</span></div>
</div>
</div>
</div>
<div class="sbox5">
<div class="title">
<h1>我的作品</h1>
<div class="xian"></div>
<p>WORKS</p>
</div>
<div class="ner">
<div class=" bx1">
<img src="images/simg11.jpg" />
<div class="riqi">2019-6-16</div>
<h1>展示与陈设 李宁服装店</h1>
<p>查看 42 | 喜欢 12 </p>
<P>5位创作人 建模/设计</P>
</div>
<div class=" bx2">
<img src="images/simg12.jpg" />
<div class="riqi">2018-11-20 发布</div>
<h1>深圳湾之旅</h1>
<p>查看 35 | 喜欢 5 </p>
<P>德玛西 摄影/后期</P>
</div>
......
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:12px; font-family: "微软雅黑",arial; line-height:22px; background:url(../images/bg.gif); }
div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{ height:auto; margin:0;; padding:0; vertical-align:middle ;}
li{ list-style:none;}
a{ text-decoration:none; color:#000;}
.ul{ list-style:none;}
img{ border:0; margin:0; padding:0;}
.web{width:1920px;height: 100%; margin:0 auto;background-color:#ffffff;}
/* shouye */
.top{width:1920px; height:681px; background:url(../images/simg1.jpg) no-repeat; margin-bottom:25px; }
.topbg{ height:83px; width:1920px; background:rgba(0,0,0,0.5);}
.topner{ width:1201px; height:83px; margin:0 auto; }
.logo{ width:362px; height:28px; float:left; margin-left:12px; margin-top:24px;}
.nav{ height:63px; width:650px; float:right; padding-top:20px;}
.nav ul{}
.nav ul li{ margin:0px 30px; float:left; text-align:center;}
.nav ul li a{ color:#FFF;}
.nav ul li a:hover{ color:#ffbc22;}
.nav ul li h1{ font-size:20px; font-weight:normal; font-size:20px;}
.nav ul li p{ height:20px; line-height:20px; font-size:11px;}
.main{ width:1201px; height:auto; overflow:hidden; margin:0 auto; }
.title{ height:100px; text-align:center; margin-bottom:35px;}
.title h1{line-height:60px; font-size:30px; font-weight:normal;}
.title .xian{ width:35px; height:2px; border-bottom:#ffbc22 1px solid; margin:0 auto; }
.title p{ height:40px; line-height:40px; text-align:center; color:#c6c6c6; font-size:18px;}
.sbox1{ height:400px;}
.sbox1 .ner{ width:100%; height:260px; }
.sbox1 .left{ width: 427px;
height: 203px;
float: left;
background:#f4f4f4;
box-shadow: 2px 2px 15px 5px #d1d0d0;
margin-left: 20px;}
.sbox1 .left .lef{ width:224px; height:203px; float:left; text-align:center;}
.sbox1 .left .lef h1{ width:100px;color:#434d53; height:60px; line-height:60px; font-size:28px; border-bottom:#de6262 1px solid; text-align:center; margin:0 auto; margin-bottom:10px;}
.sbox1 .left .lef h2{ height:35px; line-height:35px; color:#434d53; font-size:16px; font-weight:normal; margin-bottom:5px;}
.sbox1 .left .lef p{ line-height:23px; color:#434d53; font-size:16px; }
.sbox1 .left .lef .more{ height:25px; line-height:25px; width:60px; margin:0 auto; margin-top:15px; text-align:center;}
.sbox1 .left .lef .more a{ color:#434d53; font-size:12px;}
.sbox1 .left .rig{ float:left; width:202px;}
.sbox1 .right{ width: 427px;
height: 203px;
float: right;
background:#f4f4f4;
box-shadow: 2px 2px 15px 5px #d1d0d0;
margin-right: 20px;}
.sbox1 .right h1{ color:#434d53; height:60px; line-height:60px; font-size:28px; text-align:center; margin:0 auto; margin-bottom:10px;}
.sbox1 .right .wenz{ width:325px; height:75px; color:#54585a; font-size:16px; line-height:20px; margin:0 auto; margin-bottom:20px;}
.sbox1 .right .tubiao{ height:35px; text-align:center;}
.sbox1 .right .tubiao img{ margin-right:8px;}
.sbox2{ height:415px;}
.sbox2 .ner{ height:275px;}
.sbox2 .ner .left{ width:580px; height:275px; margin-left:15px; float:left;}
.sbox2 .ner .left img{ float:left;box-shadow: 2px 2px 15px 5px #d1d0d0; margin-right:20px; margin-top:37px;}
.sbox2 .ner .left h1{ line-height:40px; height:40px; color:#23121c; font-size:20px; font-weight:normal; margin-top:70px;}
.sbox2 .ner .left h2{ height:35px; line-height:35px; font-size:14px; color:#6b6969;font-weight:normal;}
.sbox2 .ner .left p{ color:#a1a1a1; line-height:30px;font-size:14px;}
.sbox2 .ner .right{ width:585px; height:235px; padding-top:45px; float:right;}
.sbox2 .ner .right .bx1{ height:40px; line-height:40px; font-size:16px; color:#23121c;}
.sbox2 .ner .right .bx1 img{ margin-right:25px; margin-top:5px;}
.sbox3{ height:742px;}
.sbox3 .ner{ height:587px; padding-top:30px;}
.sbox3 .ner .left{width: 838px;
height: 525px;
float: left;
background:#FFF;
box-shadow: 2px 2px 15px 5px #d1d0d0;
padding: 15px;
margin-left: 15px;}
.sbox3 .ner .right{ width:299px; height:565px; float:right;}
.sbox3 .ner .right .bx{ width:299px; height:174px; margin-bottom:15px; position:relative;}
.sbox3 .ner .right .bx .tit{ position: absolute;
background:rgba(0,0,0,0.3);
height: 45px;
line-height: 45px;
font-size: 18px;
color:#FFF;
padding-left: 15px;
bottom: 0px;
width: 100%;}
......
五 、更多推荐
【关注作者|获取更多源码；点赞收藏博文，您的支持是我创作的动力，3Q！
Web前端网页制作、整站模板、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
6028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
