如果你是一位網頁設計師，那么肯定會用到
<div>和 CSS。在Web開發中，
<div>是一個很有用的HTML元素。它允許您將頁面分成不同的部分并對它們進行樣式化。
在使用
<div>的時候，你能夠將網頁分成不同的區塊。這些區塊可以用CSS樣式來控制，從而實現各種不同的效果。這樣可以讓網頁更加美觀、易于維護。
下面是一個常見的使用
<div>和CSS的例子，通過Baidu搜索方式進行排版：
<!DOCTYPE html>
<html>
<head>
<title>Baidu搜索</title>
<style>
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 10px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
.logo {
width: 120px;
height: 30px;
background-image: url('https://www.baidu.com/img/pc_4c6c79db6b439b06f2deab5dcb46eab5.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.search-box {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 20px;
padding: 5px 10px;
margin-right: 10px;
}
input[type="text"] {
border: none;
margin-left: 5px;
font-size: 16px;
}
.search-btn {
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 20px;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}
.nav {
display: flex;
align-items: center;
background-color: #f5f5f5;
padding: 5px 20px;
border-bottom: 1px solid #ddd;
}
.nav-item {
margin-right: 20px;
font-size: 14px;
color: #333;
cursor: pointer;
}
.nav-item:hover {
color: #3385ff;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="search-box">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="百度一下，你就知道">
</div>
<button class="search-btn">搜索</button>
</div>
<div class="nav">
<div class="nav-item">網頁</div>
<div class="nav-item">圖片</div>
<div class="nav-item">視頻</div>
<div class="nav-item">新聞</div>
<div class="nav-item">更多></div>
</div>
</body>
</html>如上代碼便展示了一個簡單的百度搜索頁面。你可以嘗試對其中的CSS進行修改，來打造不同的樣式風格。祝你玩的開心。