HTML+CSS大作业：珠宝商城/珠宝定制（6页）

奥利奥ala

于 2024-09-06 16:35:53 发布

阅读量600

点赞数 7

分类专栏： html基础网页制作文章标签： html css 课程设计

本文链接：https://blog.csdn.net/weixin_53453950/article/details/141962473

版权

html基础网页制作专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html作业基础水平制作，适用于初学者，页面排版干净，固定导航栏加上banner，包含了表单，表格超链接等基础知识，采用了html+css来实现布局，其中有几个页面添加了js代码，这个实例比较全面，适合有点js基础的同于作为参考练手，本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

难度系数：★★★☆☆

一、网站题目

购物商场、珠宝商城、珠宝定制等网站的设计与制作。

二、网站描述

本网站是以珠宝定制主题制作的一个网站，内容包含了六个板块，分别是首页，首饰类型，款式，材质，成品展示，信息填写这六个页面，画面布局风格统一，使用同一个导航栏，首页做了一个banner大图，通过修改内容也可以作为其他商场的一个模版，例如电脑商场，球鞋定制等。网站较为基础，但是包含了一部分js代码，适合初学者并且会使用js的同学作为练习使用。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站所有页面进行了截图展示，附上网站运行视频。

HTML+CSS网站分享：珠宝商场

五、部分代码制作

每个页面的css文件是分开的，文件太多了，所以就展示一个页面，在测试时需要替换掉里面的图片位置为本地位置

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="index.html"><button class="active">首页</button></a>
        <a href="1.html"><button>首饰类型</button></a>
        <a href="2.html"><button>款式</button></a>
        <a href="3.html"><button>材质</button></a>
        <a href="4.html"><button>成品</button></a>
        <a href="5.html"><button>信息填写</button></a>
    </div>
    <div class="top">
        <div class="left">
            <form action="" onsubmit="return false">
               <input type="text" placeholder="请输入账号"><br>
               <input type="text" placeholder="请输入密码"  id="psd" onblur="psdCheck()"><br>
               <input type="submit" value="登录" class="btn" onclick="sub()" id="submit" ><br>
           </form>
        </div>
        <div class="right">
            <h1>专属于您的定制设计</h1>
            <h3>我们的珠宝设计师非常乐意协助您打造理想的钻石珠宝。 从您天马行空的想法开始，我们将指导您完成创造过程。 从绘制草图到3D建模，再到手工制成的精美珠宝，每一个步骤，我们的设计师都将与您同行，为您提供贴心的服务。</h3>
        </div>
    </div>
    <div class="center" align="center">
        <h2>您想设计专属自己的戒指吗？</h2>
        <a href="#a1"><button>联系设计师</button></a>
    </div>
    <div class="img">
        <img src="./image/index1.jpg" alt="">
        <img src="./image/index2.jpg" alt="">
        <img src="./image/index3.jpg" alt="">
        <img src="./image/index4.jpg" alt="">
        <img src="./image/index5.webp" alt="">
        <img src="./image/index6.jpg" alt="">
    </div>
    <div class="des">
        <p>精雕细琢的珠宝，平易近人的价格</p>
        <p>凭借我们高效的运营模式，BAUNAT量身定制的珠宝，意味着平易近人的实惠价格，以及高品质的质量。 当我们的珠宝设计师完成您的设计后，我们将以从源头购买钻石，保证无任何中间商。 我们高效的工作方式可避免任何与珠宝本身无关的不必要成本，并确保您以实在的价格获得高等级的质量。</p>
    </div>
    <a name="a1">
    <div class="c">
        <div class="c1" align="center">
            <h1>联系设计师</h1>
        </div>
        <div class="bottom">
            <div align="center">
                <img src="./image/微信.png" alt="">
                <h3>0000XXXX</h3>
            </div>
            <div align="center">
                <img src="./image/我的邮箱.png" alt="">
                <h3>11110000@163.com</h3>
            </div>
            <div align="center">
                <img src="./image/电话.png" alt="">
                <h3>135xxxx7909</h3>
            </div>
        </div>
    </div>
</a>
    
</body>
</html>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    function sub() {
    //如果全部输入正确返回成功  输入错误则输出提示
        if(psdCheck()){
            alert('登录成功');
            window.location.replace('1.html');
        }else{
            alert('密码不能为0');
        }
    }
    //验证密码
    function psdCheck(str) {
        let psd = $("#psd").val();
        console.log(psd)
        if(psd =='0'){
            return false;
        }else{
            return true;
        }
    }
</script>

index.css

.top{
    width: 100%;
    height: 400px;
    background-image: url(../image/indexbg.jpg);
    background-size:cover;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.top .left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.top .left input{
    margin-bottom: 20px;
    width: 200px;
    height: 30px;
    border-radius: 30px;
    border: 0;
}
.top .right{
    color: #DDDDDD;
    display: flex;
    flex-direction: column;
    width: 30%;
    word-wrap: break-word;
    align-items: center;
    justify-content: center;
}
.btn{
    width: 150px !important;
    background-color: rgb(182, 165, 115);
}
.center button{
    width: 60%;
    height: 40px;
    border: 0;
    border-radius: 30px;
    color: #DDDDDD;
    background-color: rgb(182, 165, 115);
}
.center button:hover{
    background-color: rgb(158, 136, 75);
    color: white;
}
.img{
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img img{
    width: 220px;
    height: 220px;
}
.des{
    margin-left: 50%;
    transform: translate(-50%);
    text-align: center;
    width: 40%;
}
.des :nth-child(1){
    color: rgb(208, 173, 115);
}
.des :nth-child(2){
    color: rgb(85, 85, 85);
}
.bottom{
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    background-color: rgb(182, 165, 115);
}
.c{
    padding-top: 50px;
    background-color: rgb(182, 165, 115);
}

nav.css

.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(182, 165, 115);
}
.nav button{
    width: 150px;
    height: 50px;
    background-color: rgb(182, 165, 115);
    border: 0;
}
.nav button:hover{
    background-color: rgb(158, 136, 75);
}
.nav .active{
    background-color: rgb(155, 123, 35);
}