写一个山东美食主页的页脚及其css代码
时间: 2024-03-10 17:47:58 浏览: 18
以下是一个简单的山东美食主页的页脚及其CSS代码示例:
HTML代码:
```html
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>关于我们</h3>
<p>我们是一家致力于推广山东美食文化的网站,提供最新、最全、最专业的山东美食资讯。</p>
</div>
<div class="col-md-6">
<h3>联系我们</h3>
<p>地址:山东省济南市历城区XX街道XX号</p>
<p>电话:0531-xxxxxxx</p>
<p>Email:contact@shandongfood.com</p>
</div>
</div>
</div>
</footer>
```
CSS代码:
```css
footer {
background-color: #f2f2f2;
padding: 40px 0;
color: #555;
}
footer h3 {
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
}
footer p {
font-size: 16px;
line-height: 24px;
}
footer .container {
max-width: 1200px;
margin: 0 auto;
}
footer .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col-md-6 {
width: 48%;
}
@media (max-width: 768px) {
footer .col-md-6 {
width: 100%;
}
}
```
上述代码实现了一个简单的山东美食主页的页脚,包括一个关于我们和联系我们的部分。CSS代码使用了基本的样式和响应式布局,使得在不同屏幕尺寸下页面都能够正常显示。