`
wxclover
  • 浏览: 24827 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css 随便看看

    博客分类:
  • Css
阅读更多
body {background: #efefef url(./images/dashboard/bg.png) repeat-y scroll; padding: 0px; margin: 0px}
ul, li {margin: 0px; padding: 0px}
body, ul, td, div, h1, h2, h3, h4, h5 {font-family: "Helvetica Neue", Arial, Helvetica, sans-serif}
img {border: 0px}
/*头部 没有用浮动定位  是用的绝对定位 + 偏移*/
div#dashboard-header {background: transparent url(./images/dashboard/bg_header.png) repeat-x scroll; position: absolute; top: 0px; left: 0px; height: 53px; width: 100%; z-index: 10}
/*命名规范 元素+id   能清晰的知道是给什么元素修饰的样式  */
div#system-nav-wrapper1 {position: absolute; top: 0; right: 0; z-index: 15; text-align:right; width:50%; }

ul#system-nav {height: 45px; border-left: 1px solid #d7d7d7; float:right;}
ul#system-nav li {
	float: left;
	border-right: 1px solid #d7d7d7;
	margin: 0px 0px 0px 0px !important; /*ie6 不认 支持FF and ie7*/
	background: transparent url(../images/bg_header_rib.png) repeat-x scroll;
	padding: 0px 0px 1px px !important;
	list-style-type: none;
}
/*绝对定位到右方 距离上边45px*/
#dashboard-version{text-align:right; position:absolute; top:46px; right:0px; font-size:11px; color:#888; padding:4px; z-index:-1}

ul#system-nav li a, ul#system-nav li span {display: block; padding: 15px 9px 14px 28px; text-align: center; background-repeat: no-repeat; font-size: 13px; font-weight: bold; color: #787878; text-decoration: none; border-right: 1px solid #fff}
ul#li span {color: #cecece}/*覆盖上边同意定于的颜色  内属性>id>class>元素 */
ul#system-nav li:hover {background: #A2DAFD url(../images/bg_header_active.png) repeat-x scroll;}
ul#system-nav a:hover {border-right: none; padding-right: 10px; color: #333}
/*通过定位图片的位置 是图标在合适的位置*/
a.nav-loading {background-image: url(./images/icons/icon_header_loading.gif) !important;}
ul#system-nav #nav-return {background-image: url(./images/dashboard/icon_return_to_website.png); background-position: 6px 14px !important}
ul#ccm-system-nav #ccm-nav-logout {background-image: url(./images/dashboard/icon_logout.png); background-position: 5px 14px !important}
ul#ccm-system-nav #ccm-nav-dashboard-help {background-image: url(./images/icons/icon_header_help.png); background-position: 6px 15px !important}
ul#ccm-system-nav #ccm-nav-dashboard-help.ccm-nav-loading {background-position: 6px 14px !important}
/*右侧的导航  top:45px*/
div#dashboard-nav {position: absolute; top: 45px; left: 0px; width: 200px; z-index: 2}
div#dashboard-nav li {display: block; width: 200px; background: #ededed url(./images/dashboard/bg_nav.png) repeat-x scroll; border-bottom: 1px solid #e1e1e1}
div#dashboard-nav li a {color: #787878; font-weight: bold; display: block; font-size: 13px; height: 40px; overflow: hidden; padding: 6px 11px 0px 12px; text-decoration: none}
div#dashboard-nav li a:hover {background: #A2DAFD url(../images/bg_header_active.png) repeat-x scroll;}
/*激活时候的样式*/
div#dashboard-nav li.nav-active a {background: #cdd9dd url(./images/dashboard/bg_nav_active.png) repeat-x scroll bottom right}
div#dashboard-nav li a span {font-family: "Helvetica Neue", Arial, Helvetica; font-size: 11px; color: #a8a8a8; height: 12px; overflow: hidden; font-weight: normal; display: block; margin-top: 1px}

/*
div#ccm-dashboard-page{ width:auto; padding-left:225px; margin:0px; padding-right:20px; padding-top:70px; padding-bottom:30px  }
div#ccm-dashboard-content {width:auto; height:auto; padding:0px; overflow:hidden  }
{ margin: 70px 30px 30px 225px; }
div#ccm-dashboard-content {width:auto; position: absolute; left:225px; top:70px; margin-bottom:30px; margin-right:30px; padding:0px  }
*/

分享到:
评论

相关推荐

    模拟新浪微博随便看看栏目

    在IT行业中,模拟新浪微博随便看看栏目是一个常见的应用场景,它涉及到前端开发、用户界面设计以及数据加载等多个技术领域。在这个项目中,我们主要关注的是“仿微博”和“ListView Adapter”这两个核心标签,它们是...

    Animate.css:随便添加CSS动画-开源

    Animate.css是一个跨浏览器库,包含有趣CSS动画。 当您需要在项目中添加一些动感和震撼力时,只需滑动这些仅添加水的动画之一,即可观看视觉... 使用这些动画来表达,强调,吸引注意力,或者只是使项目看起来生动活泼。

    我的django项目,可以随便看看

    标题 "我的django项目,可以随便看看" 暗示了一个基于Django框架开发的个人Web项目,这将涉及Python编程、数据库设计、模板系统、URL路由等多个知识点。Django是用Python编写的开源Web框架,它遵循“干”(Don't ...

    CSS样式不起作用?史上最全解决方法汇总

    在我们写页面时,有时会发现自己写的css样式无法生效,导致这种现象的原因有很多,下面列举一些常见的原因希望可以帮到你,欢迎评论区补充。...看看自定义的CSS样式引入标签是否放在bootstrap框架样式引用之后,确保

    css+div例子

    因为公司网站不随便开发,无法用有盘、QQ等传东西,也不开其他下载网站,正好用到这个东西,就传上,可以在公司的网上下下来自己用,有需要的朋友也可以下下来看看,css+div,听详细的,这个也是我在电驴上下来的。

    CSS的样式合并与模块化.docx

    淘宝首页使用小bug(Firebug的昵称)随便看一个带背景图片的元素,例如免费注册按钮。淘宝首页对背景图片的样式进行了合并,减小了CSS文件的大小,对于淘宝首页这样大流量的页面来说,减小了服务器的负载。 五、...

    图片销售类网站 源码 css+div

    【描述】:“很好很强大下载决不后悔 记得要留下留言哦 随便改改随便看看” 这段描述表达了对源码质量的肯定,声称它是“很好很强大”的,意味着该源码可能具有高效、稳定且功能丰富的特点。鼓励用户下载并承诺不会...

    css点击返回顶端

    会出现三个按钮,其中有一个是返回页面顶端的,我上传的这个就是这种效果,不过有一种滑动的感觉///我之前上传过一个一模一样的,但是网页里的测试文字,我当时故意给删了,结果有些人下完后,一看不能用,还瞎评论...

    纯CSS 实现酷炫的充电动画

    循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,...

    js+css实现文字散开重组动画特效代码分享

    文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以...link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head

    用纯CSS实现饼状Loading等待图效果

    之前碰到一个小练习,就是用纯CSS3来写饼状的loading效果,之前着实没有写过这玩意儿,小花完全没头绪,然后参考了张鑫旭老师的CSS3实现鸡蛋饼饼状图loading等待转转转,还有些别的东西,用一种看起来有一点类似但是...

    dtree 写好的 随便用我写好的 直接看example2.jsp 快看看吧

    - **自定义样式**:通过CSS可以调整节点的样式,使其符合网页的整体设计。 - **第三方集成**:dTree可以与其他前端框架(如jQuery、Vue、React等)结合使用,增强功能和易用性。 综上所述,"dtree"是用于构建动态...

    Div 随便拖拽效果

    本文将详细讲解如何使用JavaScript和CSS技术来实现一个Div元素的随便拖拽、隐藏及显示效果。 首先,让我们从HTML结构开始。在HTML文档中,我们需要创建一个Div元素,作为可拖动的元素。可以这样定义: ```html ...

    图片漂浮特效随便放那里都ok的

    图片漂浮特效随便放那里都ok的! 很值得下载看看!资源免费,大家分享!!

    HTML-CSS

    HTML-CSS 这是在学习HTML5和CSS3的基础知识,一开始需要做很多工作,但是学习如何制作一个模拟网站并添加各种功能真的很有趣,也很有意义。 随便看看

    Struts2.0教程

    首先声明下原创是MAX.如果看过他blog的人请无视吧。 看了他的教程给我的感觉是:容易懂,教程详细,又实例。这个是最好的。...好了 快去看看吧。里边的 max on java 随便点一个 连接就能到max的blog

    龙觉梦幻动网7.1皮肤

    ) <br>导入完成后 <br>进入 外观设置--风格界面模板总管理--选好导入的风格--修改CSS样式--这里不用改(图片包路径)随便拿个默认风格来搞。。接着就点 修改样式内容 把里面的代码全删了。换上我给你们的CSS....

    给女友加油星空浪漫相册

    描述中提到“里面的图片可以随便换”,意味着代码设计时应考虑到图片资源的动态替换,这通常通过CSS的`content`属性或JavaScript来实现,使得用户可以根据个人喜好更换相册中的图片。 “也可以加背景音乐偶,不会加...

    douyu-app:使用斗鱼api和react写的douyu应用

    使用react-router实现路由切换(随便看看/分类/我的关注) 随便看看:热门主播房间随机首页展示,页面底部点击加载新房间 分类:所有游戏列表分类,大屏幕下使用大图,小屏幕下使用圆形小图 关注:可搜索添加到本地...

    bookstore-master_nightuju_bookstore-master_bookstoremaster_books

    【描述】"简单的实训项目,用于初学者学习使用,随便看看就好" 表明这个项目是为初学者设计的,目的是提供一个实践平台,帮助他们学习和理解相关技术。项目可能相对简单,适合初学者进行代码阅读和实践操作,以提升...

Global site tag (gtag.js) - Google Analytics