【教程】和讯个人门户“任何地方添任何模块”CSS-HTML方法

【教程】和讯个人门户“任何地方添任何模块”CSS-HTML方法

来源：星心的夜 b333.blog.hexun.com/45895303_d.html 缘阳娱乐 hexun.com/wwwy1 收藏整理：博客特效大全 hexun.com/yayb

大家可能见过有些博客朋友的个人门户有“超多的模块”，而且模块的大小、多少、位置可以任意设置。那么是如何做到的呢？这个需要由自定义css代码和自定义HTML代码相互配合才能够做到。其原理是第一部分：从自定义css代码里面定义一个模块：包含模块的大小、离顶端（top）的距离、离左右页面的距离——也就是从自定义css里面绝对定位出一个模块。第二部分：从自定义HTML模块里面添加该对应模块的代码，例如链接代码、滚动图片代码、底部友情链接代码等等。下面以顶部右边定义一个链接模块为例进行说明，这里也就是起到抛砖引玉的作用，把原理告诉大家，以便大家可以制作出任何网页效果来。大家先看看顶部右边添加模块的效果图：

其具体方法步骤如下：

第一部分：自定义CSS代码部分

登陆个人门户--我的家--门户设置--自定义css--在自定义css代码的最后面添加上如下相关代码，保存即可！

/* 自定义htmlcss_可自行修改哦 */
/* 新增导航 */
.gker_01 {
    left: 50%;
    width: 760px;
    position: absolute;
    center:0px;
    top:42px;
    height: 50px;
    margin-left:-300px;
    line-height: 25px;
        background: #DDDDDD
}
.gker_01_01 {
    float:left;
    font-size: 14px;
    padding-left: 8px;
    width: 487px;
color: #111111;
}
.gker_01_02 {
    float:right;
    background-image: url(http://hexun.com/homephoto3/20100107/12407529/bk04-52-49.gif);
    background-repeat: repeat-y;
    padding-left: 20px;
    width: 240px;
.gker_02 {
    left: 50%;
    width: 365px;
    position: absolute;
    center:0px;
    top:111px;
    height: 21px;
    margin-left:100px;
    line-height: 30px;
}

第一部分代码使用说明（绝对定位模块的大小，即长宽、离顶端位置、离左右页面距离）：
.gker_01 {                            第一模块编号
    left: 50%;
    width: 760px;                          修改模块宽度
    position: absolute;
    center:0px;
    top:42px;                              修改距离上边高度，即顶端
    height: 50px;                          修改模块高度
    margin-left:-300px;                    修改左右位置
    line-height: 25px;                     修改行距
    background: #DDDDDD                    修改模块底色，删除为无色透明
}

第二部分：自定义HTML模块代码部分

在自定义html里对应添加：模块编号如：.gker_01或.gker_01_01（第一模块第一部分）
自定义HTML添加相应代码：
<div class="gker_01">
<div class="gker_01_01">
<a target="_blank" href="http://gker.blog.hexun.com/40205975_d.html">高中语文教参</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d7%d6%b4%ca%b3%c9%d3%ef">字词成语</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%b1%ea%b5%e3%b7%fb%ba%c5">标点符号</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%ca%ab%b4%ca%bc%f8%c9%cd">诗词鉴赏</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%ce%c4%d1%d4%ce%c4%d6%aa%ca%b6">文言文知识</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%ce%c4%d1%a7%b3%a3%ca%b6%c4%ac%d0%b4">文学常识默写</a>

<br>
<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d0%b4%d7%f7%cc%e2%bf%e2%d7%f7%c6%b7">写作题库作品</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d0%de%b4%c7%b7%bd%b7%a8">修辞方法</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d3%ef%b2%a1%d6%aa%ca%b6">语病知识</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d3%ef%d1%d4%b1%ed%b4%ef">语言表达</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%cf%d6%b4%fa%ce%c4%d4%c4%b6%c1">现代文阅读</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%d3%ef%ce%c4%ca%d4%be%ed%bf%e2">语文测试卷库</a>
</div>
<div class="gker_01_02">
<a href="http://i.hexun.com/focus/myfocusList.aspx?userid=12407529" target="_blank">关注果壳</a>　<a href="http://message.hexun.com/Send.aspx?id=12407529" target="_blank">发送私信</a>　<a target="_blank" href="http://post.blog.hexun.com/i/newpost.aspx">发表文章</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%b9%fb%bf%c7%b6%f9%c8%d5%bc%c7">果壳日记</a>

<br>
<a target="_blank" href="http://www1.llqqxx.com">轻云出岫</a>　<a target="_blank" href="http://gker.blog.hexun.com/list.aspx?tag=%ca%b1%ca%c2%c8%a4%ce%c5">时事趣闻</a>　<a target="_blank" href="http://hexun.com/gker/circle.html">我的圈子</a>　<a target="_blank" href="http://hexun.com/wwwy1/default.html">缘阳娱乐</a>
</div>
</div>
代码说明：模块可增加也可减少；将以上的链接地址改为自己需要的链接地址。也可以修改为相关模块代码，例如滚动图片代码、友情链接代码等等。

其它方法保存：

自定义css：

.top05/* 内容1 */
{display:none;}
#HomePageBody .top05
{display:block;}

自定义html：
<DIV class=top05 style="LEFT: 50%; MARGIN-LEFT: 212px; WIDTH: 266px; POSITION: absolute; TOP: 0px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

内容一
<BR> </DIV></DIV>
<DIV class=side_block style="FLOAT: left; MARGIN-LEFT: 0px; WIDTH: 266px">
<DIV class=side_title>
<DIV class=side_title_1>动漫音画</DIV>
<DIV class=side_title_2><A href="http://hexun.com/yayb/default.html" target=_blank>更多</A></DIV></DIV>
<DIV class=side_content>

内容二<BR>

</DIV></DIV>
<DIV class=side_block style="FLOAT: left; WIDTH: 266px">
<DIV class=side_title>
<DIV class=side_title_1>博客代码</DIV>
<DIV class=side_title_2><A href="http://hexun.com/yayb/default.html" target=_blank>更多</A></DIV></DIV>
<DIV class=side_content>

内容3<BR>

</DIV></DIV>
<DIV class=side_block style="FLOAT: left; MARGIN-LEFT: 0px; WIDTH: 266px">
<DIV class=side_title>
<DIV class=side_title_1>社会焦点</DIV>
<DIV class=side_title_2><A href="http://hexun.com/yayb/default.html" target=_blank>更多</A></DIV></DIV>
<DIV class=side_content>

内容4<BR>

</DIV></DIV>
</div>

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