ID与Class的选择之道：打造高效的网页开发流程

<div id="main-col" class="column">
<!-- 主栏内容 -->
</div>

<div id="side-col" class="column">
<!-- 侧栏内容 -->
</div>

.column {
float: left;
width: 70%; /* 主栏和侧栏的宽度比例 */
}

#main-col {
background-color: #f02121;
}

#side-col {
background-color: #0b52e1;
}

<div class="search-box">
<!-- 搜索框内容 -->
</div>

.search-box {
width: 200px;
height: 30px;
border: 1px solid #ccc;
padding: 5px;
}

<nav id="main-menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>

#main-menu {
background-color: #333;
color: #fff;
}

#main-menu ul {
list-style: none;
padding: 0;
}

#main-menu li {
display: inline-block;
margin-right: 10px;
}

#main-menu a {
text-decoration: none;
color: #fff;
}