首页 > 其他分享 >前端006开发网站首页

前端006开发网站首页

时间：2022-11-18 13:11:29浏览次数：46  
标签：solid 前端 1px black 006 火龙果 border top 首页 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <style>
        .c1{
            width: 980px;
            background-color: #9a9a9a;
            margin:1px auto;/* 版面在显示屏的当中*/
        }
        .c2{
            margin-right: 10px;
        }
        .c3{
            text-align: center;
            line-height: 100%;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div style="float: left">收藏本站</div>
        <div style="float: right">
            <a class="c2">登录</a>
            <a class="c2">注册</a>
            <a class="c2">我的订单</a>
        </div>
        <div style="clear: both"></div><!-- 防止下面的标签往上挪-->
    </div>

    <div class="c1" style="height: 100px">
        <div style="height: 100px;width: 100px;float: left;margin-left: 60px;">
            <img style="height: 90px;width: 90px;margin-top: 5px;"  src="4.gif">
        </div>
        <div style="height: 100px;width: 300px;float: left;margin-left: 180px;line-height: 100px">
            <input style="height: 40px" type="text" placeholder="请输入你要搜索的内容"/>
            <input style="height: 40px" type="button" value="搜索"/>
        </div>
        <div style="height: 100px;width: 100px;float: right;margin-right: 20px;line-height: 100px">
            <div>购物车</div>
        </div>

    </div>

    <div class="c1" >
        <div style="width: 25%;float: left">
            <div  style="width: 100%;height: 60px;background-color: #e75e15;line-height: 60px" class="c3">全部商品分类</div>
            <div  style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">南方水果</div>
            <div  style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">北方水果</div>
            <div  style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">东方水果</div>
            <div  style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">西方水果</div>
        </div>

        <div style="width: 75%;float: right;">
            <div  style="width: 100%;height: 60px;background-color: #e75e15;line-height: 60px;" class="c3">
                <div style="width: 10%;float: left">首页</div>
                <div style="width: 10%;float: left">网上超市</div>
                <div style="width: 10%;float: left">水果超市</div>
                <div style="width: 10%;float: left">划算套餐</div>
                <div style="width: 10%;float: left">生活娱乐</div>
                <div style="width: 10%;float: right">研究院</div>
                <div style="width: 10%;float: right">论坛</div>
            </div>
            <div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1 c3">
                福特&nbsp;&gt;蒙迪欧&nbsp;&gt;2.0T
            </div>
            <div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
                <label style="font-weight: bolder;padding-left:20px;">您已选择：</label>
                <label style="display: inline-block;width: 80px">苹果</label>
                <label style="display: inline-block;width: 80px">苹果</label>
            </div>
            <div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
                <label style="font-weight: bolder;padding-left:60px">材质：</label><label>苹果</label>
            </div>
            <div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
                <label style="font-weight: bolder;padding-left:60px">品牌：</label><label>苹果</label>
            </div>
            <div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
                <label style="font-weight: bolder;padding-left:60px">风格：</label><label>苹果</label>
            </div>
            <div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
                <label style="font-weight: bolder;padding-left:20px;">排序：</label>
                <label style="display: inline-block;width: 80px">价格</label>
                <label style="display: inline-block;width: 80px">销量</label>
                <label style="display: inline-block;width: 80px">最新</label>
            </div>
            <div style="width: 100%;margin: 1px auto">
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>
                <div style="width: 25%;height: 200px;float: left;">
                    <div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
                    <div style="width: 100%;height: 20px;" class="c3">火龙果</div>
                    <div style="width: 100%;height: 30px;" class="c3">
                        <div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
                        <div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
                            <div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
                            border-top: 1px solid black;border-bottom: 1px solid black;">
                                1
                            </div>
                            <div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
                        </div>
                        <div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
                    </div>
                </div>



            </div>

        </div>
    </div>

</body>
</html>

标签：solid,前端,1px,black,006,火龙果,border,top,首页
From： https://www.cnblogs.com/lfyxys/p/16902870.html

相关文章

  • 前端数字转换成万亿
    unitNumber(num){if(num==0){return0}if(!num||isNaN(num)){ret......
  • vue前端开发仿钉图系列（1）高德地图的使用详解
    最近公司让参考钉图做图层模块相关的功能，很庆幸有机会细细研究地图相关的东西。因为手机端用的是高德地图，web端也使用高德地图。还是和往常一样，先贴上效果图。 ......
  • 前端一面经典react面试题（边面边更）
    react的虚拟dom是怎么实现的首先说说为什么要使用VirturlDOM，因为操作真实DOM的耗费的性能代价太高，所以react内部使用js实现了一套dom结构，在每次操作在和真实dom之前，使......
  • 前端003
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>ul标签等</title></head><bodystyle="margin-left:20%"><div>16-ul标签(没......
  • 前端005
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>css样式</title><style></style><!--<linkrel="stylesheet"href="css_model.css"......
  • 前端004
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>label标签等</title></head><bodystyle="margin-left:20%"><div>20-label:用......
  • 前端路由的原理
    1、window.onhashchange（监听URLhash）：当一个窗口的hash（URL中#后面的部分）的改变时就会触发hashchange事件。2、在hashchange 事件中匹配URL，存在则加载对应的DOM元......
  • [笔记]前端路由的两种模式
    参考资料：https://juejin.cn/post/7127143415879303204#heading-11https://blog.csdn.net/qq_28641023/article/details/120328826理解单页面应用单页面应用是指我......
  • Go1.20 中两个关于 Time 的更新，终于不用背 2006-01-02 15:04:05 了！
    大家好，我是煎鱼。Go语言中有一个东西是比较有特色的，那就是time标准库，在各类与时间有关的场景都会常常用到，例如：定时/延迟任务、数据更新、时间比较。官方Demo是一个......
  • 转 ORA-00600 [4194] 处理
    https://blog.csdn.net/renyanjie123/article/details/111239302ORA-00600[4194]处理 订阅专栏在某客户现场遇到一个看着很唬人的报错ORA600,遇到此报错很多人心......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99