文档章节

网页设计-后台页面

懒人科
 懒人科
发布于 2014/06/12 10:47
字数 543
阅读 14
收藏 0
点赞 0
评论 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
广州
网页/平面设计
精彩网页设计示例收藏

开发网站时常常苦于没有思路,这时我总会大量地浏览很多经典网站以激发灵感。尤其向大家推荐博客园的梦想天空(山边小溪)博客,我下面收集的很多资料就来自这里。另外,最近开源中国的新浪微...

小微 ⋅ 2012/04/06 ⋅ 0

没弄过店铺装修 淘宝 天猫装修麻烦吗?

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

eechen的粉丝 ⋅ 2014/11/17 ⋅ 0

在网页设计中寻找热情

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

jobBole ⋅ 2010/12/22 ⋅ 1

网页设计、web前端、后台的开发流程和注意事项

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

猫猫没睡醒 ⋅ 2012/10/18 ⋅ 0

文字排版中的设计四原则(三)

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

博为峰教研组 ⋅ 2016/11/11 ⋅ 0

自适应网站设计对百度友好的关键

自适应网站设计对百度友好的关键:添加applicable-device标签 现在很多网站都使用了自适应网页设计(Response-Web-Design),以满足庞大的移动端用户群的需要。但是在技术上设计了自适应的网...

English0523 ⋅ 2016/05/06 ⋅ 0

拒绝平庸——浅谈Web登录页面设计

用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子 门口的石狮子或其他的摆件的摆放极...

红薯 ⋅ 2012/01/17 ⋅ 12

20 超棒的 Photoshop 网站布局设计教程

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

红薯 ⋅ 2011/12/10 ⋅ 4

响应式网页设计:互联网web产品RWD概念

  RWD(Responsive Web Design)可称为自适应网页设计、响应式网页设计、响应式网页设计等等,是一种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透...

程序员客栈 ⋅ 2016/07/05 ⋅ 0

网页设计师的职业发展

网页设计师的职业发展 导读: 网页设计师是每个网站不可或缺的角色,但确实有很多网页设计师会想,我们的职业成长空间如何呢? 网页设计师首先要熟悉网页制作流程,能独立完成各级页面设计,...

半饱即好 ⋅ 2014/05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 12分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 13分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 14分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 28分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 33分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 35分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 35分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 36分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 36分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 37分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部