🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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>崇尚自由&nbsp&nbsp&nbsp&nbsp冒险&nbsp&nbsp&nbsp&nbsp激情</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</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模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

更多推荐

HTML实例网页代码 (手表商城网站制作) 大学生网页作业源码

HTML实例网页代码 (手表商城网站制作) 大学生网页作业源码

📂文章目录

二、📚网站介绍

三、🔗网站效果

▶️1.视频演示

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

🏠CSS样式代码

五、🎁更多源码

发布评论取消回复

最近发表

热门文章

标签列表

HTML实例网页代码 (手表商城网站制作) 大学生网页作业源码

📂文章目录

二、📚网站介绍

三、🔗网站效果

▶️1.视频演示

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

🏠CSS样式代码

五、🎁更多源码

相关文章

发布评论取消回复

最近发表

热门文章

标签列表