5.8王者荣耀官网核心的前两部分

核心 section 

主要分三块内容，轮播图，公告栏，右边三个图片

id="core"，先background-image插入背景图片，定位它的高度background-position: 0px 550px; ，背景图片不重复，宽1200px（和前面同步），距左边150px，距顶部200px，

轮播图

// 可以先写下面的导航先放一张图片，鼠标滑动对应内容切换相应的图片，for循环

分为两个部分，上面的图片区和下面的标题区

id="banner" class="slideBox"，宽605px，高340px，左浮动

图片区images：图片存放在无序列表当中，五个图片五个li

宽605px，高300px，

ul class=bd：列表风格取消掉

标题区title hd：同样也是无序列表ulli，第一个li默认开头class=on

宽605px，高40px，背景色黑色，距左边40px，距顶部-17px

ul：宽605px，高40px，弹性布局，距左边-40px

li：去掉列表风格，文字居中对齐，字体颜色灰色，平分宽度flex: 1; ，行高40px

默认开头.on：背景颜色#414046，字体颜色#F3C258，

（写css时.on要和前面li连着）

引入插件jquery.SuperSlide.2.1.js，实现轮播效果

先获取slideBox，然后调用函数，实现自动播放和向左边滚动

$(".slideBox").slide(function(){

        // 自动播放

        autoplay:true;

        // 向左边滚动

        effect:"leftLoop";

    });

注意： hd、bd

hd是由谁来控制切换

bd是切换内容的主体

公告栏， tab卡切换，点击上面切换对应内容

class="infos slideTextBox"

宽360高340，背景颜色rgba(0, 0, 0,.7)，左浮动，距左边38px，距顶部16px

两个部分，标题和内容

标题：无序列表

class="titles hd"，宽360高50

ul：弹性布局，字体颜色灰色

li：去掉列表风格，文字居中对齐，平分宽度flex: 1; ，行高40px，距坐边-25px，底部给条线

内容：无序列表，ulli嵌套ulli，一个li对应一个板块

class="list"，宽360高290

ul：字体颜色灰色

li：去掉列表风格，距左边-20px，文字居左对齐，溢出隐藏overflow: hidden; ，超出部分用小数点代替text-overflow: ellipsis; ，不自动换行white-space: nowrap; ，行高30px，

title：宽280高30，字体大小20，字体颜色#F3C258，背景颜色#414046

然后设置内容的小图标：字体大小12，行高20，转化为块级元素，设置边框宽度border-width: 1px; ，实线border-style: solid; ，边框圆角度数border-radius: 5px; ，距顶部内边距3，距右边5，文字居左，

给热门新闻小图标画不同颜色的框，并更改字体颜色

js部分：先获取slideTextBox，然后调用函数，实现向左边滚动

$(".slideTextBox").slide(function(){

        // 向左边滚动

        effect:"leftLoop";

});

布局应该有问题，后面再改吧