如何设计一个html页面的导航栏在手机端自适应

html-css022

如何设计一个html页面的导航栏在手机端自适应,第1张

用以下代码开头：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">

使用百分比定义宽度，，

CSS代码可以适当使用：

@media only screen and (max-width:449px){

}

自动根据屏幕像素 调用不同的CSS代码。

如果你用a标签做，a标签有背景，就要设置display：block属性和float：left属性；还要定义宽度高度，最后别忘记用clear层清除浮动，基本的css为下面 .a{float:left:display:blockwidth:XXpxheight:XXpx} .clear{clear:both},用ul，li标签就类似，不过记得设置ul,li{margin:0pxpadding:0px}