html+css(仿唯品会头部)

最新推荐文章于 2024-05-21 22:11:08 发布
最新推荐文章于 2024-05-21 22:11:08 发布
阅读量6k 收藏 53
点赞数 14
分类专栏： HTML基础 文章标签： HTML css html+css仿唯品会头部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/88862396
版权

在这里插入图片描述
有些用精灵图的地方，自己切图代替。
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="wph.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="top-nav">
                <div class="top">
                    <div class="area">
                        <a href="#">北京市</a>
                       <i></i>
                        
                    </div>
                    <div class="select">
                        <ul>
                            <li class="login">
                                <span class="lg"><a href="#">请登录</a></span>
                                <span><a href="#"> 注册</a></span>
                            </li>                           
                            <li>
                                <span><a href="#">签到有礼</a></span>
                            </li>
                            <li>
                                <span><a href="#">我的订单</a></span>
                            </li>
                            <li class="tm">
                                <span class="xsj"><a href="#">我的特卖</a>
                                    <i></i>
                                </span>
                            </li>
                            <li class="jlb">
                                <span class="xsj"><a href="#">会员俱乐部</a>
                                    <i></i>

                                </span>
                            </li>
                            <li class="kf">
                                <span class="xsj"><a href="#">客户服务</a>
                                    <i></i>
                                </span>
                                
                            </li>
                            <li>
                                <span class="phone">
                                    <img src="images/sj.png" alt="">
                                    <a href="#">手机版</a>
                                </span>
                            </li>
                            <li class="more">
                                <span class="xsj"><a href="#">更多</a>
                                    <i></i>
                                </span>
                              
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="head-search">
                <div class="head-inner">
                    <div class="logo">
                        <div class="img-box">
                            <a href="#"><img src="images/wp.png" alt=""></a>
                        </div>
                    </div>
                    <div class="service">
                         <ul>
                             <li>
                                 <span class="zp">
                                     <img src="images/bfb.png" alt="">
                                 </span>
                                 <a href="#">100%正品</a>
                             </li>
                             <li>
                                <span class="seven">
                                        <img src="images/7t.png" alt="">

                                </span>
                                <a href="#">七天放心退</a>
                            </li>
                            <li>
                                <span xians>
                                        <img src="images/xs.png" alt="">

                                </span>
                                <a href="#">限时抢购</a>
                            </li>
                         </ul>
                    </div>                 
                    
                    <div class="shop-box">
                            <div class="shop-wrap">
                                <a href="#">
                                    <span class="gwd"> <img src="images/gwd.png" alt=""></span>
                                    <span>购物袋</span>
                                    <span class="num">0</span>
                                </a>
                            </div>
                        </div>

                        <div class="search-inner">
                            <div class="input-from">
                                <input type="text">
                                <a class="button" href="#">
                                    <span><img src="images/fdj.png" alt=""></span>
                                </a>
                            </div>
                        </div>
                </div>
            </div>
            <div class="mian-nav">
                <div class="mian">
                    <div class="sps">
                        
                         <a href="#">
                            <img src="images/01.png" alt="">商品分类
                            
                        </a>
                    </div>
                    <ul>
                        <li><a href="#" class="active">首页</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>
                        <li><a href="#">鞋包</a> </li>
                        <li><a href="#">男装</a> </li>
                        <li><a href="#">预告</a> </li>
                        <li><a href="#">更多
                                <i class="vipFont"></i>      
                             </a> 
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;       
}
html,body{
    width: 100%;
    height: 100%;
}
.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper .header{
    width: 100%;
    height: auto;
}
/* top-nav部分 */
.header .top-nav{
    width: 100%;
    height: 28px;
    background-color: #f5f5f5;
}
.header .top-nav .top{
    width: 1000px;
    height: 28px;
    margin: 0 auto;
}
.header .top .area{
   width: 46px;
   padding-left: 15px;
   padding-right: 23px;
   position: relative;
   float: left;
 }
.header .top .area a{
    line-height: 28px;
    font-size: 12px;
    color: #333;
}
.header .top .area i,
.header .top .select  span.xsj i
{
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: #999;
    position: absolute;
    right: 10px;
    top: 11px;   
}
.header .top .select{
    float:right;
}
.header .top .select ul li{
    float: left;
    line-height: 28px;
    padding-right: 20px;
    padding-left: 13px; 
    position: relative;  
}
.header .top .select ul span:hover a{
    color:#fa2a83;
}
.header .top .select ul .tm,
.header .top .select ul .jlb,
.header .top .select ul .kf{
    padding-right: 30px;
}
.header .top .select ul li::after,
.header .top .select .login span.lg::after
{
    content: '/';
    color: #ccc;
    width: 16px;
    height: 16px;
    position: absolute;
    top:1px;
    right: -10px;
}
.header .top .select li a {
    font-size: 12px;
    color: #666;
}
.header .top .select .login span.lg{
    text-align: left;
    margin-right: 25px;
    position: relative;
}
.header .top .select .login span.lg::after
{
    right: -30px;
    top: -2px; 
}
.header .top .select  span.xsj {
    position: relative;
}
.header .top .select span.xsj i{
    right: -12px;
    top: 10px; 
}
.header .top .select li.more::after{
    content: '';
}
.header .top .select span.phone img{
    width: 11px;
    height: 15px;
    vertical-align: middle;
}





/* head-search部分 */
.header .head-search{
    width: 100%;
    height: 120px;
}
.header .head-inner{
    width: 1000px;
    height: 100px;
    padding-top: 20px;
    margin: 0 auto;
}
.header .head-inner .logo{
    width: 140px;
    height: 100px;
    position: relative;
    float: left;
}
.header .head-inner .logo .img-box{
    position: absolute;
    top:0;
    left: -20px;
    width: 160px;
    height: 100px;
}
.header .head-inner .logo .img-box img{
    width: 160px;
    height: 100px;
}
.head-search .search{
    float: left;
    width: 304px;
    height: 100px;
}
.head-search .service{
    float: left;
}
.head-search .service li{
    float: left;
    width: 101px;  
    height: 100px;
}
.head-search .service li a{
    font-size: 12px;
    color: #333;
    line-height: 100px;
    font-weight: 500;
}
.head-search .service li span{
    width: 25px;
    height: 25px;
    display:inline-block; 
    position: relative;
    left: 2px;
    top: 5px;
}
.head-search .service li span img{
    width: 26px;
    height: 25px;
}


.head-search .shop-box{
    width: 96px;
   /* height:32px; */
    margin-top: 33px;
    margin-left:15px;
    float: right;
}
.head-search .shop-box .shop-wrap{
    width: 36px;
    padding-left: 25px;
    padding-right: 33px;
    height: 32px;
    line-height: 32px;
    background-color: #f6f7f9;
    position: relative;
    border:1px solid #ccc;
    border-radius: 2px;
    position: relative;

}
.head-search .shop-box .shop-wrap a{
    font-size: 12px;
    color:#333;
}
.head-search .shop-box .shop-wrap .gwd{
    width: 12px;
    height: 17px;
    position: absolute;
    top: 5px;
    left: 6px;
}
.head-search .shop-box .shop-wrap img{
    width:15px;
    height: 17px;
}
.head-search .shop-box .shop-wrap .num{
    position: absolute;
    top:8px;
    right:3px;
    width: 24px;
    height: 16px;
    background-color: #f00581;
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    color: #fff;

}



.head-search .search-inner{
    width: 389px;
    margin-top:33px;
    float: right;
    position: relative;
}
.head-search  .search-inner .input-from{
    width: 387px;
    height: 32px;
    border: 1px solid #fa2a83;
    border-radius: 2px;
}
.head-search  .search-inner .input-from input {
    width: 311px;
    height: 28px;
    padding: 2px 12px;
    border: none;
    font-size: 14px;
    line-height: 30px;
    color: #333;
    outline: none;

}
.head-search  .search-inner .input-from .button{
    width: 53px;
    height: 26px;
    padding-top: 8px;
    border-radius: 2px;
    text-align: center;
    position: absolute;
    top:0;
    right: 0;
    background-color: #fa2a83;
}
.head-search  .search-inner .input-from .button span img{
    width: 22px;
    height: 22px;
}
/* mian-nav部分 */
.header .mian-nav{
    width: 100%;
    height: 43px;
}
.header .mian-nav .mian{
    width: 1000px;
    height: 43px;
    margin: 0 auto;
}
.header .mian-nav .mian .sps{
    width: 156px;
    height: 43px;
    float: left;
    background-color: #fa2a83;
    margin-right: 20px;
}
.header .mian-nav .mian .sps a{
    display: inline-block;
    width: 136px;
    line-height: 43px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 0 10px;
}
.header .mian-nav .mian .sps a img{
    margin-right: 6px;
    margin-top: -3px;
    vertical-align: middle;
}
.header .mian-nav .mian  ul li{
      float: left;
      padding: 0 10px;
      text-align: center;
}
.header .mian-nav .mian  ul li a{
    line-height: 43px;
    font-size: 16px;
    color: #333;
}
.header .mian-nav .mian  ul li a.active{
    color: #f00581;
    font-weight: 700;
}
.header .mian-nav .mian  ul li .vipFont{
    display: inline-block;
    width: 5px;
    height: 5px;
    position: relative;
    top:-5px;
    border: 1px solid #333;
    border-top:none; 
    border-left: none;
    transform: rotate(45deg);
}
crazy的蓝色梦想
关注
  • 14
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5期末大作业：商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript
qq_365392777
09-27 3525
HTML5期末大作业：商城购物网站设计——仿唯品会商城(5页) 纯手写 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
唯品会导航栏简单制作
青柠小甜味
01-27 2040
weipinhui.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>唯品会</title> <link href="css/weipinhui.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="right"&g
web前端期末大作业 HTML+CSS+JavaScript仿唯品会购物商城网页设计实例 企业网站制作
最新发布
HTML网页设计 专注大学生网页设计
05-21 669
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
仿唯品会网站源码
03-04
仿唯品会网站的代码 可供参考
HTML和CSS仿唯品会首页,ecshop仿唯品会2014全模板带团购品牌特卖
weixin_29322049的博客
06-15 748
ecshop仿唯品会2014全模板带团购品牌特卖，一款简洁时尚的综合通用类模板，特别适用于品牌特卖类电商。整站右侧悬浮式导航特效，头部下拉切换式商品分类树功能。首页多个大幅轮播广告图切换，热销商品功能，自动调用热销商品，外加滚动jQuery特效可以浏览更多商品。商品详细页当前位置面包屑功能，快速的返回上级或上上级页面。团购商品详细页自动调取推荐团购商品功能。购物车页Ajax更新购物车商品数量、总价...
html唯品会页面,index.html
weixin_35143292的博客
06-08 1531
#rblock {position: fixed;width: 36px;height: 100%;top: 0;right: 0;background-color: #262626;}#rblock .list1 {width: 33px;height: 570px;margin-top: 80px;}#rblock .top {margin-top: 120px;}#rblock span {...
html+css唯品会的登录页面
weixin_44209584的博客
05-23 6887
唯品会的登录页面## 唯品会 知识点：html+css 页面效果 链接：https://pan.baidu.com/s/1nSHujdzo3Q3BAjLkQ9WWIQ 提取码：ht19
模仿唯品会设计的静态页面
12-29
使用dreamweaver实现的模仿唯品会实现的纯css+js静态页面。
html+css高仿B站的注册页面
08-07
- **头部元素**：模仿B站注册页面，可能需要包含一个导航栏，这可以由`<header>`标签实现，其中可能包含链接到其他页面的`<a>`标签。 - **主体部分**：注册表单通常包含在一个`<form>`标签内，包括输入字段如`...
html+css+js 仿微信红包
10-19
"html+css+js 仿微信红包"这个项目旨在利用这三种语言的特性，模拟微信红包的发送和接收过程，提供一种类似实际应用的学习和实践场景。 首先，HTML（HyperText Markup Language）是网页内容的基础结构框架，它定义...
唯品会.zip
08-22
仿唯品会做的网站，有14个界面，主要是界面美观，特效多，包含前端页面代码和答辩ppt，对于前端爱好者是很好的学习资源，还包括代码的注释，在Google浏览器能完美运行。
仿唯品会源码
10-15
唯品会网上商城模板+描述高仿+ectouch手机版+微信通2.0+独家专题带数据库，在本地及空间都测试过可用
仿唯品会项目
07-18
练手项目
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
HTML+CSS 仿原神官网源码
06-21
HTML 和 CSS 是构建网页的基本技术，本项目是一个利用这两者实现的原神官网前端页面的复刻版，旨在提供一个学习实践的平台。通过分析这个项目，我们可以深入了解 HTML 结构和 CSS 样式的设计原理。 首先，`index....
CSS实现侧边栏导航
热门推荐
nic's blog
05-09 2万+
CSS实现侧边栏导航

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值