一个谷歌界面

最新推荐文章于 2024-08-26 08:25:18 发布

michaelxuzhi___

最新推荐文章于 2024-08-26 08:25:18 发布

阅读量157

点赞数

分类专栏：静态页面 JS 文章标签： js html 前端静态页面

本文链接：https://blog.csdn.net/michaelxuzhi___/article/details/98050395

版权

JS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

静态页面

2 篇文章 0 订阅

订阅专栏

花了点小时间，把学的盒子，float浮动给运用一下。

先上图：背景图是网上瞎找的，如果图片原作者不愿意我使用，请告诉我！

<!-- 大包含 -->
<div style="width:100%;height:100%;">
        <!-- 顶部 -->
		<div class="header">
            <!-- 左边小字 -->
			<div class="left-words">
				<div class="about">About</div>
				<div class="store">Stores</div>
			</div>
			<!-- 右边小字 -->
			<div class="right-elements">
				<div class="Gmail">Gmail</div>
				<div class="Images">Images</div>
                <!-- 选项+头像 -->
				<div class="right-set">
					<div class="setting"><img src="../images/选项.png" alt="setting"/></div>
					<div class="head-pic"><img style="transform: scale(1);border-radius: 50%;" src="../images/2.png" alt="更多" /></div>
				</div>
			</div>
		</div>
        <!-- 中间logo+搜索栏 -->
		<div class="content">
			<div class="logo"><img style="transform: scale(1.3);" src="../images/google.png" alt="google" /></div>
            <!-- 搜索栏+小话筒 -->
			<div class="search-band">
				<span><img src="http://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png" alt="话筒" title="假话筒你也信？" /></span>
				<input type="text" value="搜索..." id="search-thing" />
			</div>
		</div>
        
        <!-- 搜索按钮+扩展按钮 -->
		<div class="content-2">
			<a class="myButton" href="" style="float: left;"  onclick="y()" target="_blank" id="jumpTo">Google Search</a>
			<a class="myButton">I'm Feeling Lucky</a>
		</div>

		<!-- 底部水印 -->
		<div class="footer">
			<span>Designed By Michael Xu</span>
		</div>
	</div>

样式如下：

body .header{
			width: 100%;
			height: 30px;
			margin-top: 16px;
		}
		.header>.left-words{
			margin-top: 7px;
			margin-left: 10px; 
			float:left;
		}
		.about,.store{
			font-size: 13px;
			padding-left: 16px;
			height: 16px;
			font-family: arial,sans-serif;
			float: left;
		}
		.header>.right-elements{
			height: 30px;
			padding: 0 30px;
			float: right;
		}
		.right-elements>.Gmail,.Images{
			height: 24px;
			margin-top: 7px;
			padding-right: 15px; 
			font-size: 13px;
			font-family: arial,sans-serif;
			float: left;
		}
		.right-elements>.right-set{
			height: 30px;
			width: 75px;
			float: left;
		}
		.right-elements>.right-set>.setting{
			margin-top: 5px;
			margin-right: 15px;
			float: left;
		}
		.right-elements>.right-set>.head-pic{
			float: left;
		
		}
		.content{
			width: 100%;
			margin-top: 109px;
			text-align: center;
		}
		.content>.search-band{
			margin:0 auto;
			margin-top: 40px;
			width: 584px;
			height: 46px;
			border: 1px solid;
			border-radius: 30px;
		}
		.search-band>input{
			font-size: 20px;
			font-weight: bold;
			width: 514px;
			height: 46px;
			background-color: transparent;
		    border: none;
		    margin: 0 auto;
		    padding: 0;
		    color: rgba(0,0,0,.87);
		    word-wrap: break-word;
		    outline: none;
		    display: flex;
		    flex: 100%;
		    -webkit-tap-highlight-color: transparent;
		}
		.search-band>span{
			transform: scale(0.6);
			float: right;
		}
		.content-2{
			width: 320px;
			margin: 50px auto;
		}
		.myButton {
            /*在GitHub*/
		}
		.footer{
            /*底部居中在GitHub注释里*/
			position: absolute;
		    bottom: 0;
		    right:0;
		}
		.footer>span{
			font-size: 16px;
			font-family: arial,sans-serif;
		}

写了个小跳转：

function y () {
			var tem = document.getElementById("search-thing").value.toString();
			var jump = 'https://www.baidu.com/s?wd='+tem+'&rsv_spt=1&rsv_iqid=0xc296b30c000124f8&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&oq=1&inputT=739&rsv_t=4972FkHlj3ZweeSBcoMeGm1eeWx9mZdl41Dfigbsl1La9qJHdEBeZDw4f0U%2BoiAqv%2FqC&rsv_pq=dbf9f6bb00014438&rsv_sug3=5&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_sug4=739';
			document.getElementById("jumpTo").href = jump ; 
		}