注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

小乐作品--细品人生

品味生活-品味茶香-品味青春-品味我们的年代

 
 
 

日志

 
 
关于我

Hello,大家好,个性名:唐少,英文名:harry Tang《哈里.唐》,别名叫:happy king,网络达人名:唐家OPPA。我是一个活泼开朗且又风趣的大男生,超赞的个性一族哦~!最骄傲的就是自己长了一张人见人爱,佛见佛跪拜的娃娃脸,我来至于周恩来的故乡--淮安。本人博友已到上限,你们加我为好友吧!

网易考拉推荐

【转载】<DIV>...</DIV>代码的使用  

2016-09-30 12:33:30|  分类: 【日志边框】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<DIV>...</DIV>代码的使用


原始状态:

<DIV>日志内容(文字或图片)</DIV>

此为<DIV>...</DIV>代码的最基本格式,尺寸最大化。

在代码 <DIV style="..." >日志内容</DIV> 中的style="..." 引号之内加入相关代码,则产生风格变化。style为风格。


代码1

<DIV style="border-style:solid; border-width: 8px; border-color:#008080; BACKGROUND-COLOR: #333333; MARGIN: 0px auto; WIDTH: 600px; HEIGHT: 680px; OVERFLOW: hidden">日志内容</DIV>

说明:

四边框宽度:border-style:solid;border-width: 8px;

四边框颜色:border-color: #008080;

背景颜色:BACKGROUND-COLOR: #333333; (去掉此代码为透明背景)

上下移位:MARGIN: 0px auto;  (数字为0时,模块居中,与上面的模块为0距离;如为正数时,此模块下移,与上一模块拉大距离;在数字前加“-”号,此模块移入上一模块相应距离。如MARGIN: 0px auto变化为MARGIN: 0px 50px auto则新加的50px为此模块左右移动;如不用MARGIN: 0px auto,此时模块齐左。※用<P style="MARGIN-TOP: -100px; MARGIN-LEFT: 100px">日志</P>代码也可使日志上下左右移动)

溢出隐藏:OVERFLOW: hidden; (可隐藏图片的部分,如去掉此代码,则图片为最大化)

宽度:WIDTH: 600px;  (为框内宽度)

高度:HEIGHT: 680px;  (为框内高度)

代码内的颜色(#号后6位数字、字母或其组合)、宽度、高度根据需要可随意调整。

代码2:

 <DIV style="border-style:solid;border-width:5px; border-color:red; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #333399; MARGIN: 10px auto; PADDING-LEFT: 10px; WIDTH: 600px; PADDING-RIGHT: 10px; FLOAT: left; HEIGHT: 460px; TEXT-ALIGN: center; OVERFLOW: hidden; PADDING-TOP: 10px">日志内容</DIV>

说明:在代码1基础上,加入日志内容与边框的距离代码,数字可调。

下边距:PADDING-BOTTOM: 10px;

左边距:PADDING-LEFT: 10px;

右边距:PADDING-RIGHT: 10px;

上边距:PADDING-TOP: 10px;

日志居中:TEXT-ALIGN: center; (center可换成right齐右,去掉此代码齐左)

居左:FLOAT: left; (模块齐左。居中可省略此代码,如齐右,left 改成 right)

(代码1为内容与边框无边距,代码2则加入了四边的边距代码,模块齐左)

代码3:

 <DIV style="BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #333300; MARGIN: 10px auto; PADDING-LEFT: 10px; WIDTH: 600px; PADDING-RIGHT: 10px; FLOAT: left; HEIGHT: 480px; OVERFLOW: hidden; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid; PADDING-TOP: 10px">日志内容</DIV>

说明:

下边框颜色和宽度:BORDER-BOTTOM: #ffffff 1px solid;

左边框颜色和宽度:BORDER-LEFT: #ffffff 1px solid;

上边框颜色和宽度:BORDER-TOP: #ffffff 1px solid;

右边框颜色和宽度:BORDER-RIGHT: #ffffff 1px solid;

此代码中上下左右四边宽度和颜色代码为代码1 BORDER-BOTTOM: #008080 8px solid; BORDER-LEFT: #008080 8px solid 经编辑器编辑后生成的变化。边框的宽度与颜色可以不同。

代码4

 <DIV style=" BACKGROUND-COLOR: #222229; MARGIN: 0px auto; WIDTH: 600px; HEIGHT: 210px; OVERFLOW: hidden">日志内容</DIV>

说明:

去掉代码1边框宽度与颜色代码 border-style:solid; border-width: 8px; border-color:#008080 变成无边框的界面。

代码5:

<DIV style="border-style:solid; border-width: 8px; border-color:#998877; MARGIN: 0px auto; WIDTH: 600px; HEIGHT: 380px">
<DIV style="border-style:solid; border-width: 8px; border-color:#776655; MARGIN: 0px auto; WIDTH: 584px; HEIGHT: 364px">
<DIV style="border-style:solid; border-width: 8px; border-color:#665544; BACKGROUND-COLOR: #345678; MARGIN: 0px auto; WIDTH: 568px; HEIGHT: 348px; OVERFLOW: hidden">日志内容</DIV></DIV></DIV>

说明:

多边框(套框),此为紧密相接的三边框。据此,可作出多边框。

代码6

<DIV style="border-style:solid;border-width:5px; border-color:#888888; MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 600px; HEIGHT: 360px">
<DIV style="border-style:solid;border-width:5px; border-color:#888888; MARGIN: 1px auto; OVERFLOW: hidden; WIDTH: 586px; HEIGHT: 345px">
<DIV style="border-style:solid;border-width:5px; border-color:#888888; MARGIN: 1px auto; OVERFLOW: hidden; WIDTH: 572px; HEIGHT: 330px; BACKGROUND-COLOR: #222222">日志内容</DIV></DIV></DIV>

说明:

多边框,框与框之间留有间隙。

日志标题

日志内容
日志内容
日志内容
日志内容
多个板块排版的组合
日志内容
  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017