苏宁易购页面（未完成）

最新推荐文章于 2022-08-07 17:28:10 发布
最新推荐文章于 2022-08-07 17:28:10 发布
阅读量194 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62270197/article/details/125748391
版权 
 <style>
        /* * { 
            margin: 0;
            padding: 0;
        }  */
        li {
            list-style: none;
        }

        .nav {

            height: 30px;
            line-height: 1px;
            font-size: 12px;
            color: #333;
            background-color: #f5f5f5;
        }

        /* .nav li {
           
            width: 100%;
            background-color: #f5f5f5;
            border-bottom: 1px #eeeeee solid;
        }  */
        /* .nav_left{
            width: 1200px;
            margin: 0 auto;
        }
        .nav_right{
            width: 1200px;
            margin: 0 auto;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        } */

        .nav ul li a {
            float: left;
            line-height: 35px;
            padding: 0 5px;
            color: #333;
            text-decoration: none;
        }


        .nav .nav_left ul li a:hover {
            background-color: white;
            color: #ff6600;
        }

        .nav .nav_right ul li a:hover {
            background-color: white;
            color: #ff6600;
        }

        .logo {
            position: absolute;
            top: 25px;
            width: 170px;
            height: 60px;
        }

        .headsearch {
            background-color: #fff;
            padding: 24px 0 10px 0;
        }

        .headsearch h2 a {
            display: block;
            width: 190px;
            height: 58px;
            text-indent: -9999px;
            overflow: hidden;
            margin-top: 8px;
        }

        .headsearch searchbox {
            width: 500px;
            margin: 0 auto;
        }

        .headsearch input {
            margin-top: 100px;
            width: 370px;
            height: 40px;
            box-sizing: border-box;
            border: 2px solid #ff6600;
            border-right: none;
            border-radius: 10px 0 0 10px;
            overflow: hidden;
        }

        .headsearch button {
            margin-top: 100px;
            width: 130px;
            height: 40px;
            font-size: 18px;
            line-height: 40px;
            color: #fff;
            border: none;
            background-image: linear-gradient(to right, #ff9000, #ff6600);
            border-radius: 0 15px 15px 0;
            text-align: center;
        }

        .hotkey a {
            text-decoration: none;
            color: #333;
            font-size: 12px;
            text-align: center;
        }

        .hotkey a:hover {
            color: #ff6600;
        }

        .layer fl {
            width: 190px;
            height: 35px;
            line-height: 35px;
            background-color: #f5f5f5;
        }

        #navv h2 {
            width: 190px;
            height: 35px;
            line-height: 30px;
            font-size: 20px;
            color: #f5f5f5;
            text-align: center;
            background-color: #ff6600;
            border-radius: 10px 10px 0 0;
        }

        #navv ul li a {
            float: left;
            display: block;
            line-height: 30px;
            margin: 0 7px;
            font-size: 20px;
            color: black;
            padding: 0 5px;

            text-decoration: none;
        }

        #navv ul li a:hover {
            color: #ff6600;
        }

        #firstscreen layer {
            width: 890px;
        }

        .sidenav {
            width: 190px;
            height: 480px;
            background-color: #fff;
            border: 1px solid #ff6600;
            box-sizing: border-box;
            border-top: none;
            padding-top: 5px;
        }

        .sidenav li {
            height: 32px;
            line-height: 32px;
            padding-left: 1px;
            color: #999;
            font-size: 15px;
        }

        .sidenav li a {
            font-size: 15px;
            color: #666;
            text-decoration: none;
        }

        .sidenav ul li:hover a {
            color: #ff6600;
        }
        .notice{
            float: right;
            width: 190px;
            height: 35px;
            /* line-height: 30px; */
            font-size: 13px;
            color: #fff ;
            text-align: center;
            background-color: #999;
            border-radius: 10px 10px 0 0;
            text-decoration: none;
        }
    </style>

<!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">
    <title>Document</title>
    </head>
<body>
    <div class="nav">
        <div class="nav_left">
            <div class="fl">
                <ul>
                    <li class="mr">
                        <a href="#">网站导航&nbsp;</a>
                    </li>
                    <li class="mr">
                        <a href="#">商家入驻&nbsp;</a>
                    </li>
                    <li class="mr">
                        <a href="#">客户服务&nbsp;</a>
                    </li>
                    <li>
                        <a href="#">网页无障碍&nbsp;</a>
                    </li>
                    <li>
                        <a href="#">菏泽</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="nav_right">
            <ul class="fr">
                <li class="mr">
                    <a href="#">请登录&nbsp;</a>
                </li>
                <li class="mr">
                    <a href="#">注册有礼&nbsp;</a>
                </li>
                <li class="mr">
                    <a href="#">我的订单&nbsp;</a>
                </li>
                <li class="mr">
                    <a href="#">我的易购&nbsp;</a>
                </li>
                <li>
                    <a href="#">苏宁会员&nbsp;</a>
                </li>
                <li>
                    <a href="#">购物车&nbsp;</a>
                </li>
                <li><a href="#">易付宝&nbsp;</a>
                </li>
                <li><a href="#">企业采购&nbsp;</a>
                </li>
                <li><a href="#">手机苏宁&nbsp;</a>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <h1 class="logo">
            <a><img src="logo.jpg" alt=""></a>
        </h1>
        <div class="headsearch">
            <input type="text" placeholder="输入关键字搜索商品/品牌/商铺">
            <button type="submit">搜索</button>
        </div>
    </div>

    <div class="hotkey">
        <a href="#">手机</a>
        <a href="#">|</a>
        <a href="#">爆款洗衣机</a>
        <a href="#">|</a>
        <a href="#">冰箱</a>
        <a href="#">|</a>
        <a href="#">奶粉特惠购</a>
        <a href="#">|</a>
        <a href="#">品质家具购</a>
        <a href="#">|</a>
        <a href="#">电视</a>
        <a href="#">|</a>
        <a href="#">ipad</a>
        <a href="#">|</a>
        <a href="#">热水器</a>
        <a href="#">|</a>
        <a href="#">沙发</a>
    </div>
    <div id="navv" class="layer">
        <h2 class="f1">分类</h2>
        <ul class="f1">
            <li><a href="#">大聚惠</a> </li>
            <li><a href="#">电器城</a> </li>
            <li><a href="#">手机数码</a> </li>
            <li><a href="#">苏宁超市</a> </li>
            <li><a href="#">家具建材</a> </li>
            <li><a href="#">生活家电</a> </li>
            <li><a href="#">帮客服务</a> </li>
            <li><a href="#">金融</a> </li>
        </ul>
    </div>
         <!-- 公告区 -->
	 <div class="notice">
        <ul class="title">
         <li class="active"><a href="#">公示:协议|规则|证照</a></li>
        </ul>
        </div>
    
    <div id="firstscreen" class="layer">
        <div class="sidenav">
            <ul>
                <li><a href="#">手机</a>/<a href="#">运营商</a></li>
                <li><a href="#">厨卫</a>/<a href="#">生活家电</a>/<a href="#">厨具</a></li>
                <li><a href="#">电脑办公</a>/<a href="#">相机</a></li>
                <li><a href="#">家具</a>/<a href="#">家装</a>/<a href="#">家纺</a>/<a href="#">灯具</a></li>
                <li><a href="#">美妆</a>/<a href="#">个护</a>/<a href="#">清洁</a>/<a href="#">宠物</a></li>
                <li><a href="#">母婴</a>/<a href="#">玩具</a>/<a href="#">车床</a>/<a href="#">童床</a></li>
                <li><a href="#">运动</a>/<a href="#">户外</a>/<a href="#">国米</a>/<a href="#">骑行</a></li>
                <li><a href="#">女装</a>/<a href="#">男装</a>/<a href="#">内衣</a>/<a href="#">鞋靴</a></li>
                <li><a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a>/<a href="#">艺术</a></li>
                <li><a href="#">汽车</a>/<a href="#">电摩</a>/<a href="#">汽车用品</a></li>
                <li><a href="#">图书</a>/<a href="#">艺术</a>/<a href="#">原版</a>/<a href="#">文学</a></li>
                <li><a href="#">医疗健康</a>/<a href="#">计生情趣</a></li>
                <li> <a href="#">理财</a>/<a href="#">分期</a>/<a href="#">便民</a></li>
            </ul>
        </div>
    </div>


   

</body>
</html>

在这里插入图片描述

哼哼蘅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿苏宁易购完整源码+答辩ppt（java+mysql+JavaScript）资源详细说明
qq_44009745的博客
12-18 2384
资源链接：https://download.csdn.net/download/qq_44009745/66124865 编写环境：Linux/windows64 编写的程序：Myeclipse 10 Myeclipse 10 安装包 [Java参考文档].linux 命令手册MYSQL5.1 CHM版中文帮助文档W3School离线手册(2014.3.24) 使用的数据库:MySQL MySQL安装包+安装详细步骤 编写语言：Java+JavaScript+MySQL 资源截图: ...
移动端项目-苏宁易购
weixin_45662026的博客
12-01 339
【代码】移动端项目-苏宁易购。
苏宁易购移动端页面（附源码）
weixin_47627102的博客
10-14 4112
苏宁易购移动端简写首页（附源码） 源码链接：https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码：nbnb 其中有一些属性计算教冗余，建议大家使用vscode然后预装一下Easy LESS，运用less可以大大减少开发时间 以下是效果展示： ...
仿写苏宁易购移动版
m0_49896713的博客
01-10 286
移动web网页开发 仿写苏宁易购 rem 方法的使用 //默认字体是50px 这里是750宽度显示的效果示例图 写死宽度了 15rem //下面所有的width height值 测量出来都转成rem 例如 100px 转化为 100rem/font-common 一般按照最宽的宽度来写和测量 // 页面元素rem计算公式： 页面元素的px / html 字体大小 50 @baseFont: 50; --------------------------------- ...
苏宁易购 源码
03-17
苏宁易购 源码，
苏宁易购 2018 网站源码
04-28
模仿苏宁易购做的java Web项目 模仿苏宁易购做的java Web项目
仿苏宁易购的分类页面
04-04
源码RGCategoryView，闲着没事，仿了个苏宁易购的分类页面,界面、数据都很粗糙，大家可以参考一下吧。
苏宁易购电子商务商城主页面css
11-24
主流网站设计，苏宁易购电子商务商城主页面css布局设计，可以直接使用，代码完全，不是整个网站，只是页面。
苏宁易购网址爬虫爬取商品信息及图片
09-24
运行程序，输入需要爬取的商品名称即可爬取到该商品的所有商品名称价格，商铺名称，以及商品图片等。
苏宁易购网上商城整站HTML5模板
07-22
苏宁易购网上商城整站HTML5模板下载 .................................................................................
苏宁易购网上商城整站HTML静态模板下载
08-07
苏宁易购网上商城整站HTML静态模板,49个页面
仿照苏宁易购的简单网站制作（包含效果图及其代码）
m0_65054943的博客
07-12 1514
苏宁易购简单网页制作
移动端rem布局 案例练习
MartinYP的博客
08-07 291
学习记录博客
实战CSS：苏宁商城静态实现
KaiSarH
12-18 1519
目标: 实现苏宁商城的静态实现 效果: 代码： 项目结构： index.html <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</t...
苏宁易购自适应屏幕移动端
weixin_42583802的博客
05-21 576
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...
期末作业代码网页设计代码——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计
01-03 1458
HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以
rem适配布局制作苏宁移动端首页
qq_49900295的博客
03-25 1228
实现效果： 可以看到随着我们屏幕尺寸的不断变化，我们制作的移动端页面也能有一个自适应的效果，这就是rem适配布局的好处 这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建 1.技术选型 方案：采取单独制作移动页面方案 技术：布局采取rem适配布局（less+rem+媒体查询） 设计图：采用750px设计尺寸 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 关于初始化样式normalize.css文件和案例用到的图片，大家在这个链接拿来就可以用 链接: link. index.
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
python苏宁易购抢购脚本
最新发布
08-25
而使用python苏宁易购抢购脚本，则可以避免这个问题，因为脚本可以在毫秒级别的时间内完成各项操作，大幅提高了用户的购买速度和购买成功率。 当然，用户在使用python苏宁易购抢购脚本时也需要注意一些问题。首先，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值