大二学生《Web编程基础》期末网页制作 HTML+CSS个人网页设计实例
精彩专栏推荐
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
作者主页: 【主页——获取更多优质源码】
web前端期末大作业： 【毕设项目精品实战案例 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
超炫酷的Echarts大屏可视化源码：【 echarts大屏展示大数据平台可视化(150套) 】
免费且实用的WEB前端学习指南： 【web前端零基础到高级学习视频教程 120G干货分享】
关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
文章目录
- 一、网站题目
- 二、✍️网站描述
- 三、网站介绍
- 四、网站演示
- 五、 网站代码
-
- HTML结构代码
- CSS样式代码
- 六、 如何让学习不再盲目
- 七、更多干货
一、网站题目
个人网页设计、♂️个人简历制作、简单静态HTML个人网页作品、个人介绍网站模板 、等网站的设计与制作。
二、✍️网站描述
⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。
一套A+的网页应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
四、网站演示
五、 网站代码
HTML结构代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>INDEXp>
a>li>
<li>
<a href="rizhi.html">
<h1>日志h1>
<p>JOURNALp>
a>li>
<li>
<a href="zuopin.html">
<h1>作品h1>
<p>WORKSp>
a>li>
<li>
<a href="jianjie.html">
<h1>个人简介h1>
<p>INTROp>
a>li>
<li>
<a href="lianjie.html">
<h1>友情链接h1>
<p>LINKp>
a>li>
ul>
div>
div>
div>
div>
<div class="main">
<div class="sbox1">
<div class="title">
<h1>个人简介h1>
<div class="xian">div>
<p>PERSONAL PROFILEp>
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 EXCHANGEp>
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 BLOGSp>
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 ZONEp>
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.28span>div>
a>
div>
<div class="left right">
<img src="images/simg10.jpg" />
<h1>我的广东采风 —— 第2天h1>
<p>虽然走了很远才到，但是今天晚上好
吃的潮汕牛肉火锅染我觉得不存在了p>
<div class="dibu">广东 . 广州越秀区<span>2018.11.9span>div>
div>
div>
div>
<div class="sbox5">
<div class="title">
<h1>我的作品h1>
<div class="xian">div>
<p>WORKSp>
div>
<div class="ner">
<div class=" bx1">
<img src="images/simg11.jpg" />
<div class="riqi">2019-6-16div>
<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>
<div class=" bx1 bx3">
<img src="images/simg13.jpg" />
<div class="riqi">2018-6-20div>
<h1>带珍珠耳环的兔子h1>
<p>播放 308 | 喜欢 46 p>
<P>德玛西 绘制P>
div>
div>
<div class="gengd"><a href="#">查看更多a>div>
div>
div>
<div class="foot">
<div class="footer">
<img src="images/logo2.png" />
<a href="index.html"> 首页 |a>
<a href="jianjie.html">个人中心 |a>
<a href="rizhi.html">我的日志 |a>
<a href="zuopin.html">我的作品 |a>
<a href="lianjie.html">友情链接 |a>
div>
div>
div>
body>
html>
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%;}
.sbox4{ height:640px;}
.sbox4 .ner{ height:457px; padding-top:30px;}
.sbox4 .ner .left{ width:294px; height:422px; float:left; margin-left:150px; background:#f7f7f7;box-shadow: 2px 2px 15px 5px #d1d0d0;}
.sbox4 .ner .left h1{ height:60px; line-height:60px; color:#1e2126; font-size:18px; padding-left:20px;}
.sbox4 .ner .left p{ line-height:25px; color:#787878; font-size:16px; padding:0px 18px; margin-bottom:20px;}
.dibu{ color:#aaaaaa; height:25px; line-height:25px; font-size:12px; padding:0px 20px;}
.dibu span{ float:right;}
.sbox4 .ner .right{ float:left; margin-left:297px !important;}
.sbox5{ height:822px;}
.sbox5 .ner{ height:548px; }
.sbox5 .ner .bx1{ width:315px; height:314px; margin-top:140px;box-shadow: 2px 2px 15px 5px #d1d0d0; float:left; margin-left:15px; background:#FFF; position:relative; text-align:center;}
.sbox5 .ner .bx1 .riqi{ height:27px; line-height:27px;background: rgba(0,0,0,0.3); padding-left:30px; position:absolute; top:179px;}
.sbox5 .ner .bx1 img{ margin-bottom:10px;}
.sbox5 .ner .bx1 h1{ height:30px; line-height:30px; color:#031333;font-weight:normal; font-size:13px;}
.sbox5 .ner .bx1 p{ color:#a0a4a9; height:25px; line-height:25px; font-size:10px; font-weight:normal;}
.sbox5 .ner .bx2{ width:500px; height:505px; margin-top:40px;box-shadow: 2px 2px 15px 5px #d1d0d0; float:left; margin-left:20px; background:#FFF; position:relative; text-align:center;}
.sbox5 .ner .bx2 .riqi{ height:40px; line-height:40px;background: rgba(0,0,0,0.3); padding-left:30px; position:absolute; top:179px;}
.sbox5 .ner .bx2 img{ margin-bottom:15px;}
.sbox5 .ner .bx2 h1{ height:40px; line-height:40px; color:#031333;font-weight:normal; font-size:20px;}
.sbox5 .ner .bx2 p{ color:#a0a4a9; height:25px; line-height:25px; font-size:16px; font-weight:normal;}
.sbox5 .ner .bx3{ float:right !important; margin-right:15px;}
.gengd{ height:45px; line-height:45px; text-align:center; margin-top:25px;}
.gengd a{ color:#a6aaaf; font-size:24px;}
.foot{ height:216px; width:100%; background:#151519;}
.footer{ width:1201px; height:45px; margin:0 auto; padding-top:90px; line-height:45px;color:#42424b; font-size:24px;}
.footer img{ margin-right:80px; float:left;margin-top: 25px;}
.footer a{ float:left; padding:10px; float:left; color:#42424b; font-size:24px;}
/* rz */
.rztop{width:1920px; height:681px; background:url(../images/rz1.jpg) no-repeat; margin-bottom:25px; }
.rzbox1{ height:560px; padding-top:70px;}
.rzbox1 .bx{ width:360px; height:212px; float:left; margin-bottom:70px; position:relative;}
.rzbox1 .bx img{width:360px; height:212px;}
.rzbox1 .bx .tit {
width:344px;
position: absolute;
background:
rgba(0,0,0,0.3);
height: 45px;
line-height: 45px;
font-size: 18px;
color:#FFF;
padding-left: 15px;
bottom: 0px;
}
.rzbox1 .jage{ width:60px; height:280px; float:left;}
.rzm90{ margin-bottom:90px;}
/* zp */
.zp{width:1920px;height:2220px; margin:0 auto; background:url(../images/zpbg.jpg) no-repeat;}
.zptit{ height:100px; line-height:100px; padding-top:90px; text-align:center; font-size:60px; color:#FFF; margin-bottom:153px;}
.zpji{ width:1200px; height:1380px; background:#FFF; margin:0 auto;}
.zpji h1{ height:57px; line-height:57px; padding-top:58px; text-align:center; font-size:30px; font-weight:normal; margin-bottom:112px;}
.zpji .box1{ width:1130px; height:430px; margin:0 auto; margin-bottom:170px;}
.zpji .box1 .bx1{ width:485px; height:430px; float:left; margin-right:160px;}
.zpji .box1 .bx1 h2{ height:80px; line-height:80px; text-align:center; font-size:24px;font-weight:normal;}
.zpji .box1 .bx1 h3{ height:45px; line-height:45px; text-align:center;font-weight:normal;font-size:24px;}
.zpji .box1 .bx1 h3 a{ color:#a6aaaf;}
.zpji .box1 .bx2{ width:485px; height:430px; float:left; }
.zpji .box1 .bx2 h2{ height:80px; line-height:80px; text-align:center; font-size:24px; font-weight:normal;}
.zpji .box1 .bx2 h3{ height:45px; line-height:45px; text-align:center;font-weight:normal;font-size:24px;}
.zpji .box1 .bx2 h3 a{ color:#a6aaaf;}
/* jianjie */
.jianjie{width:1920px; height:681px; background:url(../images/jianjie.jpg) no-repeat; margin-bottom:25px; margin-bottom:107px; }
.jjner{ width:1200px; height:1015px; margin:0 auto; background:#f0e5de; margin-bottom:150px;}
.jjner img{ margin-bottom:66px;}
.jjner h1{ height:60px; line-height:60px; font-weight:normal; text-align:center; font-size:30px; margin-bottom:80px;}
.jjner p{ width:820px; margin:0 auto; margin-bottom:30px; line-height:30px; font-size:18px;}
/* lianjie */
.lianjie{width:1920px; height:681px; background:url(../images/lianjie.jpg) no-repeat; margin-bottom:25px; margin-bottom:50px; }
.ljbox1{ height:574px; margin-bottom:106px;}
.ljbox1 .ner{ height:435px;}
.ljbox1 .ner img{ float:left; margin:35px 165px 28px 17px;box-shadow: 2px 2px 15px 5px #d1d0d0;}
.ljbox1 .ner h1{ height:50px; line-height:50px; padding-top:120px; margin-bottom:27px; font-size:24px; color:#23121c; font-weight:normal;}
.ljbox1 .ner h2{ height:35px; line-height:35px; color:#6b6969; font-size:18px;font-weight:normal;}
.ljbox1 .ner p{ line-height:60px; font-size:18px; color:#a1a1a1;}
.ljbox2{ height:247px; padding:0px 20px; }
.ljbox2 img{ margin-right:25px; }
.ljbox2 p{ margin-bottom:27px; line-height:30px; font-size:18px;}
.ljbox3{ height:840px; }
.ljbox3 .ner{ height:670px;}
.ljbox3 .ner .bx{ width:380px; height:225px; margin:49px 110px; float:left;}
/* bpg */
.bpg{width:1920px; height:681px; background:url(../images/bpg.jpg) no-repeat; margin-bottom:25px; margin-bottom:115px; }
.bpgneir{ width:1200px; height:auto; overflow:hidden; padding-bottom:147px;}
.bpgneir img{ display:block; margin:0 auto; margin-bottom:15px;}
/* dongtai */
.dongtai{width:1920px; height:681px; background:url(../images/dongtai.jpg) no-repeat; margin-bottom:134px; }
.dtner{ height:860px; width:1250px; margin:0 auto;}
.dtner .bx{ width:375px; height:760px; background:#f7f7f7; float:left; margin:0px 20px; margin-bottom:40px;}
.dtner .bx img{ margin-bottom:20px;}
.dtner .bx h1{ font-weight:normal; height:50px; line-height:50px; font-size:26px; padding:0px 35px; margin-bottom:10px;}
.dtner .bx .xingq{ height:220px;padding:0px 35px; color:#787878; font-size:18px; line-height:30px; }
.dtner .bx h2{ height:30px; line-height:30px; font-size:18px; color:#aaaaaa;font-weight:normal;padding:0px 35px; }
/* ui */
.ui{width:1920px; height:681px; background:url(../images/ui.jpg) no-repeat; margin-bottom:153px; }
.ubox1{ height:574px; margin-bottom:205px;}
.ubox1 img{ float:55px; margin:0px 55px;}
.ubox2{ height:879px; margin-bottom:154px;}
.ubox2 .bx{ width:316px; float:left; margin:0px 35px;}
.ubox2 .bx img{ display:block; margin:0 auto; margin-bottom:60px;}
.ubox2 .bx h1{ height:55px; line-height:55px; font-size:30px; font-weight:normal;}
.ubox2 .bx p{ line-height:30px; font-size:20px;}
六、 如何让学习不再盲目
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习 。
七、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题欢迎一起交流学习