整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="10%,*">
<frame src="upper/one.php" name="logo">
<frameset cols="20%,*">
<frame src="upperleft/02.html" name="shuming" target="neirong">
<frame src="book/threecountries/01.html" name="neirong">
</frameset>
</frameset>
</html>
以上是html的框架,可以對頁面進行分割,分為上下[上部占10%,下半部分分為左右兩部分,左邊20%,右邊80%的寬度],也就是將整個頁面分為三個板塊,上面是網站信息和登錄的信息,下面左半部分是選擇菜單欄,右邊是顯示的部分,手機和電腦通用的.也可以根據自己的需要進行分類.
幾天發了幾個視頻，視頻標題跟本文章標題一樣，帶大家用五種方式實現了一道有關布局的面試題。現特此附上源碼。如果有想看整個內容介紹的，可以根據本標題或選擇關注本人，或搜索標題內容，選擇視頻也可以看到更詳細內容。
面試題的要求如下：
假設高度已知，請寫出三欄布局，其中左欄，右欄各為300px,中間自適應，要求用盡可能多的方式實現這個布局。
在此我用五種方式實現了這個題目的要求，我在視頻里面詳情介紹了。下面貼出整個實現源碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五種方式實現布局</title>
<style>
*{
padding:0;
margin:0
}
.layout div{
height:100px;
}
.layout{
margin-bottom:20px;
}
</style>
</head>
<body>
<!-- 第一種布局 浮動布局 -->
<section class="layout float">
<style>
.float .left{
float:left;
width:300px;
background-color: red;
}
.float .right{
float:right;
width:300px;
background-color: green;
}
.float .center{
background-color:yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>這是浮動布局</h1>
<p>這是浮動布局</p>
</div>
</article>
</section>
<!-- 第二種布局 絕對定位 父相子絕-->
<section class="layout absolute">
<style>
.absolute .left-center-right{
position: relative;
}
.absolute .left-center-right >div{
position: absolute;
}
.absolute .left{
width:300px;
left:0;
background-color: red;
}
.absolute .center{
left:300px;
right:300px;
background-color: yellow;
}
.absolute .right{
right:0;
width:300px;
background-color: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>這絕對定位布局</h1>
<p>這絕對定位布局</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 第三種布局 flexBox布局 --><section class="layout flex">
<style>
.flex{ margin-top:140px; }
.flex .left-center-right{ display: flex; }
.flex .left{ width:300px; background-color: red; }
.flex .center{ flex:1; background-color: yellow; }
.flex .right{ width:300px; background-color: green; }
</style>
<article class='left-center-right'>
<div class="left"></div>
<div class="center">
<h1>這flexBox布局</h1>
<p>這flexBox布局</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 這是第四種布局解決方案 表格 布局--><section class="layout table">
<style>
.table .left-center-right{ display: table; width:100%; height:100px; }
.table .left-center-right>div{ display: table-cell; }
.table .left{ width:300px; background-color: red; }.table .center{ width:auto; background-color: yellow; }
.table .right{ width:300px; background-color: green; }
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>這是表格布局解決方案</h1>
<p>這是表格布局解決方案</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 第五種解決方案 網格布局 --><section class="layout grid">
<style>
.grid .left-center-right{
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.grid .left{ background-color: red; }.grid .center{ background-color: yellow; }
.grid .right{ background-color: green; }
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>這是網格布局解決方案</h1>
<p>這是網格布局解決方案</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
附上最終效果圖
5自適應是現在主流的技術，導航欄菜單是最常見的一種，今天我們一起來學習一下它是如何使用HTML，CSS和JavaScript來構建響應式導航欄和漢堡菜單的。
這就是它的樣子，是不是很熟悉呢？
H5導航菜單
好的，那就先從HTML開始：
<header class=”header”>
<nav class=”navbar”>
<a href=”#” class=”nav-logo”>WebDev.</a>
<ul class=”nav-menu”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Services</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Blog</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>About</a>
</li>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>Contact</a>
</li>
</ul>
<div class=”hamburger”>
<span class=”bar”></span>
<span class=”bar”></span>
<span class=”bar”></span>
</div>
</nav>
</header>通過這些代碼，我們實現了：
以上就是我們需要的HTML代碼。
現在讓我們添加CSS樣式重置代碼
（此外，我們將導入所需的字體，并添加一些基本的CSS來重置所有的默認樣式。）
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap’);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: ‘Roboto’, sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}現在讓我們給每個元素逐個添加樣式：
header和navbar：
.header{
border-bottom: 1px solid #E2E8F0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
}hamburger樣式：
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}其他元素的基本樣式：
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
margin-left: 5rem;
}
.nav-link{
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}
.nav-link:hover{
color: #482ff7;
}
.nav-logo {
font-size: 2.1rem;
font-weight: 500;
color: #482ff7;
}完成這些之后，看起來應該是這樣的：
但是它不是響應式的，所以我們還需要添加媒體查詢css代碼。
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow:
0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
}這里媒體查詢就是通過設置position: fixed; left: -100%;來隱藏nav-menu。
此外，我們將hamburger設置為display: block;，所以現在可見。
我們還添加了一個額外的類.nav-menu.active，它在nav-menu上設置left: 0;。現在，到了添加javascript的時候了，以便在我們單擊漢堡菜單時，會在nav-menu上添加此active類。
添加JavaScript
const hamburger=document.querySelector(“.hamburger”);
const navMenu=document.querySelector(“.nav-menu”);
hamburger.addEventListener(“click”, mobileMenu);
function mobileMenu() {
hamburger.classList.toggle(“active”);
navMenu.classList.toggle(“active”);
}此處的函數mobileMenu()在hamburger和nav-menu上也添加了一個active類，從而打開mobile menu。單擊hamburger時，我們可以使用hamburger上的active類來創建X動畫。現在就開始做吧。
// Inside the Media Query.
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}現在看起來應該是這樣的：
但是有一個問題，當我們單擊鏈接時，漢堡菜單不會關閉。現在讓我們解決一下這個問題。
const navLink=document.querySelectorAll(“.nav-link”);
navLink.forEach(n=> n.addEventListener(“click”, closeMenu));
function closeMenu() {
hamburger.classList.remove(“active”);
navMenu.classList.remove(“active”);
}closeMenu()函數從nav-menu和hamburger中刪除active類，從而關閉mobile menu。
H5導航菜單就是這樣，實現了用HTML，CSS和javascript構建一個響應式的導航欄菜單。希望你喜歡并分享這篇文章。感謝大家的閱讀。
更多干貨等著你~ 點贊、分享，關注哦
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
