【练习】搜狗搜索界面

最新推荐文章于 2022-04-10 18:39:07 发布

皮皮潇冲冲冲

最新推荐文章于 2022-04-10 18:39:07 发布

阅读量450

点赞数

分类专栏：前端练习项目文章标签： css html

本文链接：https://blog.csdn.net/weixin_46303867/article/details/106160291

版权

前端练习项目专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML代码

 <!DOCTYPE html>
      <html>
	<head>
		<meta charset="utf-8" />
		<title>搜狗</title>
		<link rel="stylesheet" type="text/css" href="css/sogou.css">
	</head>
	<body>
		<div class="sogou">
			<div class="linkdiv">
				<div class="divtop-nav">
					<ul>
						<li class="first-nav"><a href="" class="dhl">新闻</a></li>
						<li class="first-nav"><span>网页</span></li>
						<li class="first-nav"><a href="" class="dhl">微信</a></li>
						<li class="first-nav"><a href="" class="dhl">知乎</a></li>
						<li class="first-nav"><a href="" class="dhl">图片</a></li>
						<li class="first-nav"><a href="" class="dhl">视频</a></li>
						<li class="first-nav"><a href="" class="dhl">名医</a></li>
						<li class="first-nav"><a href="" class="dhl">英文</a></li>
						<li class="first-nav"><a href="" class="dhl">问问</a></li>
						<li class="first-nav"><a href="" class="dhl">学术</a></li>
						<li class="first-nav"><a href="" class="dhl">更多</a></li>
					</ul>
				</div>
				<div class="divtop-login">
					<a href="" class="btn">登录</a>
					<a href="" class="text">显示卡片</a>
					<span class="sp1"></span>
					<div class="yin">
						<a href="" class="tianqi"><span class="sp2">20°</span></a>
					</div>
					<div class="tianqilocal">
						<a href="" class="local">浙江 杭州</a>
					</div>
				</div>
			</div>
			<div class="gif">
				
				<a href="" class="gif"><img src="img/c6a3099e_MAC.gif"></a>
			</div>
			<div class="input">
				<form action="" method="post">
					<span class="text">
						<input type="text"  />
					</span>
					<span class="icon">
						<a href="" class="icon"></a>
					</span>
					<span class="submit">
						<input type="submit" value="搜狗搜索"/>
						
					</span>
					
				</form>
			<div class="icon">
				
			</div>
			
		</div>
		<!-- <div class="ul">
			<p class="ul">今日热词</p>
			<ul>
				<li class="ul">
					<em class="ul"></em>
					奥巴马批评特朗普
				</li>
				<li class="ul">ddd</li>
			</ul>
		</div> -->
	</body>
    </html>

css代码

    body,html{
	 font-size: 12px;
	 height: 110%;
    }
    body{
	margin: 0;
    }
    p{
	margin: 0;
	padding: 0;
    }
     ul{
	margin: 0;
	padding: 0;
    }
    ul li{
	margin: 0;
	padding: 0;
	list-style-type: none;
    }
    input[type="submit"]{
	padding: 0;
	margin: 0;
	background-color: rgb(248,248,248);
	border: 0;
	width: 100px;
	height: 100%;
	font-size: 16px;
	cursor: pointer;
    }
    input[type="text"]{
	padding: 0;
	margin: 11px 0;
	background-color: white;
	border: 0;
	width: 490px;
	height: 24px;
	outline: none;
	font-size: 16px;
    }
    input[type="text"]:link{
	
    }
    .linkdiv{
	height: 24px;
	padding: 11px 0px;
	line-height: 24px;
	
    }
     .divtop-nav{
	float: left;
	font-size: 13px;
	display: inline-block;
       }
    .divtop-login{
	position: absolute;
	top: 10px;
	right: 5px;
    }
    .yin{
	display: inline-block;
	max-height: 24px;
	float: right;
    }
    .tianqilocal{
	max-height:24px ;
	display: inline-block;
	float: right;
    }
    .gif{
	width: 512px;
	height: 200px;
	margin: 0 auto;
    }
    .input{
	border-radius: 3px;
	padding-left: 5px;
	width: 650px;
	height: 46px;
	margin: 0 auto;
	border: 1px solid #ababab;
    }
    .input:hover{
	border: 1px solid #000000;
    }
    .sousuo{
	width: 100px;
	height: 100%;
	float: right;
    }
     /* /* .ul{
	display: none;
	border: 0.5px solid #e8e8e8;
	border-top: 0;
	border-bottom: 0;
	width: 655px;
	min-height: 25px;
	margin: 0 auto;
    } 
    p.ul{
	width: 644px;
	display: inline-block;
	padding: 6px 0 0 10px;
	color: #999999;
	font-size: 12px;
    } */
    .first-nav span{
	font-weight: 700;
	color: #FF5A34;
    }
    .sp1{
	height: 14px;
	width: 1px;
	background: #e7e7e7;
	margin: 5px 20px 0px;
	clear: none;
	border: 0;
	float: right;
    }
     .sp2{
	margin-left: 20px;
	display: inline-block;
    }
    span.submit{
	float: right;
	width: 100px;
	height: 46px;
	display: inline-block;
    }
    span.text{
	float: left;
	width: 490px;
	height: 46px;
    }
    span.icon{
	float: left;
	width: 60px;
	height: 46px;
	display: inline-block;
    }
    p1{
	display: inline-block;
	text-align: center;
    }
    .gif img{
	display: inline-block;
	width: 512;
	height: 200px;
    }
    a{
	color: rgba(0,0,0,75);
	text-decoration: none;
    }
    a.text{
	float: right;
	margin-right: 15px;
	color: rgb(0,0,0,75);
    }
    a.tianqi{
	background-image: url(../img/天气.png);
	background-repeat: no-repeat;
    }
    a.btn{
	float: right;
	background-color: #FF5A34;
	padding: 0px 10px;
	display: inline-block;
	margin-right: 20px;
	color: white;
	border-radius: 4px;
    }
    a.local{
	margin: 0px 8px;
	display: inline-block;
    }
     a.tianqi img{
	display: inline-block;
	width: 20px;
	height: 20px;
    }
    a.gif{
	text-align: center;	
	display: inline-block;
    }
    a.sousuo{
	text-align: center;
	line-height: 46px;
	background-color: rgb(242,242,242);
	font-size: 16px;
    }
    a.icon{
	margin: 13px 20px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(../img/ico_fy.png);
	background-repeat: no-repeat;
	background-position: 3px 0px;
    }
    a.icon:hover{
	background-image: url(../img/ico_fy.png);
	background-repeat: no-repeat;
	background-position: 3px -60px;
    }
    ul{
	outline: none;
    }
    li{
	outline: none;
    }
     /* li.ul{
	font-size: 16px;
	width: 625px;
	height: 27px;
	line-height: 27px;
	padding: 0 15px;
	} */
	.first-nav{
		margin-left: 20px;
		float: left;
	}
	.first-nav:hover .sec-nav{
	display: block;
	}
	a.dhl{
	color: rgba(0,0,0,75);
	}
	a.dhl:hover{
	color: #ff5a34;
	}

皮皮潇冲冲冲

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【练习】搜狗搜索界面

HTML代码 <!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>搜狗</title> <link rel="stylesheet" type="text/css" href="css/sogou.css"></head><body> <div class="sogou"> <d
复制链接

扫一扫