|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？注册
x
html
<IFRAME border=0 name=ye_xy marginWidth=0 frameSpacing=0 marginHeight=0 src="Test1.html" frameBorder=0 noResize width="100%" scrolling=auto height="100%" vspale="0"></IFRAME>
<html>
<head>
<STYLE type=text/css>
BODY {
SCROLLBAR-FACE-COLOR: #e8e7e7;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #cccccc;
SCROLLBAR-ARROW-COLOR: #03B7EC;
SCROLLBAR-TRACK-COLOR: #EFEFEF;
SCROLLBAR-DARKSHADOW-COLOR: #b2b2b2;
SCROLLBAR-BASE-COLOR: #000000;
}
</STYLE>
</head>
<body>
<TABLE cellSpacing=1 cellPadding=2 width="100%" border=0>
<TBODY>
<TR bgColor=#ffffff>
<TD>、
文字内容
</TD></TR></TBODY></TABLE>
</body>
</html>
代码解释：
SCROLLBAR-FACE-COLOR:滚动条突出部分的颜色；
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色；
SCROLLBAR-SHADOW-COLOR: 滚动条立体阴影的颜色；
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色；
SCROLLBAR-ARROW-COLOR: 上下按钮上箭头的颜色；
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色；
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色；
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色。
CSS控制的滚动条样式及代码
主要代码:
.highlight{
height:140px;
scrollbar-face-color:#666;
scrollbar-shadow-color:#ccf;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#990;
scrollbar-darkshadow-color:#333;
scrollbar-track-color:#eee;
scrollbar-arrow-color:#900;
}
------------------------------------------------------------------------------------------------------------------
1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时，无论设置的"width"和"height"
的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
没有水平滚动条:
<div style="overflow-x:hidden">test</div>
没有垂直滚动条
<div style="overflow-y:hidden">test</div>
没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或style="overflow:hidden">test</div>
自动显示滚动条
<divstyle="height:100px;width:100px;overflow:auto;">test</div>
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样
子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,
分别注释在下面的css代码的后面了,注意css的注释代码是放在
两个斜杠内的两个星号之间,如:/*这里放注释的代码*/
Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/}
以上2项适用与<body>、<div>、<textarea>、<iframe>
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>用CSS控制滚动条样式</title>
<STYLE>
BODY {
}
</STYLE>
</head>
<body>
<p> </p>
</body>
</html>
div+css学习笔记1(层的覆盖和div滚动条设置)
分类：网页设计 字号： 大大 中中 小小 这几天开始用div+css做网页了，以前总以为用表格定位方便，div+css定位太麻烦了，原来是没有理解和怕时间不够，以及处理问题的思想不够强。所以一直不敢迈出脚步，但强迫自己做出一个出来以后感觉棒极了，而且有好多效果是表格框架所无法达到的，从效率上来说远远提高了。
感觉有必要做个学习笔记，算是经验的积累和供以后查阅资料方便。
今天的效果：
<html xmlns="#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<title>zdz作品，流风的作品</title>
</head>
<body scroll="no">
<div id="headdiv">
<div id="onelinksdiv" class="onelinksdiv"><img src="../images/main/2.jpg" width="582" height="228" /> </div>
<div id="twolinksdiv" class="twolinksdiv">
<div class="updiv" id="updiv"></div>
<div class="downdiv" id="downdiv"></div>
<div class="titlediv" id="titlediv">Company</div>
<div class="contendiv" id="contendiv">Newplan Design Co.,Ltd.,provides the professional product industrial design and the related technical services, which covers the whole process of the product design,from research on markets and consumers, product scheme and definition of characteristics,product conceptual design,industrial design, mehcanical design,mold design, pre-production sample(prototype),to the technical solutions correlated with mass production,such as package design and process design;includes organizing manufacturing according to the requirements of customers,and presenting the final products to them.
</div>
</div>
</div>
</body>
</html>
－－－－－－－－－－－－
main.css
－－－－－－－－－－－－
body
{
FONT-FAMILY:"宋体";
font-size: 12px;
margin: 0px;
line-height: normal;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background:#FFFFFF;
height: 100%;
}
div {
font-size: 12px; vertical-align:middle;
padding-bottom:0px;padding-top:0px;padding-left:0px;padding-right:0px;
}
#headdiv {
position: absolute; left: 0px; top: 0px; width: 585px; height:430px;
}
.onelinksdiv {
position: absolute; left: 0px; top: 0px;width: 585px;height: 228px;
font-size:14px;font-family:Arial, Helvetica, sans-serif;text-align:right;line-height:150%;
}
/*
下层的绝对位置是相对上次div的而不是相对屏幕的
*/
.twolinksdiv {
position: absolute; left: 0px; top: 228px; width: 585px;height: 164px;line-height:150%;
text-align:left;BACKGROUND-IMAGE:url(../../images/main/decbg.jpg);
background-position: left TOP;background-repeat:no-repeat;
}
.updiv {
position: absolute; left: 568px; top: 16px;width:10px;height: 10px;
BACKGROUND-IMAGE:url(../../images/main/up.gif);
background-position: left TOP;background-repeat:no-repeat;
}
.downdiv {
position: absolute; left: 568px; top: 135px;width:10px;height: 10px;
BACKGROUND-IMAGE:url(../../images/main/down.gif);
background-position: left TOP;background-repeat:no-repeat;
}
.titlediv {
position: absolute; left: 10px; top: 10px; width: 150px;height: 154px;line-height:150%;
font-size:16px; color:#EF3B23; font-weight:bold; text-align:center;
}
.contendiv {
position: absolute; left: 160px; top: 10px; width: 415px;height: 135px;
line-height:120%;text-align:left; font-family:Verdana;word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
－－－－－－－－－－－－－
这个div的关键在于滚动条的效果，和内容少的时候不出来滚动条仍然有两个箭头在那里（采用div重合覆盖）。而如果用表格的话则很麻烦，要iframe内容才可以，虚假的箭头更加难处理。
做这个效果搜索了两种关键技术：滚动条设置，英文强制换行word-break:break-all;
把资料转载过来供以后参考。
所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。其功能大约是为了节约页面空间，就是所谓的“缩地”了。看看效果如何吧，代码在下一楼提供。
参考核心代码：
<DIV style="OVERFLOW-Y:auto;SCROLLBAR-FACE-COLOR:#ffffff;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;SCROLLBAR-SHADOW-COLOR:#919192;SCROLLBAR-3DLIGHT-COLOR:#ffffff;SCROLLBAR-ARROW-COLOR:#919192;SCROLLBAR-TRACK-COLOR:#ffffff;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;">
滚动条相关颜色属性：
face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
tack-color：滑道颜色
滚动条属性：
overflow：auto为自动，yes为有，no为无
overflow-x：横向滚动条
overflow-y：纵向滚动条
－－－－－－－－－－－－－－－－－－－－
强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行
div{
word-break:break-all;
}
============================================
CSS设置不转行:
overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
============================================
英文不换行
CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有，在FF下测试,FF可以自己加滚动条，这样也不影响效果
建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题
以下引用word-break的说明, 注意word-break 是IE5+专有属性
语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。
示例：
div {word-break : break-all; }
|
|
情暖新春 爱满助残
阜新仁福康职业技能培训学校圆残疾人电商创
锦瑞公司为下肢障碍儿童捐赠总价值32，000
李颖在省妇联“志愿服务”案例展示活动中演
初心的呼唤 使命的感召 ——阜新市智协举
微信登陆
IP卡
狗仔卡
发表于 2011-3-21 15:53:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
