CSS综合案例3

CSS综合案例3

1. 案例展示

我们今天用CSS定位来做一个谷歌搜索框。

CSS综合案例3_第1张图片

2. 代码分析

CSS综合案例3_第2张图片

3. 代码演示

DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>谷歌搜索框title>
		<style>
			* {
				margin: auto;
				padding: 0;
				box-sizing: border-box;
			}
			.wrapper {
				width: 541px;
				height: 44px;
				border: 1px soild #ddd;
				box-shadow: 0 0 2px #cdc6c6;
				border-radius: 30px;
				position: relative;
				margin: 300px auto;
			}

			.search {
				position: absolute;
				left: 20px;
				top: 50%;
				transform: translateY(-50%);
			}

			input {
				width: 70%;
				outline: none;
				border: none;
				font-family: "Segoe UI", Arial, "Microsoft Yahei", sans-serif;
				font-size: 16px;
				font-weight: normal;
				position: absolute;
				left: 50px;
				top: 50%;
				transform: translateY(-50%);
			}

			.micro {
				position: absolute;
				right: 50px;
				top: 50%;
				transform: translateY(-50%);
			}

			.camera {
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%);
			}
		style>
	head>
	<body>
		<div class="wrapper">
			<img src="./imgs/search.png" alt="" class="search" />
			<input type="text " placeholder="在Google中搜索,或输入网址" />
			<img src="./imgs/micro.png" alt="" class="micro" />
			<img src="./imgs/camera.png" alt="" class="camera" />
		div>
	body>
html>

4. 图片资源

micro

search

camera

你可能感兴趣的:(CSS,css,前端)