HTML5_京东首页（主体部分）

最新推荐文章于 2024-05-05 14:51:03 发布

在线答疑技术支持

最新推荐文章于 2024-05-05 14:51:03 发布

阅读量1.7k

点赞数 1

分类专栏：善知教育笔记文章标签： html5

本文链接：https://blog.csdn.net/itszt888/article/details/76577171

版权

善知教育笔记专栏收录该内容

165 篇文章 1 订阅

订阅专栏

/*页面主体部分样式*/
#life_word header{
    height:30px;
    line-height:30px;
}
#life_word header h3{
    font-family:"宋体";
    display:inline-block;
}
#life_word header i{
    color:#aaa;
    font-size:12px;
}
#life_word section{
    overflow:hidden;
}
#life_word section>ul>li{
    width:297.75px;
    float:left;
    height:190px;
    margin-right:5px;
}


/*生活橱窗样式*/
#life_word section>ul>li{
    background:#f00;

}
/*第一个小广告*/
#life_word section>ul>li:nth-child(1){
    background: url(../images/index/show_01.jpg) no-repeat;
    transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(1):hover{
    background: url(../images/index/show_01.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(1)>div{
    width:109px;
    height:150px;
    background:rgba(255,255,255,0.6);
    /*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
    padding:20px 20px;


}    
#life_word section>ul>li:nth-child(1)>div ul{
    margin-top:15px;
}
#life_word section>ul>li:nth-child(1)>div p{
    color:red;
}
#life_word section>ul>li:nth-child(1)>div ul i{
    display:inline-block;
    width:0px;
    height:0px;
    border:1.5px solid #666;
    vertical-align:middle;
}

/*第二个小广告*/
#life_word section>ul>li:nth-child(2){
    background: url(../images/index/show_02.jpg) no-repeat;
    transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(2):hover{
    background: url(../images/index/show_02.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(2)>div{
    width:109px;
    height:150px;
    background:rgba(255,255,255,0.6);
    /*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
    padding:20px 20px;


}    
#life_word section>ul>li:nth-child(2)>div ul{
    margin-top:15px;
}
#life_word section>ul>li:nth-child(2)>div p{
    color:#fff;
    background:red;

    float:left;
}
#life_word section>ul>li:nth-child(2)>div ul i{
    display:inline-block;
    width:0px;
    height:0px;
    border:1.5px solid #666;
    vertical-align:middle;
}
/*第三个小广告*/

#life_word section>ul>li:nth-child(3){
    background: url(../images/index/show_03.jpg) no-repeat;
    transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(3):hover{
    background: url(../images/index/show_03.jpg) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(3)>div{
    width:109px;
    height:150px;
    background:rgba(255,255,255,0.6);
    /*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
    padding:20px 20px;


}    
#life_word section>ul>li:nth-child(3)>div ul{
    margin-top:15px;
}
#life_word section>ul>li:nth-child(3)>div p{
    color:red;



}
#life_word section>ul>li:nth-child(3)>div ul i{
    display:inline-block;
    width:0px;
    height:0px;
    border:1.5px solid #666;
    vertical-align:middle;
}

/*第四个小广告*/
#life_word section>ul>li:nth-child(4){
    background: url(../images/index/show_04.png) no-repeat;
    transition:background 0.5s linear;
}
#life_word section>ul>li:nth-child(4):hover{
    background: url(../images/index/show_04.png) no-repeat -7px 0px;
}
#life_word section>ul>li:nth-child(4)>div{
    width:109px;
    height:150px;
    background:rgba(255,255,255,0.6);
    /*opacity:0.2;*/                        /*透明度 会影响其中内容的颜色*/
    padding:20px 20px;


}    
#life_word section>ul>li:nth-child(4)>div b{
    color:red;
    font-size:2em;
    font-weight:400;
}
#life_word section>ul>li:nth-child(4)>div ul{
    margin-top:15px;
}
#life_word section>ul>li:nth-child(4)>div p{
    color:red;



}
#life_word section>ul>li:nth-child(4)>div ul i{
    display:inline-block;
    width:0px;
    height:0px;
    border:1.5px solid #666;
    vertical-align:middle;
}



/*三个小广告部分样式*/
#advert{                        /*这个自己下去考虑 什么办法都行 */
    text-align:center;
}

/*一楼样式*/
#f1    header{
    overflow:hidden;
}
#f1    header>p,#f1 header>h3,#f1 header>ul,#f1 header>div{
    float:left;
}
#f1 header>ul>li{
    float:left;
}
#f1    header>p{
    width:30px;
    height:35px;
    background:url(../images/index/index_iconlist_01.png) no-repeat 2px 0px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    text-align:center;
    line-height:30px;
    font-family:"宋体";
    border-bottom:2px solid #999;
}
#f1    header>p:hover{
    background:url(../images/index/index_iconlist_01.png) no-repeat -38px 0px;
}
#f1    header>h3{                /*1211-209-788.3-30*/
    line-height:35px;
    border-bottom:2px solid #999;
    width:184px;
    text-align:center;
}
#f1    header>ul{
    width:788px;
    height:35px;
}
#f1    header>ul li{
    width:157.6px;
    line-height:35px;
    text-align:center;
    border-bottom:2px solid #999;
}
#f1    header>ul li:hover{
    border-bottom:2px solid #e4393c;
    background:url(../images/index/tab_arraw.png) no-repeat bottom center;
}

#f1    header div{
    width:209px;
    border-bottom:2px solid #999;
    height:35px;
    line-height:35px;
    text-align:right;

}
#f1    header div a{
    color:#0058bb;
}

关于善知教育（官网：善知教育（点击进入）微信公众号：善知技术）
地址：北京东燕郊经济技术开发区文化大厦
咨询老师郑老师电话/微信：13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器，有全日制班有周末班;
学费优惠至8480!!!!
我们的优势：

基础课程一个月免费学,全程面授;
平均就业薪资10000-15000;
免费重听，跨学科免费学习;
5-5.5个月大容量技术授课;
0学费0基础入学，海量项目实训, 弹性教学制度;
大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
课程全程视频录制,偶尔耽搁也不担心;
学习途中随时可以无理由退费根据学生情况;
灵活安排授课时间，一个科目学不会可以免费学习另一个科目;
全日制班，周末班，网上授课同时进行;
技术交流QQ群：198983438（加群请备注在哪里看到我们的群）在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

善知教育石老师Java视频的网盘地址 http://pan.baidu.com/s/1eQ0JHi6
善知教育吕老师Java视频http://pan.baidu.com/s/1i44RTjR
善知教育武老师Html5视频http://pan.baidu.com/s/1hsGGKnE
善知教育石老师Android知识点http://pan.baidu.com/s/1hsBpOQo

在线答疑技术支持

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5_京东首页（主体部分）

/*页面主体部分样式*/#life_word header{ height:30px; line-height:30px;}#life_word header h3{ font-family:"宋体"; display:inline-block;}#life_word header i{ color:#aaa; font-size:12px;
复制链接

扫一扫