美文网首页
京东项目二

京东项目二

作者: 潘肚饿兵哥哥 | 来源:发表于2019-06-01 07:23 被阅读0次

中间部分--布局盒子
一、引入的样式顺序不能乱，因为后面引入的会用到前面的内容
1.初始化文件 normalize.css
2.基本公共样式 base.css

  1. 专属样式 index.css

二、
目录栏不能给ul margin值，只能给li加padding值，给了ul外边距的话，因为外边距不属于ul本身，而内边距属于li本身，所以，给ul外边距的话，外边距的部分鼠标是点不了的，而这一栏是鼠标经过的时候，一整行都要能点，所以，这个必须给li加内边距

image.png 
<div class="grid-col1 fl">
        <ul>
            <li><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></li>
            <li><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></li>
            <li><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></li>
            <li><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></li>
            <li><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></li>
            <li><a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></li>
        </ul>
    </div>

css部分

.grid {
    height: 480px;
}
.grid-col1 {
    width: 190px;
    height: 100%;
    background-color: #6e6568;
    color: #fff;
    font-size: 16px; /*这不是给字的，是给  /  的声明  字是不会变的，要改变字的大小，要在下面另外写*/
}
.grid-col1 a {
    color: #fff;
    font-size: 14px;/*这是给链接文字的声明*/
    margin: 0 3px;
}
.grid-col1 a:hover {
    color: #f10215;
}
.grid-col1 ul {
    padding: 10px 0;
}
.grid-col1 ul li {/*这里不能给ul   margin值，只能给li加padding值，因为给了ul外边距的话，因为外边距不属于ul本身，而内边距属于li本身，所以，给ul外边距的话，外边距的部分鼠标是点不了的，而这一栏是鼠标经过的时候，一整行都要能点，所以，这个必须给li加内边距*/
    padding-left: 12px;
    height: 29px;
    line-height: 26px;
}
.grid-col1 ul li:hover {
    background-color: #9c9698;
}
image.png

中间banner部分

<div class="grid-col2 fl">
        <div class="grid-col2-t">
            <a href="#"><img src="images/banner.jpg" alt=""></a>
<!--      轮播图左右按钮和原点部分开始-->
            <a href="#" class="arrow-l">< </a>
            <a href="#" class="arrow-r">></a>
            <ul class="circle">
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!--      轮播图左右按钮和原点部分结束-->
        </div>
        <div class="grid-col2-b">
            <div><img src="images/l.jpg" ></div>
            <div><img src="images/r.jpg" ></div>
        </div>
    </div>

css部分

/*中间banner部分开始*/
.grid-col2 {
    width: 790px;
    height: 100%;
    margin-left: 10px;
}
.grid-col2-b div {/*图片和盒子的基线对齐，所以下面会有缝隙，两种解决方法，是在base.css文件里加 img {display: block;}或者 img { vertical-align: top}; 顶端对齐，就不会有缝隙了*/
    float: left;
    margin-top: 10px;/*给图片上外边距，把图片挤下去，和底部对齐*/
}
.grid-col2-b div:last-child {
    float: right;
}

/*轮播图箭头部分开始*/
.grid-col2-t {
    position: relative;
}
.arrow-l,
.arrow-r {
    position: absolute;/*有固定、绝对定位和浮动的盒子不需要转换模式*/
    top: 50%;
    width: 30px;
    height: 60px;
    background: rgba(0, 0, 0, .4);
    transform: translateY(-50%);/*往回走自己盒子的一半距离*/
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: rgba(255, 255, 255, .6);
    font-family: arial;
    font-weight: normal;
}
.arrow-r {
    right: 0;
}
.circle {
    width: 167px;
    height: 20px;
    background-color: rgba(255, 255, 255, .4);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    border-radius: 10px;
    padding-left: 8px;
}
.circle li {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    float: left;
    margin: 4px;
    cursor: pointer;/*鼠标经过li的时候变成小手*/
}
.circle .current { /*当前选中项高亮显示 这里如果只写.current因为权重没有上一个选择器高，所以颜色不会显示，要加.circle或者li .current 提高权重*/
    background-color: orange;
}
/*轮播图箭头部分开始*/
/*中间banner部分结束*/
image.png

右侧边栏开始

右侧边栏----登陆部分

 <div class="login">
            <div class="login-t">
                Hi，欢迎来到京东!</br><!--这里要加换行，要不css样式里写的强制一行显示，溢出隐藏，下面的两个a就被隐藏了-->
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#" class="user-info">
                    <img src="images/no_login.jpg" alt="">
                </a>
            </div>
            <div class="login-b">
                <a href="#">新人福利</a>
                <a href="#">PLUS会员</a>
            </div>
        </div>

css部分


.grid-col3 {
    width: 190px;
    height: 100%;
}

/*右侧边栏登陆部分开始*/

.login {
    height: 85px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    padding: 15px;
}
.login-t {
    width: 95px;
    height: 60px;
    line-height: 20px;
    font-size: 12px;
    white-space: nowrap;/*强制一行内显示,这个遇到</br>的话，br后面的文字还是会换行下去，但是br前面的就会强制在一行显示*/
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis;/*超出部分显示省略号*/
    color: #666;
    padding-left: 60px;/*用padding把文字挤到右边去，然后定位把图片订过来*/
    position: relative;
}
.login-t a {
    color: #666;
}
.login-t a:hover {
    color: #f10215;
}
.user-info {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    /*border-radius: 50%;这里给盒子圆角的话，就要写溢出隐藏，如果这个圆角是直接给图片的就不用
    overflow: hidden;*/
    background: url(../images/sprite_userinfo@1x.png) no-repeat -70px 0;
}
.user-info img {
    width: 40px;
    border-radius: 50%;
    margin: 5px;
}
.login-b a {
    display: inline-block;
    width: 70px;
    height: 20px;
    line-height: 20px;
    border:2px solid #f10215;
    margin-right: 3px;
    text-align: center;
    color: #f10215;
}
.login-b a:hover {
    background-color: #f10215;
    color: #fff;
}
image.png

促销公告模块

 <div class="news">
            <div class="news-t">
                <a href="#" class="cuxiao">促销</a>
                <a href="#" class="gg">公告</a>
                <a href="#" class="more">更多</a>
                <div></div>
            </div>
            <div class="news-b">
                <ul>
                    <li><a href="#">挑战3天不洗头</a></li>
                    <li><a href="#">挑战3天不洗头</a></li>
                    <li><a href="#">益生菌领券满399减100</a></li>
                    <li><a href="#">益生菌领券满399减100</a></li>
                </ul>
            </div>
        </div>

css部分

.news {
    height: 155px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    padding: 7px 13px 0;
    box-sizing: border-box;
}
.news-t {
    height: 19px;
    border-bottom: 1px solid #ccc;
    position: relative;
}
.news-t a {
    float: left;
    height: 17px;
    line-height: 17px;
}
.cuxiao {
    width: 38px;
    border-right: 1px solid #ccc;
}
.gg {
    margin-left: 15px;
}
.news-t .more {/*.news-t 权重比他高，所以要加.news-t才能提高权重*/
    float: right;
}
.news-t div {
    width: 28px;
    height: 2px;
    background-color: #f10215;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.news-b {
    padding-top: 15px;
}
.news-b li {
    height: 23px;
    line-height: 23px;
}
image.png

右侧扩展服务栏

<div class="expand">
            <ul>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i></i>
                        <span>话费</span>
                    </a>
                </li>
            </ul>

css部分

.expand {
    height: 209px;
    background-color: #fff;
    overflow: hidden;/*这个宽度继承了父级190px宽，所以，超出去的部分加了溢出隐藏的话，正好右边和下面多出去的部分都隐藏掉了，就和JD的一模一样了*/
}
.expand ul {  /*父级是190，子级超过了190装不下4个li 所以让他大一点，能够装下四个格子，就整好了，然后给.expand溢出隐藏就可以了*/
    width: 195px;
}
.expand li {
    width: 47px;
    height: 69px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left;
}
.expand li a {
    display: block;
    padding-top: 15px; /*这里内容是要点的，所以用padding，如果用了margin，多出去的margin部分就点不到了*/
    text-align: center;
}
.expand li i {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    background: url(../images/sprite_fs@1x.png) no-repeat;
    /*下面这三行是做个样式看看，12个li都需要分别用伪类选择器去选择*/
    width: 18px;
    height: 23px;
    background-position: -5px -88px;
}
.expand li:first-child i {
    width: 18px;
    height: 23px;
    background-position: -5px -88px;
}
image.png

相关文章

  • 京东项目二

    中间部分--布局盒子一、引入的样式顺序不能乱，因为后面引入的会用到前面的内容1.初始化文件 normalize....

  • 京东网站项目

    1）做小箭头的html 2）css的表示1，把i当做一个小的盒子当菱形超出盒子时隐藏超出部分（overflow）2...

  • 京东项目原理

    不需要买多余软件 也没有太过复杂的操作 我们负责技术技术更新和渠道支持 你负责当客服做售后、按要求运营好自己的店铺...

  • 京东项目一

    header部分： 快速导航栏部分： logo部分 css部分 h1要清除外边距 搜索框部分 清除样式： 或者：照...

  • 京东项目案例

    CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化) 要实现结构和样式相分离的设计思想。...

  • 简谈京东店群

    京东店群项目是什么？ 京东店群的运营模式是什么？ 京东店群项目是什么？ 就先拿淘宝来说，淘宝店铺是开很多店，在一家...

  • 项目经理和产品经理的区别是什么？

    在京东，产品经理和项目经理分工明确，那我以京东为例，介绍下两个岗位的区别。 在京东产品经理跟项目经理，两个角色分工...

  • 京东无货源店群项目开店教程京东无货源店群模式玩法

    京东无货源店群项目开店教程京东无货源店群模式玩法 京东无货源店群好做吗？京东店群难不难？ 实际上，京东无货源模式还...

  • 重磅|京东来杭州“抄”阿里“后院”？

    导读 8月18日，京东集团在杭州启动“京东优选·浙江星品牌”项目，该项目得到了浙江省有关部门的大力支持，该项目首期...

  • 京东 | 导师制在管理培训生项目中的应用案例分享-10.11培训

    ❖ 京东管培生项目背景： 京东的管培生项目已开展7 年，从组织和人员发展的需求考虑，京东对管培生的培养周期为三年半...

网友评论

      本文标题：京东项目二

      本文链接：https://www.haomeiwen.com/subject/kzsntctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|京东项目二|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！