和讯博客首页模块两栏排列的实现代码

前端之家收集整理的这篇文章主要介绍了和讯博客首页模块两栏排列的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近一些朋友都问一个问题,如何让个人门户模块像博客一样成两列显示,具体效果请参考

在这里做个简单介绍,希望对有这方面打算的朋友有所帮助。看看步骤:

1.登陆到个人门户,在个人门户设置中选择模块选择,然后在右边选择自定义CSS。

2.请如下面找到紫色部分,按红色的提示修改(需修改的有两处)

#left_side {
width: 204px;
}
.left_side_2 {
width: 204px;
}
.left_side_3 {
width: 204px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E4E4E4;
}

#left_side #left_side_inner .side_block .substance .substance_list .Slist .Slist_2 {
visibility: hidden;
}
#left_side #left_side_inner .side_block .substance .Slist .Slist_2 {
visibility: hidden;
}
#left_side #left_side_inner .side_block #AudioDivItem .music_boder {
width: 160px;
}
#left_side #left_side_inner .side_block #AudioDivItem object {
height: 64px;
width: 182px;
}
#left_side #left_side_inner .side_block #Board .message .message_list {
width: 182px;
}
#left_side #left_side_inner .side_block #Board .release .release_2 input {
width: 120px;
}
#left_side #left_side_inner .side_block #Board .release .release_2 textarea {
width: 120px;
}
#left_side #left_side_inner .side_block #Board .message .message_list .message_list_right .message_list_right_text {
height: 66px;
}
#left_side #left_side_inner .side_block #VideoDivItem object {
width: 182px;
}
#left_side #left_side_inner .side_block #MyFriend {
height:auto;
width:182px;
}
#left_side #left_side_inner .side_block #MyFriend div {
margin-left:5px;
margin-right:5px;
margin-top:5px;
}

.list {
line-height: 20px;
height: 20px;
}
.list_1 {
float: left;
}
.list_2 {
float: right;
}
#main {
width: 528px; /*将此处的528修改为728*/
}
#main_inner {
width: 508px; /*将此处的508改为718*/
padding-right: 10px;
padding-left: 10px;
}
#master_ptoto {
text-align: center;
}
#master_ptoto_1 {
padding-top: 8px;
padding-bottom: 8px;
}
#master_ptoto_2 {
line-height: 18px;
}
#main #main_inner .side_block #Board .release .release_2 input {
width: 422px;
}
#main #main_inner .side_block #Board .release .release_2 textarea {
width: 422px;
}
#main #main_inner .side_block #AudioDivItem object {
height: 64px;
width: 450px;
}
#main #main_inner .side_block #AudioDivItem .music_boder {
width: 428px;
}
#main #main_inner .side_block #Board .message .message_list {
width: 486px;
}
#main #main_inner .side_block #VideoDivItem object {
width: 450px;
height: 360px;
}
#main #main_inner .side_block #VideoDivItem .music_boder {
width: 428px;
}
#main #main_inner .side_block #MyFriend {
height: 200px;
}
#main #main_inner .side_block #MyFriend div {
margin-left:11px;
margin-right:5px;
margin-top:5px;

}
#MyFriend {
text-align: center ;
}
#MyFriend div {
float:left;
}
#MyFriend span {
display:block;
height: 22px;
width: 75px;
overflow: hidden;

}
#MyFriend img {
height: 75px;
width: 75px;
}
#AudioDivItem {
text-align: center;
}
.music_list {
margin-top: 10px;
}
.music_boder {
border: 1px solid #CECECE;
text-align: left;
padding: 10px;
}
.music_boder_1 span,.music_boder_2 span {
font-weight: bold;
}
.message_list {
border-bottom-width: 1px;
border-bottom-style: dashed;
margin-bottom: 7px;
border-bottom-color: #CECECE;
}
.message_list_left {
width: 60px;
height: 62px;
text-align: center;
margin: 0px;
}
.message_list_left_1 {
height: 40px;
}
.message_list_left_2 {
height: 22px;
}
.message_list_right {
}
.message_list_right div {
padding-left: 10px;
}
.more {
float: right;
padding-right: 10px;
}
.MusicNameList {
width: 100%;
text-align: center;
line-height: 28px;
color: #999999;
}
.MusicNameList tr {
background-image: url(http://hexun.com/img/img_style000/vi_01.gif);
background-repeat: repeat-x;
background-position: bottom;
}
.MusicNameList div {
background-image: url(http://hexun.com/img/img_style000/vi_10.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.MusicNameListTitle {
color: #494949;
}

.Music_Item_B {
height: 95px;
}
.Music_Item_B_1 {
float: left;
}
.Music_Item_B_1 img {
margin: 10px;
height: 75px;
width: 75px;
}
.Music_Item_B_2 {
margin-top: 8px;
}
.Music_Item_B_2 div {
height: 20px;
line-height: 20px;
}

#MusicPlayerID {
width: 100%;
}
#MusicPlayerID td {
padding-top: 12px;
padding-bottom: 12px;
line-height: 22px;
}

.MusicPlayerTd_1 div {
padding-right: 10px;
padding-left: 10px;
}
.MusicPlayerTd_1_2 object {
height: 64px;
width: 500px;
}
.MusicPlayerTd_2 div {
height: 22px;
margin-left: 10px;
}
.MusicPlayerTd_3 div {
padding-right: 10px;
padding-left: 10px;
}

#MusicPlayerID .MusicPlayerTd_1 {
width: 530px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC;
}
#MusicPlayerID .MusicPlayerTd_2 {
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #CCCCCC;
width: 189px;
}
.MusicPlayerTd_3_3 {
margin-top: 10px;
}

未完,请看下一页

原文链接:/wordpress/870811.html

猜你在找的wordpress相关文章