body { background-color:lightpink; /*text-align:center; */ } section { width:960px; margin:10px auto; text-align:left; } div { display:inline-block; width:20px; height:20px; /*background-color:black; */ } #red { background-color:red; } div > span { display:inline-block; width:8px; height:8px; background-color:white; /*text-align:center; */ margin:6px; display:none; } #red > span { display:block; } #green { background-color:green; } #purple { background-color:purple; } #black { background-color:black; } nav { width:960px; height:30px; margin:10px auto; background-color:red; border:1px solid white; box-shadow:0 0 10px white; } ul { margin:0; padding:0; /*background-color:black; */ display:flex; justify-content:space-around; /*box-sizing:border-box; */ } li { list-style:none; line-height:30px; text-align:center; display:inline-block; width:150px; border-left:1px solid white; } ul li:nth-child(1) { border:none; } li a { text-decoration:none; color:white; }
使用简单,易理解,直接复制可用