短视频商城源码,商城左侧菜单栏网页模板
时间:2022-07-27
本文章向大家介绍短视频商城源码,商城左侧菜单栏网页模板,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 1200px;
height:500px;
background-color: green;
margin: 0 auto; /* 居中 */
position: relative; /* 子绝父相 */
}
.rightbox{
width: 1000px;
height: 500px;
background-color: slateblue;
position: absolute;
right: 0;
top:0;
}
.leftbox{
width: 200px;
height: 500px;
background-color: #eee;
}
.leftbox ul{
list-style: none;
}
.leftbox ul li{
height: 30px;
line-height: 30px;
}
.leftbox a{
text-decoration: none;
color: #323232;
}
.leftbox{
color:#323232;
}
.leftbox li p{
width:180px;
height: 30px;
padding-left: 20px;
}
.leftbox li:hover p{
width:180px;
height: 30px;
border: solid 1px blue;
padding-left: 20px;
border-right:0;
position: relative;
z-index: 2; /* 这个也就相当于是权重的意思 */
background-color: #eee;
}
.submenu{
width:998px;
height:498px;
background-color:#eee;
border: solid 1px blue;
position: absolute;
top: 0;
left: 200px;
z-index: 1;
display: none;
}
.leftbox li:hover div.submenu{
display: block; /* 块级元素 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftbox">
<ul>
<li>
<p><a href="">周杰伦</a>/<a href="">昆凌</a> </p>
<div class="submenu"><img src="img/J.jpg"/></div>
</li>
<li>
<p><a href="">电子书</a>/<a href="">网络文学</a></p>
<div class="submenu"><img src="img/p2.png"/></div>
</li>
<li>
<p><a href=""></a>/<a href="">拍卖</a>/<a href="">电子书</a> </p>
<div class="submenu">333</div>
</li>
<li>
<p><a href="">服饰</a>/<a href="">内衣</a> </p>
<div class="submenu">4444</div>
</li>
<li>
<p><a href="">鞋靴</a>/<a href="">箱包</a> </p>
<div class="submenu">5555</div>
</li>
<li>
<p><a href="">运动</a>/<a href="">户外</a> </p>
<div class="submenu">666</div>
</li>
<li>
<p><a href="">孕</a>/<a href="">婴</a>/<a href="">童</a> </p
<div class="submenu">7777</div>
</li>
<li>
<p><a href="">家居</a>/<a href="">家纺</a>/<a href="">汽车</a> </p>
<div class="submenu">8888</div>
</li>
</ul>
</div>
<div class="rightbox"></div>
</div>
</body>
</html>
以上就是 短视频商城源码,商城左侧菜单栏网页模板更多内容欢迎关注之后的文章
- [细节剖析]X Windows中一个22年的漏洞
- android 游戏移植 (二) | SDL2.0适配 西游释厄传
- Android调用系统相册和拍照的Demo
- 黑客是如何通过RDP远程桌面服务进行攻击的
- SDL的几个宽高概念讲解(文中有福利)
- [安全科普]你必须了解的session的本质
- Android中如何动态的实现设置全屏和退出全屏
- Android 双进程Service常驻后台,无惧“一键清理”
- Android之捕获TextView超链接
- 自封装Android软键盘工具类ImeUtil
- XSS挑战第一期Writeup
- 安全公司新星Aorato推出“行为防火墙”
- 倍数提高工作效率的 Android Studio 奇技
- xss如何加载远程js的一些tips
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C# GTS四轴运动控制器实例(固高科技步进电机不带编码器)
- Oracle参数解析(pre_page_sga)
- C#简单爬取数据(.NET使用HTML解析器NSoup和正则两种方式匹配数据)
- [WPF] WPF做的漂亮的登陆界面[附源码]
- C#自定义控件的创建
- Oracle参数解析(processor_group_name)
- [Oracle故障处理]记一次PX msg pool 4031错误的处理
- WPF的布局-Grid(表格布局)
- C# 通过遍历设置控件属性
- C# 软件开机启动
- Java之映射
- C# 武汉肺炎全国疫情实时信息图
- brew报错:`initialize': Version value must be a string; got a NilClass () (TypeError)
- gitlab和gitlab项目迁移
- Qt5+VS2017点击按钮打开新窗口