🎉精彩专栏推荐👇🏻👇🏻👇🏻
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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" />
<script type="text/javascript" src="js/banner.js"></script>
</head>

<body>
<!----网页开始------>
<div class="main">
<!----top开始------>
<div class="top0">
<div class="daohang">
<div class="logo"><img src="images/logo.png" /></div>
<div id="nav">
<ul>
<li><a class="hot" href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="jingli.html">我的经历</a></li>
<li><a href="rizhi.html">我的日志</a></li>
<li><a href="lianxi.html">联系我</a></li>
</ul>
</div>
</div>
</div>
<div id="playBox">
    <div class="pre"></div>
    <div class="next"></div>
    <div class="smalltitle">
      <ul>
        <li class="thistitle"></li>
        <li></li>
        <li></li>
     
      </ul>
    </div>
    <ul class="oUlplay">
       <li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li>
       <li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li>
       <li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li>

    </ul>
  </div>
<!----box1开始------>
<div class="box01">
<h1>我的爱好</h1>
<h2>My Hobby</h2>
</div>
<!----box2开始------>
<div class="box02">
<div class="bx1">
<h1>我的最爱服饰</h1>
<h2>洛丽塔</h2>
<p>追求的是一种崭新的衣着态度</p>
<p>寻求有别一般的生活方式</p>
<p>甜美古典哥特风</p>
</div>
<div class="bx1">
<h1>我的最爱美食</h1>
<h2>美味蛋糕</h2>
<p>蛋糕是甜蜜的，蛋糕是快乐的</p>
<p>使我们保持充沛的活力</p>
<p>甜蜜幸福甜蜜</p>
</div>
<div class="bx1">
<h1>我的最爱宠物</h1>
<h2>小金鱼</h2>
<p>喜欢鱼儿的自在的游来游去</p>
<p>带给人带来安逸宁静</p>
<p>充满了无限活力</p>
</div>
</div>
<!----box3开始------>
<div class="box03">
<div class="bx1">
<img src="images/01.jpg" />
<div class="right">
<h1>这就是我<span>甜</span></h1>
<h2>虎虎生风</h2>
<p>这发光的美貌是真实的吗<br /><p>
<p>明明可以靠颜值<br/></p>
<p>偏偏要靠才华<br/></p>
<p>存在就是完美本身<br/></p>
</div>
</div>
<div class="bx2">
<p>甜美</p>
<p class="padd0">可爱</p>
</div>
<div class="bx1">
<div class="right marl60">
<h1>这就是我<span>美</span></h1>
<h2>清水芙蓉</h2>
<p>双瞳剪水 飘飘回眸 撩人心弦 </p>
<p>可盐可甜一眼万年</p>
<p>教科书级别的美貌</p>
</div>
<img class="mar0" src="images/02.jpg" />
<div class="bx3">查看更多</div>
</div>

</div>
<!----box4开始------>
<div class="box04">
<h1>我的作品</h1>
<h2>My work</h2>
<div class="box04-ner">
<ul>
<li>
<img src="images/04.jpg" />
<p>我喜欢摄影，摄影是这样一门艺术，连接时空、记录史实。它给大众传递的是历史，是现  实，是时间与空间。
</p>
<img src="images/05.jpg" />
</li>
<li>
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<p>我喜欢用电脑发挥我的想象，制作视觉冲击感强烈的海报，给人们以不一样的感觉，刺激大家的视觉神经。</p>
</li>
<li class="mar0">
<img src="images/08.jpg" />
<p>我喜欢做手工制品，静静的享受制作的过程，从无到有的过程，创造一份属于自己对一无二的作品，很有成就感。
</p>
<img src="images/09.jpg" />
</li>
</ul>
</div>
</div>
<!----foot开始------>
<div id="foot">
<img src="images/foot-logo.jpg" />
</div>
</div>

</body>
</html>

💒CSS样式代码

@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:14px; font-family: "微软雅黑"; line-height:22px; background:#d7d5d5;    }

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;}

.ul{ list-style:none;}

.divclear{ clear:both;}

img{ border:0; margin:0; padding:0;}

 a{color:#333;}

 a:link{ color:#ffffff;}

 a:hover {color:#629705;text-decoration:none;overflow:hidden;}

/*---网页开始-----*/
.main{ width:1100px; height:auto; overflow:hidden;  margin:0 auto; background:#FFF;}

/*---top开始-----*/
.top0{ width:1100px; height:56px; background:#000;}
#divSmallBox{overflow:hidden;*display:inline;*zoom:1;width:10px;height:10px;margin:0 5px;border-radius:10px;background:#ffffff;}
#playBox{ width:1000px; height:409px; margin:20px auto; background:#333; position:relative; overflow:hidden;}
#playBox .oUlplay { width:99999px; position:absolute; left:0; top:0;}
#playBox .oUlplay li{ float:left;}
#playBox .pre{ cursor:pointer; width:45px; height:45px; background:url(../images/l.png) no-repeat; position:absolute; top:190px; left:10px; z-index:10;}
#playBox .next{ cursor:pointer; width:45px; height:45px; background:url(../images/r.png) no-repeat; position:absolute; top:190px; right:10px; z-index:10;}
#playBox .smalltitle {width:1000px; height:10px; position:absolute; bottom:15px; z-index:10}
#playBox .smalltitle ul{ width:120px; margin:0 auto;}
#playBox .smalltitle ul li{ width:10px; height:10px; margin:0 5px; border-radius:10px; background:#ffffff; float:left; overflow:hidden;*display:inline;*zoom:1;}
#playBox .smalltitle .thistitle{ background:#69aaec;}

.top{ width:1100px; height:390px; background:url(../images/banner1.jpg) no-repeat}
.daohang{ width:1100px; height:56px; background:#000;filter:alpha(Opacity=80);-moz-opacity:0.5;background: rgba(0,0,0,0.3);}
.logo{ width:170px; margin-left:130px; float:left; height:56px;}
#nav{width: 730px;
    height: 56px;
       margin: 0 auto;
        margin-left: auto;
    margin-left: 70px;
    float: left;

}
#nav ul{ width:685px; height:56px; line-height:56px; font-size:14px;  margin:0 auto;}
#nav ul li{ width: 90px; height:56px; margin:0px 10px; line-height:56px; color:#FFF; float:left; text-align:center;}
#nav li a {
	color: #ffffff;
font-family: "宋体";
font-size: 16px;
margin-left: 2px;
display: block;
font-weight:bold;
}
#nav li a:hover, #nav li.hover a {

	background: url(../images/nav.png) no-repeat 0px 15px;
color: #080808 !important;
	
}
.hot{ width: 90px;
height: 56px;
background: url(../images/nav.png) no-repeat 0px 15px;
color: #080808 !important;

}
/*-----box1开始-----*/
.box01{ width:1100px; height:125px; padding-top:30px; text-align:center}
.box01 h1{ font-size:16px; font-weight:normal}
.box01 h2{font-size:14px; font-weight:normal}
/*-----box2开始-----*/
.box02{ width:887px; height:380px; margin:0 auto; background:url(../images/box01.jpg) no-repeat;}
.box02 .bx1{width: 200px;
height: 240px;
position: relative;
left: 70px;
top: 10px;
float: left;
margin-right: 77px; text-align:center}
.box02 .bx1 h1{  height:30px; font-size:16px; line-height:30px; margin-top:10px; margin-top:20px;}
.box02 .bx1 h2{  height:25px; font-size:14px; line-height:25px; font-weight:normal}
.box02 .bx1 h3{  height:25px; font-size:14px; line-height:25px;  }
.box02 .bx1 p{font-size:11px; }
.box02 .bx1 h3 span{ background:#070101; color:#FFF; padding:0px 5px; margin-right:5px;}
/*-----box3开始-----*/
.box03{ width:888px; height:823px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid;
margin-top:80px;}
.box03 .bx1{ width:886px; height:330px; margin-top:20px;}
.box03 .bx1 img{ width:445px; height:325px; float:left; margin-left:60px; margin-right:110px;}
.box03 .bx1 .right{ width:215px; height:330px; float:left; text-align:center}
.box03 .bx1 .right h1 {
font-size: 20px;
width: 30px;
height: 235px;
float: right;
line-height: 25px;
padding-left: 10px;
margin-top: -15px;
}
.box03 .bx1 .right h1 span{ background:#F00; padding:2px; font-size:12px; }
.box03 .bx1 .right h2 {
font-size: 20px;
width: 30px;
float: right;
line-height: 25px;
background: #F00;
padding: 10px 0px;
margin-left: 10px;
	 
}
.box03 .bx1 .right p {
color: #5e5e5e;
width: 26px;
float: right;
font-size: 14px;
line-height: 15px;
border-right: #333 1px solid;
padding: 0px 2px;
}
.box03 .bx2{width: 50px;
height: 78px;
margin: 0 auto;
    margin-left: auto;
background: url(../images/03.jpg) no-repeat;
margin-left: 470px;}
.box03 .bx2 p {
color: #5e5e5e;
width: 25px;
float: right;
font-size: 14px;
line-height: 15px;
padding: 0px 18px;
height: 50px;
}
.box03 .bx2 .padd0{ padding:0px !important;}
.marl60{margin-left: 60px;}
.mar0{margin-right: 0px!important;}
.box03 .bx3{ width: 25px;

height: 80px;

border: #e70012 1px solid;

float: left;

text-align: center;

line-height: 20px;

font-weight: bold;

margin-left: 20px;

margin-top: 260px;}
/*-----box4开始-----*/
.box04{ width:888px; height: 780px; margin-top:88px; margin:0 auto; border:#c6c4c5 2px solid; border-top:none; border-bottom:#c6c4c5 10px solid;
margin-top:80px;}
.box04 h1{ font-size:16px; font-weight:normal; text-align:center}
.box04 h2{font-size:14px; font-weight:normal; text-align:center; }
.box04-ner{ height:615px; width:888px;margin-top:40px;}
.box04-ner ul{ padding:0px}
.box04-ner ul li{width: 263px;
height: 615px;
float: left;
margin-right: 49px;
text-align: center;}
.box04-ner ul li p{ padding:0px 10px; font-size:14px;}
.box04-ner ul li img{ margin:30px 0px;}
/*-----foot开始-----*/
#foot{ height:125px; width:100%; background:#140b0c; text-align:center; margin-top:120px;}
#foot img{ margin-top:24px;}
/*---foot结束-----*/
/*---加盟-----*/
.jm-top{ height:280px !important; background:url(../images/banner2.jpg) no-repeat;}
.jm-box01{ width:695px; height:182px;  margin:0 auto;margin-top:40px;}
.jm-box01 h1{ font-size:18px; height:40px; line-height:40px; margin-bottom:10px;}
.jm-box01 .bx{ width:195px; height:35px; float:left;}
.jm-box01 .inpt{ width:133px; height:20px; border:#333 1px solid;}
.jm-box01 .bx2{ width:195px; height:35px; margin-left:288px; float:left;}
.jm-box01 .bx3{ width:695px; height:40px;margin-top:80px;}
.jm-box01 .bx3 .yxs{ width: 615px;height: 31px;border: #333 1px solid;margin-top: 10px; }
.jm-box01 span { margin-right:10px; line-height:35px;}
.jm-box01 p{ height:40px; line-height:40px; text-align:center;}

.jm-box02{ width:695px; height:160px;  margin:0 auto;margin-top:40px;}
.jm-box02 ul{ padding:0 px;}
.jm-box02 ul li{width: 230px;
height: 42px;
line-height: 42px;
margin-bottom: 15px;
float: left;}
.jm-box02 ul li img{ margin-right:25px; float:left;}
.marl{ margin-left:200px;}
.jm-box02 ul li p{ text-align:center; line-height:18px;width: 180px;}

/*---关于我们-----*/
.ab-top{ height:351px !important; background:url(../images/banner3.jpg) no-repeat;}
.ab-box01{ width:1100px; height:40px; padding-top:30px; text-align:center}
.ab-box01 h1{ font-size:18px; }
.ab-box01 h2{font-size:16px; font-weight:normal;}
.ab-box02 {
    width: 811px;
    height: 748px;
    margin: 0 auto;
        margin-top: 0px;
    border: #c6c4c5 2px solid;
        border-top-color: rgb(198, 196, 197);
        border-top-style: solid;
        border-top-width: 2px;
        border-bottom-color: rgb(198, 196, 197);
        border-bottom-style: solid;
        border-bottom-width: 2px;
    border-top: none;
    border-bottom: #c6c4c5 10px solid;
    margin-top: 80px;
	text-align:center;
	margin-bottom:20px;
}
.ab-box03{ width:857px; height:648px; margin:0 auto; margin-top:40px;}
.ab-box03-left{ width:385px; height:628px; padding:10px; float:left;}
.ab-box03-left .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:right;}
.ab-box03-left .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;}
.ab-box03-left .bx2 p{ line-height:17px; font-size:14px; text-align:right;}
.ab-box03-left .bx3 {width: 385px;
height: 120px;
text-align: right;}
.ab-box03-left .bx3 img{ margin-top:10px; float:right;}
.ab-box03-right{ width:420px; height:648px; padding-left:30px; float:left; background:url(../images/18.jpg) no-repeat;}
.ab-box03-right .bx1{ padding:0px 10px; height:28px; border:#333 1px solid; font-size:16px; margin-bottom:25px; float:left;}
.ab-box03-right .bx2{width:385px; height:auto; overflow:hidden; margin-bottom:20px;}
.ab-box03-right .bx2 p{ line-height:17px; font-size:14px; text-align:left;}
.ab-box03-right .bx3 {width: 385px;
height: 120px;
text-align: left;}
.ab-box03-right .bx3 img{ margin-top:10px; float:left;}
/*---新闻资讯-----*/
.news-top{ height:303px !important; background:url(../images/banner4.jpg) no-repeat;}
.news-box02 {
    width: 850px;
    height: 400px;
    margin: 0 auto;
        margin-top: 0px;
    border: #c6c4c5 2px solid;
        border-top-color: rgb(198, 196, 197);
        border-top-style: solid;
        border-top-width: 2px;
        border-bottom-color: rgb(198, 196, 197);
        border-bottom-style: solid;
        border-bottom-width: 2px;
    border-top: none;
    border-bottom: #c6c4c5 10px solid;
    margin-top: 80px;
	margin-bottom:20px;
}
.zhaop{ width:320px; float:left; margin-left:20px;}
.news-box02 ul{ padding:0px; margin-bottom:50px; width:500px; float:left;}
.news-box02 ul li{  width: 850px; height:35px; line-height:30px; font-size:14px;}
.news-box02 ul li p{width: 690px; float:left; padding-left:40px;}
.news-box02 ul li span{ float:left; width:120px;}
.news-box03{ width: 160px; height:34px; margin:0 auto;}
.news-box03 a{ width:22px;text-align: center; height:20px; float:left; color:#333;}
.hots{ background:#140b0c; color:#FFF !important;}

/*---会员中心-----*/
.huiyuan-top{ height:308px !important; background:url(../images/banner5.jpg) no-repeat;}
.huiyuan-center{ width:1000px; height:425px; margin:0 auto;}
.huiyuan-box01{ width:152px;text-align:center; height:402px; float:left; margin-top:30px; background:url(../images/25.jpg) no-repeat;margin-left:66px;}
.huiyuan-box01 h1{ margin-top:8px; font-size:16px; width:152px; height:33px; text-align:center;}
.huiyuan-box01 h2{ font-size:14px;text-align:center;}
.huiyuan-box01 p{ width:110px; margin:0 auto; border-top:#333 1px solid; font-size:12px;text-align:center;}
.huiyuan-box02{ width:740px; height:402px; float:left; margin-left:40px;margin-top:40px;}
.huiyuan-box02 .bx{ width:707px; margin-bottom:20px; padding:0px 15px; height:99px; background:url(../images/24.jpg); line-height:30px; text-align:center;}
.huiyuan-box02 .gengd{ width:125px; height:18px; line-height:18px; text-align:center; border:#333 1px solid; margin:0 auto;}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。