加粗样式## 效果图
图片素材
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!-- 左侧导航栏 -->
<div class="menu-box"></div>
<!--子菜单-->
<div class="sub-menu hide" id="sub-menu">
<!-- 手机，配件 -->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="">手机</a>
<span class="ml10 mr10">/</span>
<a href="">手机维修</a>
<span class="ml10 mr10">/</span>
<a href="">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">手机配件：</span>
<a href="">手机壳</a>
<span class="ml10 mr10">/</span>
<a href="">手机存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">数据线</a>
<span class="ml10 mr10">/</span>
<a href="">充电器</a>
<span class="ml10 mr10">/</span>
<a href="">电池</a>
</div>
<div class="sub-row">
<span class="bold mr10">运营商：</span>
<a href="">中国联通</a>
<span class="ml10 mr10">/</span>
<a href="">中国移动</a>
<span class="ml10 mr10">/</span>
<a href="">中国电信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备：</span>
<a href="">智能手环</a>
<span class="ml10 mr10">/</span>
<a href="">智能家居</a>
<span class="ml10 mr10">/</span>
<a href="">智能手表</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐：</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">音响</a>
<span class="ml10 mr10">/</span>
<a href="">收音机</a>
<span class="ml10 mr10">/</span>
<a href="">麦克风</a>
</div>
</div>
</div>
<!-- 电脑 -->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">电脑</div>
<div class="sub-row">
<span class="bold mr10">电脑：</span>
<a href="">笔记本</a>
<span class="ml10 mr10">/</span>
<a href="">平板</a>
<span class="ml10 mr10">/</span>
<a href="">一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑配件：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">CPU</a>
<span class="ml10 mr10">/</span>
<a href="">主板</a>
<span class="ml10 mr10">/</span>
<a href="">硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">电源</a>
<span class="ml10 mr10">/</span>
<a href="">显卡</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">游戏设备：</span>
<a href="">游戏机</a>
<span class="ml10 mr10">/</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">游戏软件</a>
</div>
<div class="sub-row">
<span class="bold mr10">网络产品：</span>
<a href="">路由器</a>
<span class="ml10 mr10">/</span>
<a href="">网络机顶盒</a>
<span class="ml10 mr10">/</span>
<a href="">交换机</a>
<span class="ml10 mr10">/</span>
<a href="">存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">网卡</a>
</div>
<div class="sub-row">
<span class="bold mr10">外部产品：</span>
<a href="">鼠标</a>
<span class="ml10 mr10">/</span>
<a href="">键盘</a>
<span class="ml10 mr10">/</span>
<a href="">U盘</a>
<span class="ml10 mr10">/</span>
<a href="">移动硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">鼠标垫</a>
<span class="ml10 mr10">/</span>
<a href="">电脑清洁</a>
</div>
</div>
</div>
<!-- 家用电器 -->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家用电器</div>
<div class="sub-row">
<span class="bold mr10">电视：</span>
<a href="">国产品牌</a>
<span class="ml10 mr10">/</span>
<a href="">韩国品牌</a>
<span class="ml10 mr10">/</span>
<a href="">欧美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空调：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">柜式</a>
<span class="ml10 mr10">/</span>
<a href="">中央</a>
<span class="ml10 mr10">/</span>
<a href="">壁挂式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱：</span>
<a href="">多门</a>
<span class="ml10 mr10">/</span>
<a href="">对开门</a>
<span class="ml10 mr10">/</span>
<a href="">三门</a>
<span class="ml10 mr10">/</span>
<a href="">双门</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣机：</span>
<a href="">滚筒式洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">迷你洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">洗烘一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨房电器：</span>
<a href="">油烟机</a>
<span class="ml10 mr10">/</span>
<a href="">洗碗机</a>
<span class="ml10 mr10">/</span>
<a href="">燃气灶</a>
</div>
</div>
</div>
<!-- 家具 -->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家具</div>
<div class="sub-row">
<span class="bold mr10">家纺：</span>
<a href="">被子</a>
<span class="ml10 mr10">/</span>
<a href="">枕头</a>
<span class="ml10 mr10">/</span>
<a href="">四件套</a>
<span class="ml10 mr10">/</span>
<a href="">床垫</a>
</div>
<div class="sub-row">
<span class="bold mr10">灯具：</span>
<a href="">台灯</a>
<span class="ml10 mr10">/</span>
<a href="">顶灯</a>
<span class="ml10 mr10">/</span>
<a href="">节能灯</a>
<span class="ml10 mr10">/</span>
<a href="">应急灯</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨具：</span>
<a href="">烹饪锅具</a>
<span class="ml10 mr10">/</span>
<a href="">餐具</a>
<span class="ml10 mr10">/</span>
<a href="">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">家装：</span>
<a href="">地毯</a>
<span class="ml10 mr10">/</span>
<a href="">沙发垫套</a>
<span class="ml10 mr10">/</span>
<a href="">装饰字画</a>
<span class="ml10 mr10">/</span>
<a href="">照片墙</a>
<span class="ml10 mr10">/</span>
<a href="">窗帘</a>
</div>
<div class="sub-row">
<span class="bold mr10">生活日用：</span>
<a href="">收纳用品</a>
<span class="ml10 mr10">/</span>
<a href="">浴室用品</a>
<span class="ml10 mr10">/</span>
<a href="">雨伞雨衣</a>
</div>
</div>
</div>
</div>
<!-- 主菜单 -->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i class="icon"></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i class="icon"></i>
</a>
</div>
</div>
<!-- 三张轮播图 -->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<!-- 上一张，下一张按钮 -->
<a href="javascript:void(0)" class="button prev" id="prev"></a>
<a href="javascript:void(0)" class="button next" id="next"></a>
<!-- 圆点导航 -->
<div class="dots" id="dots">
<!-- span在一行显示 -->
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
css
*{
margin:0;
padding:0;
}
/*字体样式*/
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
}
a:link,a:visited{
color:#5e5e5e;
}
body{
font-family:"微软雅黑";
color: #14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}
.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;/*图片隐藏，不显示*/
}
.slide-active{
display:block;/*块状显示，显示图片1*/
}
.slide1{
background-image:url(../img/bg1.jpg);
}
.slide2{
background-image:url(../img/bg2.jpg);
}
.slide3{
background-image:url(../img/bg3.jpg);
}
/*上一张下一张的按钮*/
.button{
position: absolute;
transform:rotate(180deg);
top: 50%;
left: 244px;
height: 80px;
width: 40px;
margin-top:-40px;
background:url(../img/arrow.png) center center no-repeat;
}
.next{
transform:rotate(0deg);
left:auto;
right:0;
}
.button:hover{
background-color:#333;
opacity: 0.8;
filter:alpha(opacity=80);
}
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots span {
/*圆点在一行显示*/
display: inline-block;
width: 12px;
height: 12px;
/*设置为圆形*/
border-radius: 50%;
margin-left: 8px;
/*颜色及透明度0.4*/
background-color: rgba(7, 17, 27, 0.4);
/*手型鼠标*/
cursor: pointer;
/*阴影位置大小颜色，内置阴影*/
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}
/*导航菜单*/
.menu-box {
background:rgba(7, 17, 27, 0.5);
opacity: 0.5;
position: absolute;
left: 0px;
top: 0px;
width: 244px;
height: 460px;
z-index: 1;
}
.menu-content{
position: absolute;
left: 0px;
top: 0px;
width: 244px;
height: 460px;
z-index: 2;
padding-top: 6px;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 12px;
cursor: pointer;
padding: 0 24px;
position: relative;
}
.menu-item a{
display: block;
color: #fff;
padding: 0 8px;
/*下边框*/
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
height: 63px;
font-size:16px;
}
.menu-item:last-child a{
border-bottom:none;
}
.menu-item i{
position: absolute;
right: 32px;
top: 24px;
color: rgba(255,255,255,0.5);
font-size: 24px;
top: 2px;
/*字体不倾斜*/
font-style:normal;
/*字体不加粗*/
font-weight:normal;
/*上面定义的字体名称*/
font-family:"iconfont";
}
.sub-menu {
border:1px solid #d9dde1;
background:#fff;
position: absolute;
left: 244px;
top: 0px;
width: 730px;
height: 458px;
z-index: 581;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}
.hide{
display:none;
}
.inner-box{
width:100%;
height:100%;
background:url(../img/fe.png) no-repeat;
display:none;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
margin-top: 28px;
font-weight: bold;
margin-bottom: 30px;
}
.sub-row{
margin-bottom:25px;
}
.bold{
font-weight:700;
}
.mr10{
margin-right:10px;
}
.ml10{
margin-left:10px;
}
js
// 全局变量
var timer = null,
index = 0,
// getElementsByTagName()：方法返回元素的顺序是它们在文档中的顺序；
pics = byId("banner").getElementsByTagName("div"),
dots = byId("dots").getElementsByTagName("span"),
size = pics.length,
prev = byId("prev"),
next = byId("next"),
menuItems = byId("menu-content").getElementsByTagName("div"),
subMenu = byId("sub-menu"),
subItems = subMenu.getElementsByClassName("inner-box");
// 封装一个代替getElementById的方法
function byId(id){
// 判断一个对象或参数的类型用typeof(），三目运算符，如果是字符串类型，则获取id信息，否则原样返回id
return typeof(id)==="string"?document.getElementById(id):id;
}
// 清除定时器,停止自动播放
function stopAutoPlay(){
if(timer){
// 滑过清除定时器
clearInterval(timer);
}
}
// 图片自动轮播
function startAutoPlay(){
// setInterval定时器，3秒调用一次
timer = setInterval(function(){
// pics的div原素是3个 则只能是0，1，2
// size取出pice的长度
index++;
if(index >= size){
index = 0;
}
// 切换图片的方法调用
changeImg();
},3000)//3秒
}
// 切换图片
function changeImg(){
// 遍历banner下所有的div及dots下所有的span,将div隐藏，将span清除类
for(var i=0,len=dots.length;i<len;i++){
dots[i].className = "";
pics[i].style.display = "none";
}
// 根据index索引找到当前div和当前span，将其显示出来和设为当前
dots[index].className = "active";
pics[index].style.display = "block";
}
function slideImg(){
var main = byId("main");
var banner = byId("banner");
var menuContent = byId("menu-content");
// 滑过清除定时器，离开继续
main.onmouseover = function(){
stopAutoPlay();
}
main.onmouseout = function(){
startAutoPlay();
}
// 在main上触发鼠标离开的事件
main.onmouseout();
// 点击导航切换
for(var i=0,len=dots.length;i<len;i++){
dots[i].id = i;
dots[i].onclick = function(){
index = this.id;
changeImg();
}
}
// 下一张
next.onclick = function(){
index++;
if(index>=size) index=0;
changeImg();
}
// 上一张
prev.onclick = function(){
index--;
// 最后一张-1
if(index<0) index=size-1;
changeImg();
}
// 导航菜单
for(var m=0,mlen=menuItems.length;m<mlen;m++){
menuItems[m].setAttribute("data-index",m);
menuItems[m].onmouseover = function(){
subMenu.className = "sub-menu";
var idx = this.getAttribute("data-index");
for(var j=0,jlen=subItems.length;j<jlen;j++){
subItems[j].style.display = 'none';
menuItems[j].style.background = "none";
}
subItems[idx].style.display = "block";
menuItems[idx].style.background = "rgba(0,0,0,0.1)";
}
}
subMenu.onmouseover = function(){
this.className = "sub-menu";
}
subMenu.onmouseout = function(){
this.className = "sub-menu hide";
}
menuContent.onmouseout = function(){
subMenu.className = "sub-menu hide";
}
}
slideImg();
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
