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

html-css022

html css如何制作微信那样的顶部导航栏,文字在中间按钮在右边的,如图所示,第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>

1、新建一个html页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。