任务2:自选主题设计-数码产品专卖网站

最新推荐文章于 2024-09-10 22:58:41 发布
最新推荐文章于 2024-09-10 22:58:41 发布
阅读量159 收藏 2
点赞数
文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80485795/article/details/134748846
版权

成果展示:

效果预览

这是网页界面

这是登录界面(水平有限, 比较粗糙)

源码如下

网页部分源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自选主题</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 导航栏 start */
        .nav {
            width: 100%;
            height: 100px;
            background-color: white;
        }

        .nav-bar {
            width: 1226px;
            margin: 0 auto;
            line-height: 100px;
        }

        .shopping {
            float: right;
            color: #333;
        }

        .nav-bar li {
            float: left;
        }

        .nav-bar a {
            color: #333;
            padding: 0 10px;
        }

        .nav-bar a:hover {
            color: #ff6700;
        }

        /* 导航栏 end */

        /* banner start  */
        .wrap {
            width: 1226px;
            height: 950px;
            margin: 0 auto;
            line-height: 100px;
            position: relative;
        }

        .banner {
            width: 100%;
            height: 700px;
        }

        .banner-img {
            width: 100%;
        }

        .slide {
            width: 234px;
            height: 620px;
            padding: 20px 0;
            background-color: rgb(105, 101, 101, 0.5);
            position: absolute;
            left: 0;
            top: 0;
        }

        .slide li {
            height: 42px;
            line-height: 64px;
            text-align: left;
            padding: 10px;
            padding-left: 30px;
            font-size: 25px;
        }

        .slide a {
            color: #fff;
        }

        .slide a:hover {
            color: #ff6700;
        }

        /* banner end  */

        /* 内容模块 start  */
        .content {
            width: 100%;
            background-color: white;
            overflow: hidden;
            padding: 4px 0 12px;
        }

        /* 内容模块 end */
        /* 手机模块 strat  */
        .title {
            text-align: left;
            color: #333;
            font-size: 22px;
            font-weight: 400;
            line-height: 58px;
        }



        .phone-box {
            width: 100%;
            height: 800px;
        }

        .item {
            width: 230px;
            height: 400px;
            margin: 0 0 14px 14px;
            background-color: white;
            padding: 20px 0;
            box-sizing: border-box;
            float: left;
        }

        .item-img {
            width: 160px;
            margin-bottom: 19px;
        }

        .item-name {
            width: 234px;
            height: 21px;
            color: #333;
            line-height: 21px;
            margin: 0 auto;
        }

        .item-price {
            color: #ff6700;
            font-size: 14px;
        }

        .more {
            width: 100%;
            height: 60px;
            background-color: #fff;
        }

        .more a {
            color: #333;
        }

        .more a:hover {
            color: #ff6700;
        }

        /* 手机模块 end */
        .footer {
            width: 1226px;
            height: 200px;
            margin: 0 auto;
            line-height: 40px;
            position: relative;
        }

        .footer-box {
            width: 100%;
            height: 150px;
        }

        .service ul {
            width: 20%;
            float: left;

        }
    </style>

</head>

<body>
    <!-- 导航栏 start -->
    <div class="nav">
        <div class="nav-bar">
            <ul>
                <li><a href="https://search.jd.com/search?keyword=%E6%95%B0%E7%A0%81&wq=%E6%95%B0%E7%A0%81&cid3=655"
                        target="_blank">手机</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91&enc=utf-8&suggest=1.def.0.SAK7|MIXTAG_SAK7R,SAK7_M_AM_L5398,SAK7_M_GUD_R,SAK7_S_AM_R,SAK7_D_HSP_L30657,SAK7_SC_PD_R,SAK7_SM_PB_R,SAK7_SM_PRK_LC,SAK7_SM_PRC_LC,SAK7_SM_PRR_R,SAK7_SS_PM_R|&wq=%E7%AC%94%E8%AE%B0%E6%9C%AC&pvid=06f39c0d56df43beaedd19dd87d10794"
                        target="_blank">笔记本电脑</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E7%94%B5%E8%A7%86&enc=utf-8&wq=%E7%94%B5%E8%A7%86&pvid=bd30f6aa97864d04b5ddb2963091a28f"
                        target="_blank">电视</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E5%B9%B3%E6%9D%BF%E7%94%B5%E8%84%91&enc=utf-8&suggest=1.def.0.SAK7|MIXTAG_SAK7R,SAK7_M_AM_L5398,SAK7_M_GUD_R,SAK7_S_AM_R,SAK7_D_HSP_L30657,SAK7_SC_PD_R,SAK7_SM_PB_R,SAK7_SM_PRK_LC,SAK7_SM_PRC_LC,SAK7_SM_PRR_R,SAK7_SS_PM_R|&wq=%E5%B9%B3%E6%9D%BF&pvid=22324cf3ad2142dd98c3b44798ae286a"
                        target="_blank">平板电脑</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E8%80%B3%E6%9C%BA&enc=utf-8&wq=%E8%80%B3%E6%9C%BA&pvid=b7254477b62143b6b45bcf4a70fda819"
                        target="_blank">耳机音箱</a></li>
                <li><a href="https://search.jd.com/Search?keyword=%E7%9B%B8%E6%9C%BA&enc=utf-8&wq=%E7%9B%B8%E6%9C%BA&pvid=88b46ad0c37141b382274f45db0dd4b7"
                        target="_blank">相机</a></li>
            </ul>
            <div class="shopping">
                <a href="#">购物车</a>
            </div>
        </div>
    </div>
    <!-- 导航栏 end -->
    <!-- banner start  -->
    <div class="banner">
        <div class="wrap">
            <img class="banner-img" src="./img/banner-img.png" alt="热门推荐">
            <div class="slide">
                <ul>
                    <li><a href="http://www.vmall.com" target="_blank">HUAWEI</a></li>
                    <li><a href="http://www.mi.com" target="_blank">Xiaomi</a></li>
                    <li><a href="http://www.vivo.com" target="_blank">VIVO</a></li>
                    <li><a href="http://www.oppo.com" target="_blank">OPPO</a></li>
                    <li><a href="http://www.nubia.com" target="_blank">红魔</a></li>
                    <li><a href="http://www.lenovo.com" target="_blank">Lenovo</a></li>
                    <li><a href="http://www.apple.com/iphone" target="_blank">iphone</a></li>
                    <li><a href="http://www.apple.com/ipad" target="_blank">ipad</a></li>
                    <li><a href="http://www.apple.com/Mac" target="_blank">Mac</a></li>
                    <li><a href="http://www.sony.com" target="_blank">sony</a></li>
                </ul>
                <!-- 品牌名 -->
            </div>
        </div>
    </div>
    <!-- banner end  -->
    <!-- 内容模块 start  -->
    <div class="content">
        <div class="wrap">
            <!-- 手机模块 start  -->
            <div class="phone">
                <h3 class="title">手机</h3>
                <div class="phone-right">
                    <div class="item">
                        <a href="https://www.vmall.com/product/10086970184614.html#2601010453706" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">HUAWEI Mate60</p>
                            <p class="item-price">5999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vmall.com/product/10086281788718.html#2601010457505" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">HUAWEI MateX5</p>
                            <p class="item-price">13999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vivo.com.cn/vivo/iqoo12/" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">IQOO 12</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.mi.com/shop/buy/detail?product_id=19432&cfrom=search" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">Redmi K70</p>
                            <p class="item-price">3999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.nubia.com/product/detail/s/2550" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">红魔9pro</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vivo.com.cn/vivo/iqoo11s/" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">IQOO 11S</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vivo.com.cn/vivo/iqooneo8/" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">IQOO Neo8</p>
                            <p class="item-price">2999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.mi.com/shop/buy/detail?product_id=19182" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">Redmi Note13</p>
                            <p class="item-price">2499元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vivo.com.cn/vivo/xfold2/" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">VIVO X FOLD 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="https://www.vivo.com.cn/vivo/x100/" target="_blank">
                            <img class="item-img" src="./img/HUAWEI Mate60.png" alt="">
                            <p class="item-name">VIVO X100</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                </div>

            </div>
            <!-- 手机模块 end -->
            <div class="more">
                <h3 class="title"><a
                        href="https://search.jd.com/Search?keyword=%E6%95%B0%E7%A0%81&enc=utf-8&wq=%E6%95%B0%E7%A0%81&pvid=34b0fcf7ed434840a74c057bc97be346"
                        target="_blank">查看更多数码产品</a></h3>
            </div>
            <!-- 点击更多去到京东数码区 -->
        </div>
    </div>
    <!-- 内容模块 end -->
    <!-- 页尾模块 start  -->
    <div class="footer">
        <div class="footer-box">
            <div class="service">
                <ul>
                    <li>帮助中心</li>
                    <li><a href="登录页面.html" target="_blank">账户管理</a></li>
                    <li><a href="#">订单信息</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul>
                    <li>服务支持</li>
                    <li><a href="#">线下门店</a></li>
                    <li><a href="#">服务政策</a></li>
                    <li><a href="#">售后维修</a></li>
                </ul>
                <ul>
                    <li>特色服务</li>
                    <li><a href="#">以旧换新</a></li>
                    <li><a href="#">真伪查询</a></li>
                </ul>
                <ul>
                    <li>关于品牌</li>
                    <li><a href="#">新闻资讯</a></li>
                    <li><a href="#">开发者社区</a></li>
                </ul>
                <ul>
                    <li>联系我们</li>
                    <li><a href="#">官方微博</a></li>
                    <li><a href="#">官方微信</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页尾模块 end  -->
</body>

</html>

登录页面源码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- <link rel="stylesheet" href="reset.css"> -->
    <style>
        .login {
            position: relative;
            margin: 7% auto;
            width: 500px;
            height: 600px;
            border-radius: 25px;
            background-color: #efefef;
            overflow: hidden;
            box-shadow: 0 0 17px #333;
        }

        .header {
            width: 50%;
            height: 60px;
            padding: 25px;
            margin: 10px auto;
            text-align: center;
            position: relative;
            margin-bottom: 80px;
        }

        .header h1 {
            color: #333;
            font-size: 45px;
        }

        .main {
            text-align: center;
        }

        .login-input,
        button {
            width: 300px;
            height: 40px;
            border: none;
            outline: none;
            padding-left: 20px;
            box-sizing: border-box;
            font-size: 16px;
            margin-bottom: 40px;
        }

        .button {
            padding-left: 0;
            margin-left: 20%;
            background-color: #ff6700;
            font-weight: bold;
            color: #efefef;
            letter-spacing: 10px;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="header">
            <h1>登&nbsp;&nbsp;录</h1>
        </div>

        <div class="main">
            <form>
                <span>
                    <input type="text" class="login-input" placeholder="账号">
                </span><br>
                <span>
                    <input type="password" class="login-input" placeholder="密码">
                </span><br>
            </form>
        </div>
        <button class="button">登录</button>
    </div>
</body>

</html>

完成过程:

网页设计的灵感来源于电商平台的数码产品区。

1.在网页的头部区域, 我创建了一个导航栏, 包含了各类产品的分类, 方便用户快速找到自己想要的商品, 并将它们集中放置在左侧。导航栏的右侧我添加了一个购物车选项, 让用户更好地管理自己想要的商品。

2.在网页的主体区域, 我放上了一张醒目的大图, 让用户了解到当今热门的数码产品是什么。另外, 我在图片旁边设置了一个侧边栏, 里面包含了各大国内外品牌信息, 方便用户挑选自己想要的品牌。同时侧边栏还设置了透明度, 以免遮挡住图片, 影响到用户的观看体验。

3.再往下就是一个手机模块, 包含了现如今热门的几款机型, 点击后均可跳转至对应手机品牌官网的选购页面。如果用户还想了解更多, 可以点击"查看更多数码产品", 会跳转至某东的数码产品区。

4.最后是页脚结构, 在页脚结构中我设置了多个选项供用户选择, 并采用了列表结构让其更加美观。其中点击账户管理后, 会跳转到登录页面提示用户登录。

学到的内容:

1.对盒子模型有了更深的理解

2.综合运用了各类标签

3.超链接的添加

今后学习规划:

1.学习登录页面的制作, 争取做美观。

2.学习其他网页元素如搜索框, 让网页元素更丰富。

YUVAL_
关注
汇编语言与接口技术——期末设计
愿青春不负梦想
08-14 4947
本设计以8086微处理器为基础，为了研究并行通信的概念，为了研究I\O数字接口芯片，并且掌握可编程接口芯片的应用。选用8253、8255、8259等芯片，集成实现了存储器扩展应用、液晶显示器应用、交通灯控制系统、简易密码锁功能。在 Proteus 中设计出硬件连接及布局，在 EMU 8086 编译环境下编写程序进行仿真，仿真实验结果表明：该电路设计正确，程序编写符合要求，各部分协作运行效果良好。 关键字： 8086微处理器，8086微机设计，交通灯，密码锁...
教育大数据总体解决方案（5）
2301_76549664的博客
04-15 1294
（4）错题整理 将学生的本次考试错题进行集中整理，提炼出所有题目的题干和正确的答案。 （5）提高方案 分析学生对知识点掌握情况，推算出学生的进步空间以及下次考试的预测拔高分数。根据学生本次考试错误知识点，同比成绩等级划分再高一级的学生，找出相同知识点对比差距较大的知识点。 （6）个性推荐 根据学生本次考试的分析，针对学生知识点的掌握情况进行精准试题推荐，每个需要掌握的知识点，个性化推荐三种类型试题：基础、进阶、培优三个阶段试题，帮助学生高效的自主学习。
幼儿-综合素质【2】
robin9409的博客
03-10 1万+
1.材料分析题：材料：一天早上，陈一航蹦蹦跳跳地走进教室，在搬椅子时，他发现旁边小朋友的椅子上有一本书没有收好，便大声喊道：“余老师，这儿有一本书没有收。”余老师笑看说：“那就请你把它送回去，好吗？”他高兴地把书拿往图书角。由于陈一航平时吃饭、睡觉、上课、活动无一不让老师费心，所以余老师一直盯着他的送书过程，生怕他把书拿到别处去。当他把书拿到书柜前，正想顺手往里面一扔时，余老师连忙说：“谢谢你哦，你帮了我的一个大忙，要不等会儿我还得自己把书整理好。”他听了后连忙把书放整齐，离开书柜了，还不时地回头看看书本是
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
用计算机制作演示文稿教案博客,《创作演示文稿》教学设计
weixin_39668408的博客
06-23 337
主题活动:创作演示文稿一、活动意义：1．能够从多个途径收集信息，并能针对具体任务需求筛选和评价信息。2．能够围绕主题，综合利用相关的工具和材料设计并制作简单的多媒体作品。3．在展示与评议中认识作品，总结利用信息技术解决问题的经验。4．能够积极主动地思考和尝试将信息技术应用到生活实际中的方法，把信息技术作为学习的知识，同时是学习、生活、工作的工具，增强鉴赏美的意识，提高审美情趣。二、活动任务：通过各...
(渝粤教育)网络教育远程教育统考计算机应用基础复习题
渝粤题库
05-07 4446
正确答案：详见左边【渝粤教育】公众号 _______服务器会自动把域名地址解析为IP地址。 A.HTTP B.DNS C.FTP D.SMTP ______包括体积、 存储容量、 输入输出能力。 A.计算机处理数据的方式 B.计算机的规模和处理能力 C.计算机的使用范围 D.计算机使用的电子器件 ______包括体积、 存储容量、...
[渝粤教育] 西南科技大学 计算机文化基础复习资料
渝粤题库
12-20 1134
计算机文化基础复习资料 一、单选题 1.在计算机内部,______是数据加工、处理和传送的形式。 A.二进制码 B.八进制码 C.十进制码 D.SCCI码 答案:看左边查询 2.在计算机领域，信息是经过转化而成为计算机能够处理的（ ）。 A.数据 B.符号 C.图形 D.数字 答案:看左边查询 3.在计算机技术中采用二进制，其主要原因是（ ） A.由于计算机采用的器件决定，计算机采用了具有两种稳定状态的二值电路 B.二进制运算最简单 C.二进制数表示简单，学习容易 D.最早设计计算机的人随意决定的 答案:看
PPT制作技术收集
dianmao0917的专栏
06-14 3918
1. 两幅图片同时动作 PowerPoint的动画效果比较多，但图片只能一幅一幅地动作。如果你有两幅图片要一左一右或一上一下地向中间同时动作，可就麻烦了。其实办法还是有的，先安置好两幅图片的位置，选中它们，将之组合起来，成为"一张图片"。接下来将之动画效果设置为"左右向中间收缩"，现在请看一看，是不是两幅图片同时动作了？ 2. 滚动文本框的制作 右击工具栏打开"控件工
css的选择器有哪些？权重由大到小是怎么排序的？
BANaanaa的博客
09-10 701
来看看css的选择器与权重比吧
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 387
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2297
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 488
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
CSS基本语法结构
nice66660的博客
09-10 1260
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 277
【代码】css鼠标移动过去变成手的图标。
如何利用 CSS 渐变实现多样化背景效果
最新发布
weixin_63625059的博客
09-10 859
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4649
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
”CSS 网格“二维布局系统（补充）——WEB开发系列32
一条晒干的咸鱼的博客
09-07 1582
CSS 网格布局是一种二维布局系统，用于网页设计。通过使用网格，你可以将内容以行和列的形式进行排列。此外，网格布局还能够简便地实现一些复杂的布局结构。
unocss 一直热更新打印[vite] hot updated: /__uno.css
weixin_48230016的博客
09-10 351
client.ts:450 [vite] hot updated: /__uno.css
EPC-6G2C-L液晶参数配置详解：自选屏显示教程
1. 适用范围：该文档适用于A6GxC系列产品的液晶屏配置，特别是EPC-6G2C-L工控板。 2. 原理概述：文章阐述了配置液晶参数的重要性，确保液晶屏与主板之间的正确通信和兼容性，以便根据实际需要选择合适的分辨率和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值