响应式导航栏

全部代码：

 

 

分部说明：

 

1. 在body标签里，给个div标签，div标签里给个类名为“container”（响应式需要一个父级容器作为布局）

2.在类名为“container”里，给个无序列表ul标签，ul标签里有8个li标签，每个li标签里都打上导航栏文字

3.在head标签里，给个style标签，写样式

4.在style标签里，给个通配符*，外边距margin为0，内边距padding为0，列表属性list-style为none

 

5.给container设置样式，宽度width为750像素，高度height为30像素，外边距上下为0，左右为auto

6.给li设置样式，宽度width为93.75像素，背景颜色为浅绿色，浮动为左浮动

 

7.嵌套@media 设置彩色电脑屏幕screen  and 屏幕小于767像素时，container宽度width为100%

8.li标签宽度width为33.33%

 

响应式导航栏就完成了