利用css3实现后台管理面板



8 29 10



特效描述:利用css3实现 后台 管理面板,利用css3实现后台管理面板

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />

2. 引入JS

<script type="text/javascript" charset="UTF-8" src="js/prefixfree.min.js"></script>

3. HTML代码

	<div class="page">
		<section class="demo">
			<div class="admin-panel clearfix">
				<div class="slidebar">
					<div class="logo">
						<a href=""></a>
					</div>
					<ul>
						<li><a href="#dashboard" id="targeted">dashboard</a></li>
						<li><a href="#posts">posts</a></li>
						<li><a href="#media">media</a></li>
						<li><a href="#pages">pages</a></li>
						<li><a href="#links">links</a></li>
						<li><a href="#comments">comments</a></li>
						<li><a href="#widgets">widgets</a></li>
						<li><a href="#plugins">plugins</a></li>
						<li><a href="#users">users</a></li>
						<li><a href="#tools">tools</a></li>
						<li><a href="#settings">settings</a></li>
					</ul>
				</div>
				<div class="main">
					<ul class="topbar clearfix">
						<li><a href="#">q</a></li>
						<li><a href="#">p</a></li>
						<li><a href="#">o</a></li>
						<li><a href="#">f</a></li>
						<li><a href="#">n</a></li>
					</ul>
					<div class="mainContent clearfix">
						<div id="dashboard">
							<h2 class="header"><span class="icon"></span>Dashboard</h2>
							<div class="monitor">
								<h4>Right Now</h4>
								<div class="clearfix">
									<ul class="content">
										<li>content</li>
										<li class="posts"><span class="count">179</span><a href="">posts</a></li>
										<li class="pages"><span class="count">13</span><a href="">pages</a></li>
										<li class="categories"><span class="count">21</span><a href="">categories</a></li>
										<li class="tags"><span class="count">305</span><a href="">tags</a></li>
									</ul>
									<ul class="discussions">
										<li>discussions</li>
										<li class="comments"><span class="count">353</span><a href="">comments</a></li>
										<li class="approved"><span class="count">319</span><a href="">approved</a></li>
										<li class="pending"><span class="count">0</span><a href="">pending</a></li>
										<li class="spam"><span class="count">34</span><a href="">spam</a></li>
									</ul>
								</div>
								<p>Theme <a href="">Twenty Eleven</a> with <a href="">3 widgets</a></p>
							</div>
							<div class="quick-press">
								<h4>Quick Press</h4>
								<form action="" method="post">
									<input type="text" name="title" placeholder="Title"/>
									<input type="text" name="content" placeholder="Content"/>
									<input type="text" name="tags" placeholder="Tags"/>
									<button type="button" class="save">l</button>
									<button type="button" class="delet">m</button>
									<button type="submit" class="submit" name="submit">Publish</button>
								</form>
							</div>
						</div>
						<div id="posts">
							<h2 class="header">posts</h2>
						</div>
						<div id="media">
							<h2 class="header">media</h2>
						</div>
						<div id="pages">
							<h2 class="header">pages</h2>
						</div>
						<div id="links">
							<h2 class="header">links</h2>
						</div>
						<div id="comments">
							<h2 class="header">comments</h2>
						</div>
						<div id="widgets">
							<h2 class="header">widgets</h2>
						</div>
						<div id="plugins">
							<h2 class="header">plugins</h2>
						</div>
						<div id="users">
							<h2 class="header">users</h2>
						</div>
						<div id="tools">
							<h2 class="header">tools</h2>
						</div>
						<div id="settings">
							<h2 class="header">settings</h2>
						</div>
					</div>
					<ul class="statusbar">
						<li><a href=""></a></li>
						<li><a href=""></a></li>
						<li class="profiles-setting"><a href="">s</a></li>
						<li class="logout"><a href="">k</a></li>
					</ul>
				</div>
			</div>
			<script type="text/javascript">
				(function() {
					var initTarget = document.getElementById("targeted");
					initTarget.click();
				})();
			</script>
		</section>
	</div>
<div style="text-align:center;clear:both">
</div>	



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 导航切换 菜单切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到