/*CSS模板*/ body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .header { background-color: #428bca; color: #fff; text-align: center; padding: 20px; } .container { width: 80%; margin: 0 auto; } .content { background-color: #fff; padding: 20px; margin-bottom: 20px; } .footer { background-color: #428bca; color: #fff; text-align: center; padding: 20px; }
在这个模板中,大家设置body元素的背景颜色,字体等基础样式,并使用了header、container、content和footer四个类来组织网页的结构和样式。
header和footer使用了相同的样式,都是背景颜色为#428bca,字体颜色为白色,使用了padding属性来设置内边距。
container则使用了margin属性来设置宽度为80%,并使用了margin属性来使其居中。这是一个常用的技巧,使得网页在不同屏幕尺寸下都能够正常显示。
content则是网页主要内容区域,使用了白底黑字的颜色搭配,使得网页更易读。在实际开发中,大家可以根据需要进行修改。
通过使用CSS模板,在网页制作中大家可以大大提高效率,减少重复的样式编写。同时,也可以更加专注于网页结构的设计和页面逻辑的实现。