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

原始状态：

<DIV>日志内容（文字或图片）</DIV>

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

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

代码1：

说明：

四边框宽度：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: 480px; （为框内高度）

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

代码2：

说明：在代码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：

说明：

下边框颜色和宽度：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：

说明：

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

代码5：

说明：

多边框（套框），此为紧密相接的三边框。据此，可作出多边框。

代码6

说明：

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

日志标题

日志内容

多个板块排版的组合日志内容

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。