一号店部分

最新推荐文章于 2024-06-01 14:57:49 发布
最新推荐文章于 2024-06-01 14:57:49 发布
阅读量100 收藏
点赞数 2
文章标签： css html css3 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73367980/article/details/129199905
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="img/logo.png" />
        <title>一号店首页</title>
        <style type="text/css">
            #head {
                width: 100%;
            }

            #head_tip {
                height: 30px;
                background-color: #e7e7e7;
                line-height: 30px;
                padding-left: 40px;
                padding-right: 30px;
            }

            #head_tip a {
                text-decoration: none;
                color: orangered;
            }

            #search {
                border: 2px red solid;
                width: 300px;
                height: 35px;
                display: inline-block;
            }

            #head_content {
                background-image: url("img/loginlogo.jpg");
                background-position: 40px 20px;
                background-repeat: no-repeat;
                padding-left: 350px;
                padding-top: 35px;
                padding-bottom: 20px;
                position: relative;
            }

            #shoppingCar {
                width: 100px;
                height: 30px;
                border: 1px #ccc solid;
                display: inline-block;
                margin-left: 100px;
                text-align: center;
                line-height: 30px;
                position: absolute;
                top: 40px;
            }

            #search input[type=text] {
                width: 70%;
                height: 30px;
                border: 0;
                padding-left: 5px;
            }

            #search input[type=button] {
                width: 26%;
                height: 35px;
                background-color: red;
                border: 0;
                color: white;
            }
            
        </style>
    </head>
    <body>
        <div id="head">
            <div id="head_tip">
                <span>送货至：四川</span>
                <span style="float: right;">
                    你好，请登录！
                    <a href="#">免费注册</a>
                    <span>|我的订单|</span>
                    <span class="text">
                        收藏夹
                        <img src="img/t_arrow.gif" />
                    </span>
                    <span class="text">
                        客户服务
                        <img src="img/t_arrow.gif" />
                    </span>
                    <span class="text">
                        网站导航
                        <img src="img/t_arrow.gif" />
                    </span>
                </span>
            </div>
            <div id="head_content">
                <!-- <img src="img/loginlogo.jpg" id="logoImg"/> -->
                <div id="search">
                    <input type="text" placeholder="搜索" />
                    <input type="button" value="搜索">
                    <p style="line-height: 00px;">咖啡&nbsp;iphone 6s&nbsp;新鲜美食&nbsp;蛋糕&nbsp;日用品&nbsp;连衣裙</p>
                    <!-- // <p style="line-height: 25px;margin: 0;font-size: 12px;">咖啡&nbsp;iphone 6s </p> -->
                </div>
                <div id="shoppingCar">
                    <img src="img/car.png" />
                    购物车
                </div>
            </div>
            
            
            
        </div>
        
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="toubu" href="img/logo.png" />
        <title>一号店首页</title>
        <style type="text/css">
            #head_nav{
                border-bottom: 2px solid orangered;
                height: 40px;
                width: 90%;
                margin: 0 auto;
            }
            #head_nav ul{
                list-style: none;
                margin: 0;
                padding: 0;
                
            }
            #head_nav ul li{
                float: left;
                height: 40px;
                width: 80px;
                text-align: center;
                line-height: 40px;
                
            }
            #head_nav ul li a{
                text-decoration: none;
                font-weight: bold;
            }
            #head_nav ul li:first-child{
                background-color: red;
                width: 20%;
                color: white;
            }
            #head_nav ul li:nth-child(2) a,#head_nav ul li:nth-child(3) a{
                color: red;
            }
                    
            #main{
                width: 90%;
                margin:0 auto;
                
            }
            .content_1{
                border: 1px solid red;
                width: 100%;
                height: 350px;
            }
            .banner_left{
                float: left;
                width: 20%;
                height: 350px;
                background-color: #B01D1D;
            }
            .banner_left ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .banner_left ul li{
                width: 80%;
                height: 40px;
                line-height: 40px;
                padding-left: 40px;
                position: relative;
            }
            .banner_left ul li a{
                text-decoration: none;
                color: white;
            }
            .banner_left ul li img{
                position: absolute;
                top: 15px;
                right: 10px;
            }
            .banner_left ul li:first-child{
                background-image: url("img/nav1.png");
                background-repeat: no-repeat;
                background-position: 10px 12px;
            }
            .banner_left ul li:nth-child(2){
                background-image: url("img/nav2.png");
                background-repeat: no-repeat;
                background-position: 10px 12px;
            }
            .banner_left ul li:nth-child(3){
                background-image: url("img/nav3.png");
                background-repeat: no-repeat;
                background-position: 10px 12px;
            }
            .banner_left ul li:nth-child(4){
                background-image: url("img/nav4.png");
                background-repeat: no-repeat;
                background-position: 10px 12px;
            }
            .banner_left ul li:nth-child(5){
                background-image: url("img/nav5.png");
                background-repeat: no-repeat;
                background-position: 10px 12px;
            }
            .banner{
                float: left;
                width: 60%;
                height: 350px;
                text-align: center;
            }
            .banner_right{
                float: right;
                border: 1px solid yellow;
                width: 18%;
                height: 350px;
            }
            #io{
                width: 87%;
                height: 40px;
                border-bottom: 1px solid #ccc;
                line-height: 40px;
                padding-left: 10px;
                padding-right: 10px;
            }
            .qw{
                font-size: 18px;
                font-weight: 900;
            }
            .we{
                font-size: 12px;
                float: right;
            }
            .zr_3 a{text-decoration: none;
                color: #ccc;
                font-size: 15px;}
            .zr_3 ul{
                height: 10px;
                list-style: none;
                padding-left: 5px;
                /* line-height: 20px; */
            }    
            .qianbao{
                height: 20px;
                padding-left: 10px;
                font-size: 18px;
            }
            .sy img{
                height: 80px;
                width: 240px;
                margin-left: 12px;
                
            }
            .sy p{
                color: #ccc;
                font-size: 15px;
                margin-left: 10px;
                margin-top: 5px;
            }
            .sp{
                height: 60px;
                /* width: 90%; */
            }
            .sp_1{
                height: 50px;
                width:50px
                margin-left: 80px;
            }
            /* .content_2{width: 100%;
            height: 200px;
            border: 1px solid red;
                
            } */
            .section03{
                margin-top: 10px;
                margin-bottom:20px;
                width: 100%;
                height: 220px;
            }
            .section031{
                position: relative;
                display: inline-block;
               height: 100%;
                width: 290px;
                background-color:#d8eefc;
                text-align: center;
                overflow: hidden;
            }
            .section031 span:nth-child(1){
                background-color: red;
                color: #FFFFFF;
            }
            .section031 span:nth-child(2){
                font-size: 12px;
                color: red;
            }
            .section031 div:nth-child(1){
                width: 100%;
                overflow: hidden;
            }
             
             
            .section032{
                position: relative;
                float: right;
                height: 100%;
            }
            .section032>div{
                position: relative;
                display: block;
                height: 100%;
                width: 290px;
                float: left;
                border: 1px solid #eaeaea;
                text-align: center;
            }
            .section032 div:nth-child(1){
                border-right: none;
            }
            .section032 div:nth-child(2){
                border-right: none;
            }
            .section032 div:nth-child(3){
                border-right: none;
            }
            .section032 div div:nth-child(1){
                width: 100%;
                height: 65%;
                overflow: hidden;
            }
            .section032 img{
                margin-top: 5px;
            }
             
            .section032 p{
                line-height: 4px;
            }
            .section032 a{
                color: gray;
                text-decoration: none;
                /* 去除下划线 */
            }
             
            .section0321{
                color: rgba(21, 21, 20, 0.95);
                font-weight: bold;
            }
            .section0322{
                color: gray;
                font-size: 12px;
            }
            .section0323{
                color: red;
                font-size: 20px;
                font-weight: bold;
            }
            .section0324{
                color: gray;
                font-size: 12px;
                font-weight: 400;
            }
            .remen{
                position: absolute;
                /* 绝对定位 */
                left:10px ;
                top: 5px;
            }
            
            
            
            
        </style>
    </head>
    <body>
        <iframe src="toubu.html" width="100%" height="165px" frameborder="0"></iframe>
        <div id="head_nav">
            <ul>
                <li>全部商品分类</li>
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">自营超市</a>
                </li>
                <li>
                    <a href="#">1号团</a>
                </li>
                <li>
                    <a href="#">1号超市</a>
                </li>
            </ul>
            <span style="float: right;"> 惊喜多</span>
        </div>
        
        <div id="main">
            <div class="content_1">
                
                <div class="banner_left">
                    <ul>
                        <li>
                            <a href="#">进口食、生鲜</a>
                            <img src="img/n_arrow.gif"/>
                        </li>
                        
                        <li>
                            <a href="#">进口食品、生鲜</a>
                            <img src="img/n_arrow.gif"/>
                        </li>
                        <li>
                            <a href="#">进口食品、生鲜</a>
                            <img src="img/n_arrow.gif"/>
                        </li>
                        <li>
                            <a href="#">进口食品生鲜</a>
                            <img src="img/n_arrow.gif"/>
                        </li>
                        <li>
                            <a href="#">进口、生鲜</a>
                            <img src="img/n_arrow.gif"/>
                        </li>
                        
                    </ul>
                </div>
                <div class="banner">
                    <img src="img/ban1.jpg" width="98%" height="350px"/>
                </div>
                <div class="banner_right">
                    <div id="io">
                        <span class="qw">快讯</span>
                        <span class="we">更多></span>
                    </div>
                    <div class="zr_3">
                        <ul>
                            <li><span>【特惠】</span><a href="#">菊一轮明月 表无尽惦念</a></li>
                        </ul>
                        <ul>
                            <li><span>【特惠】</span><a href="#">好奇金装成长裤新品上市</a></li>
                        </ul>
                        <ul>
                            <li><span>【特惠】</span><a href="#">大牌闪购 抢！</a></li>
                        </ul>
                        <ul>
                            <li><span>【特惠】</span><a href="#">发福利 买车就抢千元油卡</a></li>
                        </ul>
                        <ul>
                            <li><span>【特惠】</span><a href="#">家电低至五折</a></li>
                        </ul>
                    </div>
                    <div class="qianbao">
                        <span>1号店钱包</span>
                    </div>
                    <div class="sy">
                        <p>收益日结，收益赚High!</p>
                        <img src="img/oneAD.jpg"/>
                    </div>
                </div>
            
            
            </div>
            <div class="section03">
                    <div class="section031">
                      <div><img src="img/l_img.jpg" /></div>
                      <div><span>￥53.00</span>&nbsp;&nbsp;&nbsp;<span>16R</span></div>
                    </div>
                         <div class="section032">
                            <div>
                             <div><a href="#" class="jiantou31"></a><a href="#"><img src="img/hot1.jpg" /></a></div>
                                <div>
                                <a href="#">
                                 <p class="section0321">德国进口</p>
            
                            <p class="section0322">德亚全脂纯牛奶200ml*48盒</p >
            
                                </a>
            
                            <p class="section0323">￥189&nbsp;&nbsp;&nbsp;<span class="section0324">26R</span></p >
            
                            <img src="img/hot.png" class="remen" />
            
                            </div>
            
                        </div>
            
                    <div>
            
            <div><a href=" "><img src="img/hot2.jpg" /></a></div>
            
                <div>
            
                    <a href="#">
            
                    <p class="section0321">iPhone 6S</p >
            
                    <p class="section0322">Apple/苹果 iPhone 6s Plus公开版</p >
            
                    </a>
            
                        <p class="section0323">￥5288&nbsp;&nbsp;&nbsp;<span class="section0324">25R</span></p >
            
                        <img src="img/hot.png" class="remen" />
            
                    </div>
            
            </div>
            
            <div>
            
                <div><a href="#"><img src="img/hot3.jpg" /></a></div>
            
                    <div>
            
                        <a href="#">
            
                        <p class="section0321">倩碧特惠组合套装</p >
            
                            <p class="section0322">倩碧补水组合套装8折促销</p >
            
                        </a>
            
                        <p class="section0323">￥368&nbsp;&nbsp;&nbsp;<span class="section0324">18R</span></p >
            
                        <img src="img/hot.png" class="remen" />
            
                    </div>
            
            </div>
            
            <div>
            
                <div><a href="#" class="jiantou32"></a><a href="#"><img src="img/hot4.jpg" /></a></div>
            
                    <div>
            
                    <a href="#">
            
                    <p class="section0321">品利特级橄榄油</p >
            
                    <p class="section0322">750ml*4瓶装组合 西班牙原装进口</p >
            
                    </a>
            
                    <p class="section0323">￥280&nbsp;&nbsp;&nbsp;<span class="section0324">30R</span></p >
            
                    <img src="img/hot.png" class="remen" />
            
                    </div>
            
                </div>
            
            </div>
            
        </div>
            
                
                
                
                
                
                
                
                
            
    
        
        
        
        
        
        
        
        
        
        
        <div id="foot"></div>
    </body>
</html>
时光会咬人！
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一号店
weixin_43096635的博客
02-03 1153
京东－欢迎登录 .links a{ padding: 0 6px; } .againw p{ float: left; margin-left: 800px; color: #666666; } &lt;/head&gt; &lt;body&gt; &lt;div class="nav"&gt; ...
一号店项目
weixin_43024782的博客
12-03 1509
一号店 主页 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;oneshop&lt;/title&gt; &lt;style&gt; *{ padding: 0px; margin: 0px; }
当当结盟一号店
u013824055的专栏
03-05 1236
3 月 5 日消息，当当网与 1 号店今日在京联合宣布达成战略合作，双方已相互入驻对方开放平台同时开设官方旗舰店，并于今日正式投入运营。当当网在 1 号店的官方旗舰店以销售当当网自营图书品类为主。1 号店在当当网开设旗舰店主要销售 1 号店自营部分具有优势否的食品、饮料等。 高层表态 当当网 CEO 李国庆表示，电商“烧钱”边际作用越来越小，已到“良币驱逐劣币”时候，跨平台的精细运营，降低成本
Python爬取一号店搜索随意商品实战总结
qq_41696843的博客
10-04 882
利用Python随意爬取一号店 今天给大家展示如何用Python来实现搜索并保存数据的过程 思路为以下四个部分： 第一步：获得搜索指定商品url 第二部：获得多个不同商家商品的数据 第三步：解析并获得每个商家数据 第四步：保存这些数据 第一步，我们想要获得搜索的url，就必须找到规律如下所示： 搜索物品为：毛巾 搜索物品为：手机 现在你们有没有发现什么规律？ 如果没发现就继续往下看我分析，如果...
一号店用户画像系统实践
01-10 7396
电子商务是互联网应用中发展期最早且模式最为成熟的商业模式，其用户和业务所带来的数据规模不断扩大，如何从大数据获取更大的价值？如何开发出真正贴合用户实际需求的推荐系统？1月9日，在七牛云主办的架构师实践日——瞩目电商：从架构开发到系统优化专场沙龙，一号店架构师王富平为大家一一解答了这些问题。以下是他的演讲实录。   在开场之前，我想先引用梵高的一句话：“我想强调的是，同一个人有多样的自画
仿一号店APP商品分类效果开发IOS版本
江清清的专栏
01-13 8197
好久没写博客了，一方面这段时间公司的事情项目比较多，另一方面自己也有准备成立自己的个人工作室，所以一直没顾得上去总结写一下技术博客，今天正好有点时间就来一篇吧。        这段时间一直在进行开发商城的APP(Android和IOS)，也研究一下国内绝大多数的电商APP(例如:淘宝,京东,天猫,苏宁易购,顺丰优选等等)，他们的商品分类其实大多数属于常见格调:列表-点击二级列表-具体三级分类列表
Maven项目之一号店——注册与登录
fzt12138的博客
07-14 1281
Maven项目之一号店——注册与登录 声明：该项目为大型项目，所有代码非原创，用于自学以及与网友探讨学习所用，以下文章为自学时整理，请勿用于商业用途。 前端制作为个人私有，仅提供包结构和前端框架作为参考！ 前端所需框架： [外链图片转存失败(img-rlNeVK4W-1563096683837)(C:\Users\Administrator\AppData\Roaming\Typora\typor...
从0到1，一号店通用推荐平台的搭建
CSDN 人工智能
08-17 1239
作者：陈兀，1号店推荐团队架构负责人，2010年硕士毕业，先后就职于阿里巴巴、1号店。在近6年的工作中一直从事系统架构开发工作，目前关注于微服务、Lucene索引、HBase等技术。 责编：钱曙光（qianshg@csdn.net） 本文为《程序员》原创文章，未经允许不得转载，更多精彩文章请订阅2016年《程序员》 一号店精准化推荐部门通过不断探索，逐渐搭建了实时的、高可用的、推...
1号店架构师王富平：一号店用户画像系统实践
博客
02-05 3902
我先引用梵高的一句话：“我想强调的是，同一个人有多样的自画像。与其追求照相般的相似性，不如深入地发掘相似处”。下图是是当时梵高比较得意时的画像，戴了礼帽，穿了西服，但那时耳朵已经割掉了。我觉得作为一个好的架构师，要有艺术家的精神。时至今日架构发生了很多变化，新语言在不断出现，我觉得没必要把思维停留在某一个方面。用户画像的定义用户画像定义使用标签来量化用户特性属性，达到描述用户的目的。用户画像的难点...
仿一号店五个页面部分JQUERY
11-05
一号店学习教材，HTML CSS JS JQUERY 功能的实现，培训机构专用
1号店完整代码_js代码_一号店代码_京东1号店_
09-29
实现购物车，注册账号，修改密码，添加等JS效果，
仿京东，一号店精美多级分类菜单
09-06
仿京东，一号店精美多级分类菜单，超级实用JS代码
1号店html代码
07-01
制作网购网页的HTML部分代码，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，专心学习，...
威购多用户商城管理系统 v2014
10-26
进销存管理系统、促销管理、客户关系管理、vip卡功能、礼品卡功能、抽奖功能、中奖卷支付功能等，优化了大部分功能，使用起来更加方便。2013版我们界面重新设计和改版此界面更加美观大方，后台功能强大，操作的人性...
CSS实现一个雨滴滑落效果
云加速
05-28 1320
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
更改Web网站设计——css和css框架
2301_81968528的博客
06-01 323
如果使用CSS设置背景色，文字颜色，元素配置，即使是相同的HTML文件，在外观上也会产生很大的变化。也可以将CSS的内容写进HTML文件，但是为了保持结构与设计样式，大多数情况下都应该将它们保存在不同的文件中。将它们分开就可以一次性设置多个HTML文件的设计样式。虽然使用css来编写代码可以创建出非常漂亮的设计样式，但是初学者要实现一个格式统一设计是比较困难的。因此，可以使用无须从零开始设计，可以简单利用按钮和表单等设计元素的CSS框架。虽然使用HTML可以定义文章的结构，但是其中不包含设计相关的信息。
随便用css换个渐变的太阳
最新发布
weixin_43811753的博客
06-01 153
【代码】随便用css换个渐变的太阳。
css让padding、border不占据宽度
于忠会的博客
05-29 446
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
一号店购物车js代码
01-03
一号店购物车的js代码是一种用于实现购物车功能的脚本代码。购物车是网上购物平台上常见的功能，它用于存储用户选购的商品信息并进行管理。 一号店购物车的js代码主要包括以下功能： 1. 添加商品：当用户点击...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值