帮我把html和css分开
时间: 2023-09-20 10:08:11 浏览: 37
好的,以下是将HTML和CSS分离的示例代码:
HTML代码:
```
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Contact Us</h3>
<p>Address: XXX Street, XXXX</p>
<p>Phone: XXX-XXXX-XXXX</p>
<p>Email: XXX@XXX.com</p>
</div>
<div class="col-md-4">
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>Follow Us</h3>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
```
CSS代码:
```
footer {
background-color: #000000;
color: #ffffff;
padding: 20px;
}
footer h3 {
font-size: 1.5rem;
font-weight: bold;
}
footer p {
font-size: 1rem;
margin-bottom: 10px;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
}
footer ul li {
margin-bottom: 10px;
}
footer ul li a {
color: #ffffff;
text-decoration: none;
}
.social-icons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.social-icons li {
margin-right: 10px;
}
.social-icons li:last-child {
margin-right: 0;
}
.social-icons a {
color: #ffffff;
text-decoration: none;
font-size: 1.5rem;
}
```
您可以将CSS代码保存到一个独立的样式文件中,然后在HTML文件中引用,例如:
```
<head>
<link rel="stylesheet" href="style.css">
</head>
```
这样,您就可以将HTML和CSS分离,方便管理和维护。