用HTML5与css写一个漂亮的页脚出来
时间: 2023-11-12 08:06:40 浏览: 32
好的,下面是一个简单的HTML5和CSS样式,可以实现一个漂亮的页脚:
```html
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum euismod tincidunt. Proin ut velit sed dolor fermentum congue.</p>
</div>
<div class="col-md-6">
<h3>Contact Us</h3>
<p>123 Main Street<br>
New York, NY 10001<br>
Phone: 555-555-5555<br>
Email: info@example.com</p>
</div>
</div>
</div>
</footer>
```
```css
footer {
background-color: #f2f2f2;
padding: 50px 0;
color: #666;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col-md-6 {
width: 48%;
}
h3 {
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
p {
line-height: 24px;
}
@media (max-width: 768px) {
.col-md-6 {
width: 100%;
}
}
```
在这个例子中,我们使用了HTML5的`<footer>`标签来创建页脚,并使用CSS样式来定义页脚的外观和布局。我们使用了flexbox布局来实现两列的响应式布局,并使用了媒体查询来确保在较小的屏幕上正确地显示。您可以根据您的具体需求进行调整和修改。