文档章节

网页设计-后台页面

懒人科
 懒人科
发布于 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
自适应网站设计对百度友好的关键

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

English0523
2016/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker多容器部署lnmp环境

环境:RHEL7.5 ip:192.168.10.102,主机名:lb02 一、创建web、数据库目录 web网站目录为:/wwwroot,属主属组:www [root@lb02 ~]# mkdir /wwwroot[root@lb02 ~]# useradd -s /sbin/nolo...

人在艹木中
30分钟前
1
0
eclipse运行springboot项目报错‘找不到或无法加载主类’

这是一个很烦躁的问题~,往往困住大家好长时间,然后各种百度。借此,咱将这个问题有可能产生的原因进行一下总结。若有不完善之处欢迎大家在下面留言指出~~ Duang!问题出现 然后开始尝试解决...

Code辉
51分钟前
1
0
springboot oauth2 跨域设置

@Overridepublic void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/security/**") .authentica......

昆虫大侠
52分钟前
1
0
08-利用思维导图梳理JavaSE-泛型

08-利用思维导图梳理JavaSE-泛型 主要内容 1.泛型的基本概念 1.1.定义 1.2.使用前提 1.3.使用泛型的好处 2.泛型的使用 2.1.泛型类定义 2.2.泛型对象定义 2.3.泛型中的构造方法 2.4.泛型方法的...

飞鱼说编程
54分钟前
0
0
Docker 部署 Spring Boot 项目指南

仅想在Docker里运行一个Spring Boot项目,捣鼓了许久。。。 本文主要适用于Windows环境下的Docker 一、运行环境 Windows 10 Maven 3.5 Docker 18.06.1-ce-win73 (19507) 二、创建Spring Boot...

AmosWang
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部