Discuz模板DIY：[4]如何实现横排登陆

1、未修改之前，头文件布局，如图所示：

2、通过审查元素，找到文件，如图：

3、然后在header.htm（此时这个文件是你copy的原来模板中的文件，放到了你的模板common文件夹下）中找到相应的位置，如图：

4、我们通过审查元素可以看到，头部文件的位置，然后在header.htm找到，如图“

5、将其剪切复制到”y“的下面，如图：

6、查看效果，如图：

7、我们通过上面可以看出，我们需要会员信息，所以我们需要将会员信息文件header_userstatus.htm复制到common文件夹下，如图：

8、同理，我们对会员信息也进行审查元素，将我们不需要的信息删除，如图：

9、效果没有了头像，如图：

10、同理，将小人图标也对应删除，如图：

11、我们看到还是两行，怎么回事呢，再审查元素，我们发现有两套<p></p>嵌套，这样我们就删除一套，如图：

12、效果，如图：

13、如何将DIY图标也放到第一排，将header.htm的代码剪切复制header_userstatus.htm文件中如图位置，如图：

14、然后在，extend_common.css添加如下代码，

15、效果，如图，所示：

16、现在要修改，未登录时的效果，如图：

17、审查元素，如图：

18、登陆框代码，如图：

19、修改header_userstatus.htm文件，如图：

20、效果，如图：