[分享]css做一个页面

CSS是前端开发中的重要一环，它负责网页的样式与布局。通过CSS，我们可以让网页看起来更加美观、舒适，也方便用户的使用。body { fontfamily: Arial, sansserif; / 指...

CSS是前端开发中的重要一环，它负责网页的样式与布局。通过CSS，我们可以让网页看起来更加美观、舒适，也方便用户的使用。

body {
    font-family: Arial, sans-serif; /* 指定字体 */
    background-color: #fafafa; /* 指定背景色 */
}
#header {
    background-color: #333; /* 指定标题栏的背景色 */
    color: #fff; /* 指定标题栏文字颜色 */
    height: 80px; /* 指定标题栏高度 */
}
#logo {
    position: absolute; /* 使logo图片位置脱离文档流 */
    top: 10px; /* 指定logo图片距离容器顶部的距离 */
    left: 20px; /* 指定logo图片距离容器左侧的距离 */
}
#nav {
    display: flex; /* 将导航栏链接放在一行 */
    justify-content: center; /* 让导航栏链接居中 */
    align-items: center; /* 让导航栏链接垂直居中 */
    height: 100%; /* 让导航栏与标题栏高度相等 */
}
#nav a {
    color: #fff; /* 指定导航栏链接文字颜色 */
    text-decoration: none; /* 去掉链接下划线 */
    margin: 0 20px; /* 指定链接之间的距离 */
    font-size: 16px; /* 指定链接文字大小 */
}
#content {
    margin: 20px; /* 指定内容区域与边距的距离 */
}
h1 {
    font-size: 32px; /* 指定标题字体大小 */
    margin-bottom: 20px; /* 指定标题下面的距离 */
}
p {
    font-size: 20px; /* 指定段落字体大小 */
    line-height: 1.5; /* 指定段落行高 */
} 

以上是一个简单页面的CSS代码，其中有关于背景色、字体、布局以及样式美化等方面的设置。通过CSS的灵活运用，我们可以打造出更好看、更好用的网页，让用户的体验得到提升。