京東移動端首頁（六）
阿新 • • 發佈：2022-04-01
做如下這個效果：
這兩個使用before屬性加上content來設定。
效果如下：
<!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,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<!-- 引入css初始化檔案 -->
<link rel="stylesheet" href="./CSS/normalize.css">
<!-- 引入首頁的css -->
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
<!-- 頂部 -->
<header class="app">
<ul>
<li>
<img src="./images/5ac9d730N04e6d766.png" alt="">
</li>
<li>
<img src="./images/logo.png" alt="">
</li>
<li>開啟京東App，購物更輕鬆</li>
<li>立即開啟</li>
</ul>
</header>
<!-- 搜尋 -->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="jd-icon"></div>
</div>
<div class="search-logo">登入</div>
</div>
</body>
</html>
body { width: 100%; min-width: 320px; max-width: 640px; /* body居中 */ margin: 0 auto; /* 移動端字型14px */ font-size:14px; /* 設定字型型別 */ font-family: -apple-system, Helvetica, sans-serif; /* 設定行高 */ line-height: 1.5; } /* 因為子元素是浮動的，父元素此時會高度塌陷，所以要設定一下高度 */ .app { height: 44px; } .app ul li { height: 45px; background-color: #333333; float: left; list-style-type: none; color: #fff; } /* 去掉ul的內外邊距 */ .app ul { margin: 0; padding: 0; /* 所有內容垂直居中（包括圖片、文字） */ line-height: 45px; text-align: center; } /* 子元素選擇器 設定寬度 */ .app ul li:nth-child(1){ width: 8%; } .app ul li:nth-child(1) img { width: 10px; } .app ul li:nth-child(2) { width: 10%; } .app ul li:nth-child(2) img { width: 30px; /* 圖片經常要和文字垂直居中對齊，所以經常使用vertical-align屬性來進行對齊 */ vertical-align: middle; } .app ul li:nth-child(3) { width: 57%; } .app ul li:nth-child(4) { background-color: #F63516; width: 25%; } /* 搜尋 */ .search-wrap { position: relative; overflow: hidden; border: 1px solid #ccc; } .search-btn { position: absolute; top: 0; left: 0; background-color: #C82519; width: 40px; height: 44px; } .search-btn::before { content: ''; /* 一定要設定display:block，因為before預設為行內樣式，設定高度和寬度不會生效的 */ display: block; width: 20px; height: 18px; background:url(../images/s-btn.png) no-repeat; background-size: 20px 18px; /* margin: 14px 0 0 15px; */ /* 我感覺這樣更加好 */ margin: 10px; } .search-logo { position: absolute; top: 0; right: 0; background-color: purple; width: 40px; height: 44px; color: #fff; line-height: 44px; text-align: center; } .search { position: relative; height: 30px; background-color: skyblue; /* 通過設定兩邊為絕對定位，然後中間設定margin是中間的搜尋欄是響應式的 */ border-radius: 15px; margin-top: 7px; margin-left: 50px; margin-right: 50px; } .jd-icon { width: 20px; height: 15px; position: absolute; top: 8px; left: 13px; background-color: pink; background: url(../images/jd.png) no-repeat; background-size: 20px 15px; } .jd-icon::after { content: ''; display: block; width: 1px; height: 15px; margin-left: 30px; background-color: #DEDEDE; }