设为首页收藏本站
开启辅助访问 切换到宽版

云水论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
云水论坛»论坛 › 轮指 › 论坛相关 › 顶部背景的美化代码收集整理贴【整理中】
返回列表 发新帖
查看: 4001|回复: 3
打印 上一主题 下一主题

顶部背景的美化代码收集整理贴【整理中】

[复制链接]
森森

1788

主题

62

好友

8525

积分

管理员

Rank: 9Rank: 9Rank: 9
跳转到指定楼层
楼主
发表于 2011-2-21 15:13:06 |只看该作者 |正序浏览

 

直接做个1280宽屏的背景图 然后用background:url(bg.gif) center center repeat-y;即可

 

 

某同学：

 

以根据分辨率的不同调用不同的CSS,你把CSS里的图片分别做成1024,800,1280宽的就可以了吧?我个人这么认为的哦，希望能帮助到你.




根据分辨率不同，调用不同的css文件



dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0>  <SCRIPT LANGUAGE="javascript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";  
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
file://如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){  
document.getElementsByTagName("link")[0].href="style/"+title;  
}
file://-->
</SCRIPT>




解释：



var IE1024="";
var IE800="";
var IE1152="";
var IEother="";


引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.



var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";


引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.



var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";


引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

不判断分辨率，只判断浏览器

应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。

代码：


<SCRIPT LANGUAGE="javascript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
file://如果浏览器为IE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
file://如果浏览器为Firefox
setActiveStyleSheet("default2.css");
}else{
file://如果浏览器为其他
setActiveStyleSheet("newsky.css");
}
}  
function setActiveStyleSheet(title){  
document.getElementsByTagName("link")[0].href="style/"+title;  
}
file://-->
</SCRIPT>

解释：

如果浏览器为IE，则调用default.css

如果浏览器为Firefox，则调用default2.css

如果浏览器为其他，则调用newsky.css

用法：放在<head></head>中即可。

　　你的沉默明亮如灯、简单如指环。

　　论坛其他名字　【云水.墨】　【淡墨瀑雪】
回复

使用道具 举报

森森

1788

主题

62

好友

8525

积分

管理员

Rank: 9Rank: 9Rank: 9
地板
发表于 2011-2-21 23:25:06 |只看该作者
 DISCUZ论坛添加页头及页尾背景图片的几种方法（

1. 第一种效果，是给discuz的整体框架添加背景图片，见图示：

添加方法如下：找到你现在使用模板common文件下的header.html文件，在<head></head>部分添加以下代码：
  1. <style>body { background-image:url(你的背景图片地址,如http://abc.com/imgs/bg.jpg); background-repeat:no-repeat; background-position: top center; padding-top:40px;}</style>
复制代码

这种方法适用于非宽屏的风格，且背景图片多为宽像素的某张图片。添加此代码后，可能需要调整位置，修改padding-top后面的像素即可。


2. 第二种效果，是给discuz论坛导航栏上方的logo位置区域添加背景图片，见图示：

添加方法也超简单，找到header.htm中关于top部分的代码，找到banner所在的div层，默认应该是id=hd，在之后加入以下代码，最终代码展示为：
  1. <div id="hd" style="background-image: url(static/image/xxx.jpg); background-repeat:no-repeat; background-position:center; background-position:top">
复制代码

注意添加的图片高度要始终哦，而且不要和logo有冲突，这里也侧面证明了logo做成透明PNG格式的必要性。


三、添加页尾即页面底部背景图片的方法

OK，大同小异，为添加页尾添加背景图片的方法，是找到footer.htm模板文件，在代码中footer_banner代码下方即“ <!--{hook/global_footer}-->”添加以下代码：

  1. <div style="background-image: url(http://你的背景地址.jpg); background-repeat:no-repeat; background-position:center; background-position:top>

做的图片效果越清淡效果会越好，具体演示请参阅演示站：http://www.qufeizhou.com
　　你的沉默明亮如灯、简单如指环。

　　论坛其他名字　【云水.墨】　【淡墨瀑雪】
回复

使用道具 举报

森森

1788

主题

62

好友

8525

积分

管理员

Rank: 9Rank: 9Rank: 9
板凳
发表于 2011-2-21 15:18:21 |只看该作者
[php]<style>
.bg{backgroundink;}
.bg1{background:yellow;}
.bg2{background:blue;}
.bg3{background:black;}
.bg4{background:green;}
</style>
</head>
<body class="bg">
<script>
//缺省1024x768              .bg{backgroundink;}
document.write(screen.height)
switch(screen.height)
{case 600:       //800x600
document.body.className="bg1";break;
case 864:       //1152x864
document.body.className="bg2";break;
case 768:       //1280x768
if(screen.width==1280)document.body.className="bg3";break;
case 960:       //1280x960
document.body.className="bg4";break;
}

</script>
背景图自己加上就可以,不同屏幕用不同的背景图
[/php]
　　你的沉默明亮如灯、简单如指环。

　　论坛其他名字　【云水.墨】　【淡墨瀑雪】
回复

使用道具 举报

森森

1788

主题

62

好友

8525

积分

管理员

Rank: 9Rank: 9Rank: 9
沙发
发表于 2011-2-21 15:15:34 |只看该作者
，背景图片，不能压缩，但是可以定义出现的位置
试试这个
background:url(图片路径) no-repeat top center;
　　你的沉默明亮如灯、简单如指环。

　　论坛其他名字　【云水.墨】　【淡墨瀑雪】
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|云水网 ( 鲁ICP备09069806号 )

GMT+8, 2025-5-3 06:32 , Processed in 0.052486 second(s), 19 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部