中间内容部分
分两个板块,左边内容区和右边英雄区
宽1200高600,距顶部40,距左边188,距底部28,弹性布局
先说右边英雄区,这边就很简单了
上面title是一个区域,然后下面导航是一个区域,下面的英雄图片是一个区域
最后可以实现右上角更多按钮和图片点击跳转,鼠标移入英雄图片显示出英雄名字,鼠标移入导航下方内容跟着切换成相对应的图片 这三个功能
点击跳转就是用a标签,下方内容就是用无序列表ulli,轮播功能就是和5.8核心公告栏一样。
源码直出↓↓
css:
左边内容中心 就稍微复杂一点了
上面title是一个区域,然后下面导航是一个区域,然后再下面的按钮,然后是内容主体
上面的title和下边导航 是和 右边英雄区一模一样的,源码我也放在下边
主要讲一下轮播的逻辑:
1.上面大的导航栏可以控制下方按钮和主体内容的切换
2.按钮可以控制对应内容的切换
一层套一层
css:
这个是轮播代码: 不完整