【web研发网页制作】html+css+js网页制作个人网页轮播效果（4页面附源码）
<h3 style="color: black; text-align: left; margin-bottom: 10px;">个人网页制作目录</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">触及</span>知识</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">写在前面</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">1、</span>网页主题</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">2、</span>网页效果</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Page1、我的首页</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Page2、文经风采（学校）</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Page3、美图分享</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Page4、热剧推送</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">3、</span>网页架构与技术</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3.1 脑海构思</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3.2 整体布局</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3.3 技术说明书</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">4、</span>网页源码</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Html</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">Css</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">作者寄语</span></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">触及</span>知识</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">轮播效果网页制作，个人主题网页制作，期末网页大作业，网页作业成品，web前端源码实例，<span style="color: black;">怎样</span>制作网页，网页设计思路，<span style="color: black;">怎样</span>从零<span style="color: black;">起始</span>制作web页面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">专栏</span>
</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：web前端大作业网页制作</p><span style="color: black;">关于我</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：一个<span style="color: black;">连续</span>输出型博主，爱分享，喜技术，期待关注与交流！</p><span style="color: black;">公众号</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：《IT黄大大》<span style="color: black;">更加多</span>分享抢先看；</p><span style="color: black;"><span style="color: black;">科研</span>主题</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：影视，明星，家乡，旅游，个人，美食，校园，商城，运动，特效等</p><span style="color: black;">技术涉猎</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：HTML+CSS，HTML+CSS+JS，Java+mysql数据库，vue项目等</p><span style="color: black;"><span style="color: black;">研发</span>软件</span>：vscode，dreamweaver，hbuilder，sublime text，eclipse，idea等；
<h1 style="color: black; text-align: left; margin-bottom: 10px;">写在前面</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">网页制作中在我看来想法最难，<span style="color: black;">非常多</span>时候自己想做好，<span style="color: black;">然则</span>奈何一片空白，今天我就给<span style="color: black;">大众</span>分享一个简约风格的个人网页，<span style="color: black;">重点</span><span style="color: black;">期盼</span>能给<span style="color: black;">大众</span>带来<span style="color: black;">有些</span>作业上的创意上的灵感，<span style="color: black;">亦</span><span style="color: black;">期盼</span><span style="color: black;">大众</span>能够从中得到启发，<span style="color: black;">处理</span>自己眼前的作业窘境，当然能够学到知识是最好的，废话<span style="color: black;">亦</span>不多说了，我<span style="color: black;">尽可能</span>做到<span style="color: black;">定时</span>更新哈，<span style="color: black;">期盼</span><span style="color: black;">大众</span>能<span style="color: black;">连续</span>关注我哈！</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>网页主题</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这次</span><span style="color: black;">重点</span><span style="color: black;">科研</span>的方向是一个个人<span style="color: black;">关联</span>的，<span style="color: black;">重点</span><span style="color: black;">包含</span>个人主页，学校，摄影，追剧四个方向，当然简约的主题与清新的色调搭配，<span style="color: black;">期盼</span>能入<span style="color: black;">大众</span>的法眼，这个<span style="color: black;">亦</span>是基于html+css+js<span style="color: black;">研发</span>的个人主题附轮播效果的网页，创作<span style="color: black;">很难</span>，有<span style="color: black;">必须</span>源码的<span style="color: black;">能够</span>关注z公z众z号《IT黄大大》<span style="color: black;">回复"</span><span style="color: black;">个人</span><span style="color: black;">网</span><span style="color: black;">页w015</span><span style="color: black;">"</span><span style="color: black;"><span style="color: black;">或</span></span><span style="color: black;">"</span><span style="color: black;">w015code"</span>
</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">，<span style="color: black;">就可</span><span style="color: black;">得到</span>获取源码的方式。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">看下面的效果图，是不是满满的简约风，<span style="color: black;">期盼</span><span style="color: black;">大众</span>能够<span style="color: black;">爱好</span>这类风格的哈。</p>声明：原创于博主《IT黄大大》，欢迎<span style="color: black;">大众</span>转载，烦请转前注明出处，感谢<span style="color: black;">大众</span>的支持，<span style="color: black;">更加多</span>专栏可关注文尾唯心宫众号《IT黄大大》
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>网页效果</h1>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Page1、我的首页</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRvqNIms1z0UTgdobJdmQQQnHIAb8swIREgmozZWAWjrrg86Py9HGHnQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Page2、文经风采（学校）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRVfzFjgib3icP3swWcpU9r99FsdxLgaav3RcfHVSo5l4Nz1b5lLd3PVkQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Page3、美图分享</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRm5LtJUYBCzqJkBuSXC9KqcqnUmdFuqN3Q7o60OCGfw0DlkIGqp9V5Q/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Page4、热剧推送</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRtlib5NthLutg2cE5yPiaRxI91cxxzMT1ShqUPtS9LqoRuu92qvw0W28Q/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>网页架构与技术</h1>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3.1 脑海构思</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">想要</span>做好一个页面，<span style="color: black;">首要</span>脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候<span style="color: black;">咱们</span><span style="color: black;">通常</span>都是采用浮动布局的方式来实现的，<span style="color: black;">由于</span>这类静态页面的兼容性<span style="color: black;">需求</span>不高，<span style="color: black;">因此</span><span style="color: black;">咱们</span><span style="color: black;">想要</span>好大致的框架。</p>此次<span style="color: black;">重点</span>设置了4个页面，分别是我的首页，文经风采，美图分享，热剧推送四个方向去拓展的，其中有菜单带有悬浮效果。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3.2 整体布局</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在我的页面制作过程中，我<span style="color: black;">重点</span>采用的是浮动式布局，从左往右，从上至下的<span style="color: black;">次序</span>来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，<span style="color: black;">首要</span>我会设计下面几部分：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">头部：banner（<span style="color: black;">重点</span><span style="color: black;">包含</span>导航图和logo之类的）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">菜单：menu（<span style="color: black;">重点</span>是采用a标签进行<span style="color: black;">转</span>的）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">主体：main（核心内容展示）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">底部：foot（版权声明）</p>其中头部和菜单及底部三个模块都是公用的，针对<span style="color: black;">每一个</span>页面的切换<span style="color: black;">重点</span><span style="color: black;">表现</span>在中间的主体模块，这<span style="color: black;">亦</span>是一个好的网页作品必要的四大元素，<span style="color: black;">否则</span><span style="color: black;">便是</span>斜坡上盖房子了。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3.3 技术说明书</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重点</span>应用了web前端2个模块的技术HTML + CSS</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML模块：<span style="color: black;">重点</span>针对页面的结构搭建，该网站整体采用的是div标签<span style="color: black;">做为</span>盒子，其中<span style="color: black;">包括</span>:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">相关</span><span style="color: black;">没</span>序列表 ul li 、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">段落标签 p、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">照片</span>标签 img 、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内标签span、</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字体标签 h2 h3.等</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS模块：</p><span style="color: black;">重点</span>采用的是浮动式布局的方式，页面搭建<span style="color: black;">重点</span><span style="color: black;">经过</span>设置div的border属性来确定<span style="color: black;">每一个</span>div的位置，<span style="color: black;">而后</span>针对<span style="color: black;">区别</span>的位置定位。针对<span style="color: black;">每一个</span>元素<span style="color: black;">经过</span>margin和padding属性来设置<span style="color: black;">区别</span>模块的相对位置，设置文字颜色color属性等。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重点</span>用到了font的文字基本属性，bac<span style="color: black;">公斤</span>round设置<span style="color: black;">关联</span>背景色。文本居中text-align:center</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>标签模块采用的是border属性，设置div的左边框的厚度和颜色。</p>声明：原创于博主《IT黄大大》，欢迎<span style="color: black;">大众</span>转载，烦请转前注明出处，感谢<span style="color: black;">大众</span>的支持，<span style="color: black;">更加多</span>专栏可关注文尾唯心宫众号《IT黄大大》
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span>网页源码</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">首页模块</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Html</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRog6FQGJY65T9gx6EumIa8kuTyTUJqW3DmrbqfDLH6UzvThP66w27bA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">Css</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/EKbKm6ZianRwcETgSg38eflJj4ORhReKRCwGZ4PPpXPWUVb54ibVIF2A3Nd2AODepxkZNWqyCSiawicuMCbMtsK3UA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">完整源码获取方式</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">A、灌注微z心z公z众z号：《IT黄大大》</p>B、<span style="color: black;">信息</span>回复"个人网页w015<span style="color: black;">"</span><span style="color: black;">或</span><span style="color: black;">"</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">w015code"</p>C、获取下载路径<span style="color: black;">就可</span>下载，解压即用.
<h1 style="color: black; text-align: left; margin-bottom: 10px;">作者寄语</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>我的这篇博客对您有<span style="color: black;">帮忙</span>、<span style="color: black;">况且</span>您<span style="color: black;">爱好</span>我的博客内容，请 “点赞” “评论” “<span style="color: black;">保藏</span>” 一键三连哦！当然<span style="color: black;">倘若</span>这个<span style="color: black;">文案</span>对您带来<span style="color: black;">欠好</span>的体验还<span style="color: black;">期盼</span>能多多包涵，<span style="color: black;">一块</span>学习进步。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【灌注我 | 获取<span style="color: black;">更加多</span>源码 | <span style="color: black;">优秀</span><span style="color: black;">文案</span>】 带您学习前端知识、CSS特效、3D炫酷效果、<span style="color: black;">照片</span>展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在微z心z公z众z号里<span style="color: black;">亦</span>会<span style="color: black;">定时</span>分享<span style="color: black;">有些</span>免费好看的html页面，期待您的关注哈」！
</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">声明：原创于博主《IT黄大大》，欢迎<span style="color: black;">大众</span>转载，烦请转前注明出处，感谢<span style="color: black;">大众</span>的支持，<span style="color: black;">更加多</span>专栏可关注文尾唯心宫众号《IT黄大大》</p>2024年<span style="color: black;">咱们</span><span style="color: black;">一块</span>加油，<span style="color: black;">一块</span>成长，感谢您的支持与谅解！
感谢你的精彩评论，带给我新的思考角度。 认真阅读了楼主的帖子，非常有益。 对于这个问题，我有不同的看法...
页:
[1]