网页设计-后台页面
网页设计-后台页面
懒人科 发表于4年前
网页设计-后台页面
  • 发表于 4年前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 简洁的后台界面,简单的JQ特效,PS处理的图片。

之前实习做的一个后台页面,现在美化了一下。

页面非常简洁,很多东西都放在CSS里面。

页面代码

<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="top">
    <div id="t2" title="退出"><p><a href="#"></a></p></div>
    <div id="t1" title="首页"><P><a href="#"></a></P></div>
</div>
<div class="content">
  <div id="cont1"><p><a href="http://www.baidu.com"></a></p></div>
  <div id="cont2"><p><a href="#"></a></p></div>
  <div id="cont3"><p><a href="#"></a></p></div>
  <div id="cont4"><p><a href="#"></a></p></div>
  <div id="cont5"><p><a href="#"></a></p></div>
  <div id="cont6"><p><a href="#"></a></p></div>
  <div id="cont7"><p><a href="#"></a></p></div>
  <div id="cont8"><p><a href="#"></a></p></div>
  <div id="cont9"><p><a href="#"></a></p></div>
  <div id="cont10"><p><a href="#"></a></p></div>
</div>
<div class="footer">
  
</div>
</body>
</html>

CSS代码

*{
    margin: 0px;
    padding: 0px;
    height: 100%;
}
body {
    background-color: #ddd;
}
/*top内的CSS*/
.top {
    width: 100%;
    height: 35px;
}
.top div {
    float: right;
    width:30px;
    height: 30px;
    padding-right: 10px;
}
.top p {
    position: relative;
    top:5px;
}
.top a {
    width: 30px;
    height: 30px;
    display: block;
}
.top #t1 p{
    background: url("../img/home.png") no-repeat;
}
.top #t2 p{
    background: url("../img/Outbox.png") no-repeat;
}
/*content内的CSS*/
.content {
    margin: auto;
    position: relative;
    width: 960px;
    height: 400px;
}
.content div {
    width: 128px;
    height: 128px;
    float: left;
    padding: 30px;
}
.content a {
    width: 128px;
    height: 128px;
    display: block;
}
.content #cont1 p{
    background: url("../img/users.png") no-repeat;
}
.content #cont2 p{
    background: url("../img/User.png") no-repeat;
}
.content #cont3 p{
    background: url("../img/New.png") no-repeat;
}
.content #cont4 p{
    background: url("../img/Flag.png") no-repeat;
}
.content #cont5 p{
    background: url("../img/Edit.png") no-repeat;
}
.content #cont6 p{
    background: url("../img/SiteMap.png") no-repeat;
}
.content #cont7 p{
    background: url("../img/Bank.png") no-repeat;
}
.content #cont8 p{
    background: url("../img/key.png") no-repeat;
}
.content #cont9 p{
    background: url("../img/bell.png") no-repeat;
}
.content #cont10 p{
    background: url("../img/Database.png") no-repeat;
}
#cont1 p.hover {
    background: url("../img/users2.png") no-repeat; 
}
#cont2 p.hover {
    background: url("../img/User2.png") no-repeat; 
}
#cont3 p.hover {
    background: url("../img/New2.png") no-repeat; 
}
#cont4 p.hover {
    background: url("../img/Flag2.png") no-repeat; 
}
#cont5 p.hover {
    background: url("../img/Edit2.png") no-repeat; 
}
#cont6 p.hover {
    background: url("../img/SiteMap2.png") no-repeat; 
}
#cont7 p.hover {
    background: url("../img/Bank2.png") no-repeat; 
}
#cont8 p.hover {
    background: url("../img/key2.png") no-repeat; 
}
#cont9 p.hover {
    background: url("../img/bell2.png") no-repeat; 
}
#cont10 p.hover {
    background: url("../img/Database2.png") no-repeat; 
}
/*footer内的CSS*/
.footer {
    height: 198px;
    border: 1px solid ;
    background: url("img/footer_bg.png") solid repeat;
}

个人的编码习惯吧,东西都写在CSS里面。

有用到JQ,非常简单的JQ特效hover。

$('#cont1 p').hover(function(){
        
        $(this).addClass('hover')
            }
            
            ,function(){
                
                $(this).removeClass('hover');
                
                });


标签: html css jquery
共有 人打赏支持
粉丝 1
博文 1
码字总数 543
×
懒人科
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: