文档章节

网页设计-后台页面

懒人科
 懒人科
发布于 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
广州
网页/平面设计
私信 提问
北京招聘:网页设计师(美工)

公司名称:北京中讯汉扬科技发展有限公司 公司网址:http://www.artmtech.com/ 联系人:赵女士 联系方式: QQ:398988329 请把简历投递到邮箱里:398988329@qq.com 薪水范围: 4K/月以上 网页设计师...

落在人间的天使
2011/10/27
182
1
web端视频直播功能

学虫网www.xuechonmg.wang是一个在线教育平台,外包做一个视频直播功能,嵌入到现在网站内,进行二次开发,我们提供所需源码,现有网站是用PHP语言,yii框架,前端是HTML5 1.参考网站有 跟谁...

学虫网
2015/11/19
6
0
没弄过店铺装修 淘宝 天猫装修麻烦吗?

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

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

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

jobBole
2010/12/22
931
1
公司网站制作及后续改版开发

【业务需求】 一、功能需求 两个网站, 一个为公司展示网站,要求:网页内背景图及展示图片可以更换,内容类文字及版式可以自定义,页面使用响应式展现方式,甲方所需求交互效果; 另一个为信...

kkUedkY
2016/11/08
3
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部