30个HTML+CSS前端开发案例（完结篇）
由于篇幅限制，这里我们只展示其中的一些案例。
案例1：创建一个简单的导航栏
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the color of links on hover */
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>案例2：创建一个带有响应式图片和文字的响应式网页
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0px;
}
/* Create two equal columns that sits next to each other */
.column {
-ms-flex: 50%; /* IE10 */
flex: 50%;
padding: 5px;
}
.column img {
margin-top: 5px;
vertical-align: middle;
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="/w3images/team1.jpg" style="width:100%" alt="Team 1">
<h2>John Doe</h2>
<p>Architect</p>
</div>
<div class="column">
<img src="/w3images/team2.jpg" style="width:100%" alt="Team 2">
<h2>Jane Doe</h2>
<p>Designer</p>
</div>
<!-- Add more columns if you need -->
</div>
</body>
</html>这些案例展示了如何使用HTML和CSS创建基本的网页元素，如导航栏、图片展示、响应式布局等。通过这些案例，开发者可以学习到如何使用HTML和CSS构建Web页面的基本技能。
评论已关闭