🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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.视频演示
C123JP 手表 3页 带表单
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/style.css"></head><body><!--navigatiion部分--><div class="navigatiion"><div class="navigatiion_left"><h1>手表之家</h1></div><div class="navigatiion_middle"><ul><li class="active"><a href="index.html">首页<a href=""></a></li><li><a href="Finewatch.html">精品手表</a></li><li><a href="special.html">限时特价</a></li></ul></div><div class="navigatiion_right"><input type="text"><img src="img/1.search.png" alt=""><h2>登录/注册</h2></div></div><!--banner部分--><div class="banner"><div class="content"><div class="banner_box"><img src="img/1.banner.png" alt=""><h2>摩纹表</h2><h1>为自由时尚领航</h1><span>崇尚自由    冒险    激情</span><p>瑞士原产，164年历史，精于细节，设计坚持</p><button>点击抢购</button></div></div></div><!--product部分--><div class="product"><div class="content"><div class="product_box"><h1>产品分类</h1><p>droduct classification</p></div></div></div><!--notice部分--><div class="notice"><div class="content"><div class="notice_box"><img src="img/2.标志.png" alt=""><h3>百达翡丽</h3></div></div></div><!--match部分--><div class="match"><div class="content"><div class="match_box"><img src="img/1.match.png" alt=""><h3>标价12000</h3><p>1500次观看/36次购买</p></div><div class="match_box"><img src="img/2.match.png" alt=""><h3>标价63200</h3><p>3652次观看/3次购买</p></div><div class="match_box"><img src="img/3.match.png" alt=""><h3>标价45320</h3><p>4512次观看/6次购买</p></div><div class="match_box"><img src="img/4.match.png" alt=""><h3>标价75863</h3><p>7856次观看/4次购买</p></div><div class="match_box"><img src="img/5.match.png" alt=""><h3>标价45230</h3><p>7854次观看/7次购买</p></div><div class="match_box"><img src="img/6.match.png" alt=""><h3>标价78540</h3><p>7895次观看/6次购买</p></div><div class="match_box"><img src="img/7.match.png" alt=""><h3>标价85621</h3><p>78956次观看/4次购买</p></div><div class="match_box"><img src="img/8.match.png" alt=""><h3>标价78562</h3><p>7896次观看/8次购买</p></div><div class="sousuo"> <img src="img/1.查找.png" alt=""><img src="img/1.查找.png" alt=""><img src="img/1.查找.png" alt=""></div></div></div><!--about部分--><div class="about"><div class="content"><div class="about_box"><h1>关于我们</h1><p>about us</p> </div></div></div><!--contact部分--><div class="contact"><div class="content"><div class="contact_box"><img src="img/2.定位.png" alt=""><p>四川省成都市锦江区靖康<br>路537号</p></div><div class="contact_box"><img src="img/3.邮件.png" alt=""><span></span></div><div class="contact_box"><img src="img/4.photo.png" alt=""><h3>18788888888</h3></div></div></div></body></html>
🏠CSS样式代码
*{margin: 0;padding: 0;border: 0;}/*navigatiion部分*/.navigatiion{width: 1280px;background-color:#19b3f3;overflow: hidden;height: 60px;margin: 0 auto;}.navigatiion_left{width: 320px;float: left;}.navigatiion_left h1{font-weight: normal;font-size: 30px;line-height: 60px;margin-left: 80px;}.navigatiion_middle{width: 320px;float: left;}.navigatiion_middle li a{text-decoration: none;color: black;}.navigatiion_middle ul{list-style: none;}.navigatiion_middle li{float: left;margin-left: 30px;height: 60px;line-height: 60px;}.navigatiion_right{width:640px;float: left;}.navigatiion_right input{height: 30px;width: 350px;margin-top: 15px;}.navigatiion_right h2{position: relative;left: 57%;top: -30px;font-weight:normal;font-size: 20px;}.navigatiion_right img{width: 4%;position: relative;right: 45px;top: 9px;}/*banner部分*/.content{width: 1080px;margin: 0 auto;}.banner_box{width: 1000px;height: 520px;}.banner_box img{width: 1000px;margin-left: 40px;margin-top: 50px;}.banner_box h1{position: relative;top: -300px;left: 18%;color: white;font-weight: normal;font-size: 40px;letter-spacing:10px;}.banner_box h2{position: relative;top: -300px;left: 18%;color: white;font-weight: normal;font-size: 30px;letter-spacing:10px;}.banner_box span{position: relative;top: -290px;left: 20%;color: white;font-weight: normal;font-size: 20px;color: black;background-color: white;padding: 5px 45px;}.banner_box p{position: relative;top: -280px;left: 20%;color: rgb(208, 208, 208);font-size: 14px;}.banner_box button{position: relative;top: -260px;left: 27%;font-size: 15px;color: black;background-color:transparent;border: 2px solid yellow;padding: 5px 20px;}/*product部分*/.product_box{height: 70px;text-align: center;width: 1080px;margin: 0 auto;}/*notice部分*/.notice_box{height: 220px;}.notice_box img{width: 20%;margin-left: 432px;margin-bottom: 20px;}.notice_box h3{position: relative;left:500px;top: -85px;}/*match部分*/.match_box{width: 270px;float: left;height: 490px;position: relative;}.match_box img{width: 80%;margin-left: 20px;padding: 30px 0;min-height: 350px;}.match_box h3{margin-left: 70px;}.match_box p{margin-left: 52px;font-size: 14px;margin-top: 10px;}.sousuo img{width: 2%;float: left;margin-left: 250px;position: relative;bottom: 550px;right: 50px;}/*about部分*/.about_box{height: 130px;width: 1080px;float: left;margin-top: 30px;}.about_box h1{text-align: center;}.about_box p{text-align:center;}/*contact部分*/.contact_box{width: 360px;float: left;}.contact_box img{width: 10%;margin-left: 162px;min-height: 50px;}.contact_box p{margin-left: 120px;margin-top: 20px;}.contact_box span{position: relative;left: -28%;top: 38px;}.contact_box h3{position: relative;left: 32%;top: 18px;font-weight: normal;}/*match部分*/.match{width: 1280px;margin: 0 auto;}.match_top{height: 470px;background-color: rgb(81, 81, 81);position: relative;}.top_box{width: 440px;height: 450px;float: left;}.middle_box{width: 360px;height: 450px;float: left;}.middle_box img{width: 110%;position: relative;left: 0px;top: 70%;}.middle_box h1{position: absolute;left: 48%;top: -4.3%;font-size: 80px;}.middle_box h2{position: absolute;left: 40%;top: 110%;font-size: 30px;}.middle_box button{height: 40px;width: 40px;position: relative;left: 99%;top: -10%;border-radius: 20px;font-size: 40px;line-height: 40px;border: 2px solid black;background-color: transparent;cursor: pointer;}.top_box1{width: 440px;height: 380px;float: left;margin-top: 66px;}.top_box img{margin-left: 161px;margin-top:76px;}.match_bottom{height: 470px;background-color: #00736d;}.bottom_box{width: 640px;height: 450px;float: left;}.line3{width: 60px;border-bottom: 2px solid rgb(167, 167, 167);position: absolute;left: 30.5%;top: 15%;}/*lianxi*/.lianxi{width: 1280px;margin: 0 auto;position: relative;}.lianxi_box{width: 640px;float: left;}.lianxi_box img{width: 5%;margin-top: 50px;margin-left: 20px;}.lianxi_box h2{position: relative;left: 70px;bottom: 35px;}.lianxi_bottom img{width: 5%;position: relative;right: 30%;top: 30px;}.lianxi_bottom h2{position: absolute;left: 26%;bottom:-5%;}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
