手机站常用的基本css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




body{ margin:0px; padding:0px; font-size:12px; color:#6B6B6B; font-family:"Microsoft YaHei";}
ul,li,p,form,div{ margin:0px; padding:0px;}
h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; font-weight:100;}
ul,ol,li{ list-style:none;}
a{ color:#6B6B6B; font-size:12px; text-decoration:none; font-family:"Microsoft YaHei";}
a:visited{color:#6B6B6B;}
a:hover{color:#F60;}
img{ border:0px solid #fff;}
.clear{ clear:both;}
.position{ clear:both; width:1200px; margin:0px auto; line-height:30px; text-align:left;}


.br{ height:5px; border:0px solid #fff; line-height:5px; font-size:5px;}
.bigbr{ height:10px; border:0px solid #fff; line-height:10px; font-size:10px;}
.container{ width:1200px; margin:0px auto;}
.right{ float:right;}


.wrap{ width:1250px; margin:0px auto;}
.wrap1200{ width:1200px; margin:0px auto;}
.color_white{ color:#FFF;}
.color_black{ color:#898989;}
.color_red{ color:#ea2833;}


.bold{ font-weight:bold;}


.font-14{ font-size:14px;}
.font-16{ font-size:16px;}
.font-18{ font-size:18px;}
.font-20{ font-size:20px;}
.font-24{ font-size:24px;}
.font-30{ font-size:30px;}
.font-36{ font-size:36px;}


.line18{ line-height:18px;}
.line20{ line-height:20px;}
.line22{ line-height:22px;}
.line25{ line-height:25px;}


手机端上,由于空间有限,我们通常采用另一种实现方式来展示侧边栏的二级菜单,即点击一级菜单后展开二级菜单,再次点击收起二级菜单。下面是一种常用的实现方式: 1. 使用HTML和CSS创建一个侧边栏,包括一级菜单和二级菜单。 2. 使用CSS隐藏二级菜单,即将其 `display` 属性设置为 `none`。 3. 使用JavaScript监听一级菜单的点击事件,当用户点击一级菜单时,切换二级菜单的显示和隐藏状态,即将其 `display` 属性设置为 `block` 或 `none`。 下面是一个基本的HTML和CSS模板,用于展示侧边栏的一级和二级菜单: ```html <div class="sidebar"> <ul> <li> <a href="#">一级菜单 1</a> <ul> <li><a href="#">二级菜单 1-1</a></li> <li><a href="#">二级菜单 1-2</a></li> <li><a href="#">二级菜单 1-3</a></li> </ul> </li> <li> <a href="#">一级菜单 2</a> <ul> <li><a href="#">二级菜单 2-1</a></li> <li><a href="#">二级菜单 2-2</a></li> </ul> </li> </ul> </div> ``` ```css .sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100%; background-color: #fff; z-index: 999; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { margin: 0; } .sidebar a { display: block; padding: 10px; } .sidebar ul ul { display: none; } .sidebar ul li.active > ul { display: block; } ``` 然后,我们使用JavaScript来监听一级菜单的点击事件,实现展开和收起二级菜单的功能: ```javascript const menuItems = document.querySelectorAll('.sidebar li'); menuItems.forEach(item => { const submenu = item.querySelector('ul'); const link = item.querySelector('a'); link.addEventListener('click', (e) => { e.preventDefault(); // 切换当前菜单的 active 状态 item.classList.toggle('active'); // 如果当前菜单有子菜单,则切换子菜单的显示状态 if (submenu) { submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'; } }); }); ``` 以上代码会在页面加载时选择所有侧边栏菜单项,并为每个菜单项绑定一个点击事件,当用户点击菜单项时,切换其 `active` 类的状态,并将其子菜单的 `display` 属性设置为 `block` 或 `none`,实现了侧边栏二级菜单的展示和隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值