🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
三、🔗网站效果
▶️1.视频演示
I88BG 贝聿铭人物介绍 6页无js 带视频 带表单 带报告3800字
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!doctype html><html><head><meta charset="utf-8"><title>贝聿铭|人物风采</title><link rel="stylesheet" type="text/css" href="css/css.css"><style>/*content begin*/.content{width:1100px;height:620px;margin:100px auto;}#photo_album{position:absolute;top:18%;left:25%;width:80%;height:450px;margin:130px auto;min-width:600px;max-width:800px;}#photo_album a{display:block;position:absolute;background-color:#fff;color: #333;border:1px solid #bbb;-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-o-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);-webkit-transition:all 0.5s ease-in;-moz-transition:all 0.5s ease-in;-o-transition:all 0.5s ease-in;transition:all 0.5s ease-in;}#photo_album img{display:block;margin-bottom:15px;}.small{width:300px;padding:6px 6px 12px 6px;font-size:10px;z-index:4;}.medium{width:300px;padding:10px 10px 20px 10px;font-size:0.8em;z-index:3;}.large{width:450px;padding:13px 13px 26px 13px;font-size:1em;z-index:2;}.big{width:300px;padding:20px 20px 30px 20px;font-size:1.2em;z-index:1;}#photo_album a:nth-child(1){top:0;left:20px;-webkit-transform: rotate(8deg);-moz-transform: rotate(8deg);-o-transform: rotate(8deg);transform: rotate(8deg);}#photo_album a:nth-child(2){bottom:0;left:0;-webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);}#photo_album a:nth-child(3){top:20px;left:176px;-webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);}#photo_album a:nth-child(4){bottom:-20px;right:630px;-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);-o-transform: rotate(4deg);transform: rotate(4deg);}#photo_album a:nth-child(5){bottom:10px;right:365px;-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);}#photo_album a:nth-child(6){top:0;left:400px;-webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-o-transform: rotate(-5deg);transform: rotate(-5deg);}#photo_album a:nth-child(7){top:90px;left:430px;-webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);}#photo_album a:nth-child(8){bottom:0;left:400px;-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);}#photo_album a:nth-child(9){top:10px;left:495px;-webkit-transform: rotate(-20deg);-moz-transform: rotate(-20deg);-o-transform: rotate(-20deg);transform: rotate(-20deg);}#photo_album a:nth-child(10){bottom:10px;right:156px;-webkit-transform: rotate(6deg);-moz-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);}#photo_album a:nth-child(11){top:0;left:680px;-webkit-transform: rotate(18deg);-moz-transform: rotate(18deg);-o-transform: rotate(18deg);transform: rotate(18deg);}#photo_album a:nth-child(12){bottom:-20px;left:700px;-webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);}#photo_album a:nth-child(13){top:0;right:0;-webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);transform: rotate(-8deg);}#photo_album a:nth-child(14){top:50px;right:20px;-webkit-transform: rotate(-4deg);-moz-transform: rotate(-4deg);-o-transform: rotate(-4deg);transform: rotate(-4deg);}#photo_album a:nth-child(15){bottom:0;right:0;-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);-o-transform: rotate(1deg);transform: rotate(1deg);}#photo_album a:hover{-webkit-transform: rotate(0deg) scale(1.1);-moz-transform: rotate(0deg) scale(1.1);-o-transform: rotate(0deg) scale(1.1);transform: rotate(0deg) scale(1.1);-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);-o-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);z-index:10;}/*content end*/</style></head><body><!--head begin--><header id="head"><div class="con"><div class="left"><div class="lle"><img src="pictures/lu/lu7.jpg" width="60px" height="60px"/></div><span id="word1">贝聿铭</span><span id="word2"> 一生用建筑征服世界</span></div><div class="right"><a href="register.html" target="new">┋注册┋</a></div></div></header><!--head end--><!--nav begin--><nav><div class="nav_in"><div class="navbox"><a href="index.html" target="new">首 页</a></div><div class="navbox"><a href="shengping.html" target="new">人物生平</a></div><div class="navbox"><div class="dropdown"><a href="works.html"><button class="dropbtn">主要作品</button></a><div class="dropdown-content"><a href="works.html">•卢浮宫金字塔</a><a href="works.html">•北京香山饭店</a><a href="works.html">•香港中银大厦</a><a href="works.html">•苏州博物馆</a></li><li> </li><li></li><li></div></div></div> <div class="navbox"><a href="shipin.html" target="new">人物视频</a></div><div class="navbox"><a href="fengcai.html" target="new">个人风采</a></div></div></nav><!--nav end--><!--content begin--><div class="content"><audio src="video/beiyuming.mp3" controls loop="loop" /></audio><div id="photo_album"><a href="#" class="medium"><img src="pictures/renxiang/ren1.jpeg" width="300px"/>青年贝聿铭</a><a href="#" class="medium"><img src="pictures/renxiang/ren7.jpg" width="300px" alt=""/>贝聿铭作品</a><a href="#" class="small"><img src="pictures/renxiang/ren8.jpg" width="300px" alt=""/>贝聿铭</a><a href="#" class="big"><img src="pictures/renxiang/ren5.jpg" width="300px" alt=""/>青年贝聿铭</a><a href="#" class="small"><img src="pictures/renxiang/ren9.jpg" width="300px" alt=""/>贝聿铭</a><a href="#" class="small"><img src="pictures/renxiang/ren2.jpg" width="300px" alt=""/>贝聿铭在工作</a><a href="#" class="medium"><img src="pictures/renxiang/ren3.jpg" width="300px" alt=""/>贝聿铭在工作</a><a href="#" class="large"><img src="pictures/renxiang/ren6.jpg" width="450px"alt=""/>贝聿铭</a><a href="#" class="large"><img src="pictures/renxiang/ren4.jpg" width="450px" alt=""/> 贝聿铭与妻子</a></div></div><!--content end--><!--footer begin--><footer><div class="foot"><a href="#head"><span>Top</span></a><p>Copyright© 闫莆亚 版权所有</p></div></footer><!--footer end--></body></html>
🏠CSS样式代码
@charset "utf-8";/* CSS Document */body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0;padding:0;border:0;list-style: none;}body{font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:14px;}a{color:#000;text-decoration: none;}@font-face{font-family:word2;src:url(../word2.ttf); }/*head begin*/header{width:100%;height: 90px;background: #0a2536;}header .con{width:1100px;margin:0 auto;}header .con .left{float: left;height:46px;line-height: 46px;margin-right:50px;color: #fff;font-size:24px;}.lle{width: 60px;height: 60px;float: left;margin-top:10px;margin-right:20px;}header .con .left .lle img{border-radius:50%;}header .con .right{float: right;height:46px;line-height: 4;margin-left:50px;color: #fff;font-family:"微软雅黑";font-size:20px;}header .con .right a{color:#fff;}#word1{font-family:"华文隶书";font-size:60px;line-height:1.5;}#word2{font-family:word2; font-size:30px;line-height:1.5;}/*head end*//*nav begin*/nav{width:100%;height:55px;position:absolute;background:#C1C1C1;z-index:10;}nav .nav_in{width:1100px;margin:0 auto;padding-left:500px;}.navbox{float:left;margin-right:50px;font-size: 18px;height:55px;line-height: 55px;}.dropbtn {background-color:#C1C1C1;color: #000;padding: 16px;border: none;cursor: pointer;height:55px;font-size:18px;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 100px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color:#94ABCD;}/*nav end*//*foot begin*/footer{width:100%;height:100px;margin-top:100px;background: #0a2536; color:#fff;text-align: center;}footer .foot{width:1200px;height:100px;margin:0 auto;position: relative;}footer span{width:58px;height:32px;line-height: 43px;text-align: center;color:#fff;position: absolute;top:-31px;left:600px;margin-left:-29px;background: url(../images/sanjiao.png);}footer p{line-height: 127px;}/*foot end*/
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
