📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️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>www.shuobia.com</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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习
