以下是一个基本的CSS代码模板,用于设计网页,这个模板包括了一些常见的样式设置,如字体、颜色、边距、填充、边框等,你可以根据自己的需求进行修改和扩展。
/* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body Styles */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; line-height: 1.6; } /* Header Styles */ header { background-color: #333; color: #fff; padding: 20px; text-align: center; } /* Navigation Styles */ nav { background-color: #ddd; padding: 10px; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin-right: 10px; } /* Main Content Styles */ main { padding: 20px; margin: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* Footer Styles */ footer { background-color: #333; color: #fff; padding: 20px; text-align: center; position: fixed; bottom: 0; width: 100%; } /* Media Queries */ @media (max-width: 600px) { main { margin: 10px; } }
这个模板包括了一个基本的网页结构,包括页眉(header)、导航(nav)、主要内容(main)和页脚(footer),你可以根据自己的需求添加更多的样式和组件,这个模板还包含了一个媒体查询(Media Query),用于在屏幕宽度小于600px时调整主要内容的边距。
请注意,这只是一个基本的CSS代码模板,你可以根据自己的需求进行修改和扩展,还需要注意CSS的兼容性和最佳实践,以确保你的网页在各种浏览器和设备上都能正常显示。