css简易网站代码 |css3 图片 垂直居中

/*设置全局样式*/
body {
margin: 0;
padding: 0;
font-family: 宋体, sans-serif;
}
/*制作导航栏*/
.nav {
background-color: #333;
color: #fff;
padding: 20px;
}
.nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
/*主要内容区*/
.main {
width: 80%;
margin: 0 auto;
}
/*制作页脚*/
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.footer p {
margin: 0;
}

以上代码中，大家设置了全局样式，将body的边距和内边距都设为0，并设置了默认的字体。接下来，大家制作了导航栏，设置了背景颜色和文字颜色，并把链接的文本颜色也改为白色。此外，大家还通过设置margin-right来给链接之间添加了一定的距离。

接着，大家设置了主要内容区的宽度为80%，并水平居中显示。最后完成了页脚的设计，设置了背景颜色和字体颜色，并将p标签的margin设为0，以取消默认的上下边距。

CSS样式可以帮助大家轻松地美化网站，增加用户体验，提高网站质量。同时，大家也应该注意合理使用CSS样式，使网站加载速度更快，更加流畅。