Question

html css如何制作微信那样的顶部导航栏，文字在中间按钮在右边的，如图所示

html css如何制作微信那样的顶部导航栏，文字在中间按钮在右边的，如图所示

Answer 1

答：从外型结构上来看，分析得出如下结论 。
1、主体布局背景色为黑色。
2、内容里又包含上下两行文字与图片。
3、内容顶部一行不规则，可用绝对定位或都浮动布局。
4、内容底部有个文字居中，和一个加号图片居右。
因此，得出如下。
CSS样式你自己写，我只给你搭框架。
<div class="wechat_head">
<div class="wechat_head_top">
<ul>
<li>....</li>
<li>中国移动</li>
</ul>
<ul>

<li>4G</li>
</ul>
<ul>

<li>上午12：00</li>
</ul>
<ul>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
<div class="wechat_head_buttom">
<span>微信</span>
<img src="">
</div>
</div>