??? ??? ?????? ????? ????? ??

??? ??? ??? ?? ?? ? ?? ???? ???? ???? ???? ?? ???? ??????. ? ?? ??? ??? ????? ??? ??? ?????? ????? ????? ?? ?? ?????. ? ????? ??? ??? ?????? ????? ????? ??? ???? ? ?? ???? ?? ??? ?????.

1. ??? ?? ??

??? ??? ??? ??(?: ?? ?? ?? ?? ??)? ?? ??? ???? ??? ? ?? CSS3? ??? ?????. ??? ??? ???? ??? ??? ?? ??? ????? ???? ?? ??? ? ????.

?? ?? ?? ??? ?? ?? ??? ?? ??? ?? ? ???? ????? ?????.

/* 針對手機(jī)設(shè)備的樣式 */
@media (max-width: 600px) {
  /* 修改網(wǎng)站布局和樣式 */
}

/* 針對平板電腦設(shè)備的樣式 */
@media (min-width: 601px) and (max-width: 1024px) {
  /* 修改網(wǎng)站布局和樣式 */
}

/* 針對桌面設(shè)備的樣式 */
@media (min-width: 1025px) {
  /* 修改網(wǎng)站布局和樣式 */
}

??? ??? ???? ??? ??? ?? ??? ?? ??? ???? ???? ? ???? ???? ? ????. ??? ??? ???? ??? ???? ??? ????.

2. ??? ???? ??

??? ????? ??? ??? ?? ??? ???? ???? ?? ???? ????? ? ???? ?? ??? ?? ???? ??? ? ????.

?? ?? ?? ?? ??? ?? ????? ?? ??? ?????.

<div class="navbar">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">產(chǎn)品</a></li>
    <li><a href="#">關(guān)于我們</a></li>
    <li><a href="#">聯(lián)系我們</a></li>
  </ul>
</div>

.navbar {
  width: 100%;
  background-color: #333;
  overflow: hidden;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.navbar li {
  float: left;
  width: 25%;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111;
}

? ???? ?? ??? ??? 100%? ???? ? ?? ??? ??? 25%? ?????. ?? ???? ?? ??? ??? ?????? ?? ???? ???? ???? ??? ???? ??? ?????.

3. ??? ?? ???? ??

??? ?? ????? ??? ? ??? ????? ?? ??? ? ?? CSS3? ? ?? ??? ?????. Flexbox ????? ???? ? ???? ??, ?? ? ??? ?? ??? ? ????.

?? ?? ?? ?? ??? ??? ?? ????? ???? ????? ?? ??? ?????.

<div class="container">
  <div class="sidebar">
    <!-- 側(cè)邊欄內(nèi)容 -->
  </div>
  <div class="content">
    <!-- 內(nèi)容區(qū)域內(nèi)容 -->
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  flex: 1;
  background-color: #eee;
  padding: 20px;
}

.content {
  flex: 2;
  background-color: #f5f5f5;
  padding: 20px;
}

? ???? ????? ??? ????? ??? ????? ? ???? ????. ??? ?? ????? ???? ??? ?? ????? ??? ??? ??? ???? ??? ????? ??? ? ????.

??

??? ??? ?????? ????? ????? ???? ??? ???? ? ?? ?? ??? ?? ? ????. ??? ??, ?? ????, ?? ?? ????? ???? ???? ??? ????? ?? ??? ? ????. ? ??? ??? ?? ??? ??? ??? ????? ????? ? ??? ??? ????.

? ??? ??? ??? ?????? ????? ????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!