1. 对齐
<1> margin水平对齐
<2> position左右对齐
<3> float左右对齐
2. 分类属性
cursor 指向某元素时显示的指针类型
display 设置是否和如何显示元素
3. 导航栏
<1>垂直导航栏
<2>水平导航栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <body> <ul> <li><a href="#">导航菜单1</a></li> <li><a href="#">导航菜单2</a></li> <li><a href="#">导航菜单3</a></li> <li><a href="#">导航菜单4</a></li> </ul> </body> </html>
*{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } li{ display: block; } a:link,a:visited{ text-decoration: none; background-color: burlywood; 100px; color: aliceblue; text-align: center; } a:hover,a:active{ background-color: chocolate; }
改成水平导航很简单, 将display改为inline即可