部分属性及其标签设置将在CSS还有JavaScript内进行设置
图片尺寸设置还有最大边框宽高设置基于原图片尺寸设置
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="main" id="main"><!-- 整体菜单盒子 --><div class="menu-box"></div><!-- 子菜单 --><div class="sub-menu hide" id="sub-menu"><!-- 手机配件单列表 这里面的所有列表都包裹在子菜单的div里面--><div class="inner-box"><!-- 定义一个usb的div框架 --><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">/</span><a href="">枕头</a><span class="ml10">/</span><a href="">四件套</a><span class="ml10">/</span><a href="">床垫</a></div><div class="sub-row"><span class="bold mr10">灯具：</span><a href="">台灯</a><span class="ml10">/</span><a href="">顶灯</a><span class="ml10">/</span><a href="">节能灯</a><span class="ml10">/</span><a href="">应急灯</a></div><div class="sub-row"><span class="bold mr10">厨具：</span><a href="">烹饪锅具</a><span class="ml10">/</span><a href="">餐具</a><span class="ml10">/</span><a href="">才搬道具</a></div><div class="sub-row"><span class="bold mr10">假装：</span><a href="">地毯</a><span class="ml10">/</span><a href="">沙发垫套</a><span class="ml10">/</span><a href="">装饰字母</a><span class="ml10">/</span><a href="">图片墙</a><span class="ml10">/</span><a href="">窗帘</a></div><div class="sub-row"><span class="bold mr10">生活日用：</span><a href="">收纳用品</a><span class="ml10">/</span><a href="">浴室用品</a><span class="ml10">/</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 hre="#"><span>家具</span><i class="lcon"></i></a></div></div><!-- 焦点图 --><div class="banner" id="banner"><a href=""><div class="banner-slide slide1 slide-active"></div></a><!--这里在第一个av标签内添加的 sliide-actie属性将会在每次刷新页面时都会显示第一张图的设置--><a href=""><div class="banner-slide slide2"></div></a><a href=""><div class="banner-slide slide3"></div></a></div><!-- 和banner区域同级 箭头部分--><a href="javascript:void(0)" class="button prev" id="prev"></a><!-- href="javascript:void(0)"表示当前没有链接跳转 --><a href="javascript:void(0)" class="button next" id="next"></a><div class="dots" id="dots"><span class="active"></span><!-- 那三个点的部分 --><span></span><span></span></div></div></body><script type="text/javascript" src="javascript.js"></script></html>
若有收获，就点个赞吧
0 人点赞
