css如何使导航下面的那个图片自动填充屏幕宽度

html-css016

css如何使导航下面的那个图片自动填充屏幕宽度,第1张

要达到这种效果必须先知道这张图片是已那种形式导进去的,无外乎2种:

1.img标签导入,那么img外层如果没有浮动或者去限定宽度,默认就是填充整个屏幕的宽度,那么就可以设置img{width:100%}这句样式来让其填充满屏幕,记得高度不要设置,不然会让图片变形失真;

2.通过css里面的background-images的方式以背景的形式导进去,那么在html框架里面的图片展示标签必须是撑满屏幕宽度的,然后在样式里面通过background-size:contain让其填充满屏

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表,所以使用 <ul>和 <li>元素非常有意义:

<ul>

<li><a href="#home">主页</a></li>

<li><a href="#news">新闻</a></li>

<li><a href="#contact">联系</a></li>

<li><a href="#about">关于</a></li></ul>

从列表中删除边距和填充:

ul {

list-style-type: none margin: 0 padding: 0}

网站上一般都是利用css来做的。具体的做法:

1、将导航栏里面的几个条目都做成无序列表里面的项

2、利用css将列表项的list-style,float等等属性设置,使列表项横排排列。

3、设置链接的属性就可以了。

一般都是这样做的,利用图片或者flash的话,网页会变大一点,对于网速慢的人来说,不方便访问。所以在能利用css的地方就尽量避免用图片或者falsh