文档章节

网页设计-后台页面

懒人科
 懒人科
发布于 2014/06/12 10:47
字数 543
阅读 15
收藏 0

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

页面非常简洁,很多东西都放在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');
                
                });


© 著作权归作者所有

共有 人打赏支持
懒人科
粉丝 1
博文 1
码字总数 543
作品 0
广州
网页/平面设计
私信 提问
没弄过店铺装修 淘宝 天猫装修麻烦吗?

公司天猫需要装修 网页设计说没弄过,作为天天写后台的我 也没搞过,业务让我帮他弄,我说我不知道。 不找网页设计 找程序员 干毛 怎么拒绝?

eechen的粉丝
2014/11/17
37
0
在网页设计中寻找热情

年轻一代正推动着数字时代向前发展,并将会掌控网络的未来。从一开始,自由网站设计者这一职位就显得很有钱途,并且很诱人。自己规划时间、做任何自己想做的事、在家工作就能赚钱,并且走到哪...

jobBole
2010/12/22
928
1
网页设计、web前端、后台的开发流程和注意事项

工作2年了,总感觉每次做项目的时候,都是赶时间,赶时间,加班几班,可是最后总结一看,百分之50的时间都浪费在做无用功上面了,甚至因为设计人员的失误,造成了前端和程序大量的返工,休整...

猫猫没睡醒
2012/10/18
0
0
文字排版中的设计四原则(三)

3.对齐 在网页设计中,页面上的元素不能随意摆放,每一项都要与页面内容存在某种联系。对齐也是网页设计必不可缺少的一部分,它可以帮助设计师做出非常吸引眼球的设计,这也是是优秀网页设计...

博为峰教研组
2016/11/11
17
0
20 超棒的 Photoshop 网站布局设计教程

Photoshop 网页设计的教程是很大的资源,是网页设计快速简便的方法之一。作为一个良好的开端,我们应该善于学习他人在网页设计领域的理解。在这个原则的基础上,你可以参考以下教程,学习Pho...

红薯
2011/12/10
4.8K
4

没有更多内容

加载失败,请刷新页面

加载更多

Vavr User Guide中英对照版

Vavr User Guide(Vavr用户指南) Daniel Dietrich, Robert Winkler - Version 0.9.2,2018-10-01 0. Vavr Vavr是Java 8 的对象函数式扩展,目标是减少代码行数,提高代码质量,提供了持久化集合...

白石
10分钟前
0
0
Spark2.40 Streaming编程指南

Spark Streaming编程指南 概观 一个快速的例子 基本概念 链接 初始化StreamingContext 离散流(DStreams) 输入DStreams和Receivers DStreams的转换 DStreams的输出操作 DataFrame和SQL操作 ...

天天爬网
10分钟前
0
0
oozie 调度pyspark

http://www.learn4master.com/big-data/pyspark/run-pyspark-on-oozie

MPRO
14分钟前
0
0
转:文件系统read,write缓存,有点意思

当我们在linux系统下写程序的时候,经常会读文件或者写文件,既然要操作文件,就会用文件操作函数,其中涉及读写的不乏有read/write或者fread/fwrite,但是我们应该选择哪一种呢,少安毋躁,...

臧教授
19分钟前
0
0
通过示例学习Javascript闭包

译者按: 在上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包。 原文: JavaScript Closures for Dummies 译者: Fundebug 为...

Fundebug
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部