微信小程序第三次作业（模仿制作百度页面）

最新推荐文章于 2022-10-22 16:38:03 发布

Mae_strive

最新推荐文章于 2022-10-22 16:38:03 发布

阅读量299

点赞数 7

分类专栏：前端(h5+css+js+jq) 文章标签： css html html5 百度

本文链接：https://blog.csdn.net/weixin_51799151/article/details/117511055

版权

前端(h5+css+js+jq) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第一次模仿制作百度页面，感觉有一点难，相似度也不是很高哈哈哈哈

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>百度一下，你就知道</title>
		<!-- 链接式 -->
		<link rel="stylesheet" href="./css/百度.css">
	</head>
	<body>
		<div class="top">&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">直播</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">学术</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf">更多</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" class="lf"><span class="sz">设置</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="#" target="_blank" ><span class="dl">登录</span></a>
		</div>
		<div align="center"><img src="img/baidu.jpg" width="300" class="baidu"></div>
		<form action="https://www.baidu.com/" method="get"><div align="center" ><input type="text" class="frame"><input type="submit" class="click" 
		value="百度一下"></div></form>
	</body>
</html>

CSS代码：

.top {
	font-family: "microsoft yahei";
	font-size: 13px;
	line-height: 40px;
}

a {
	/* 将超链接标签取消下划线 */
	text-decoration: none;
	color: black;
}
/*设置*/
.sz {
	position: absolute;
 	right: 110px;
}
/*登录*/
.dl {
	position: absolute;
	right: 40px;
	background-color: #3388FF;
	width: 50px;
	text-align: center;
	color: #FFFFFF;
}

.frame {
	width: 540px;
	height: 36px;
	margin-top: 20px;
	font-size: 20px;
	border-width: 1px;
 /* 背景图片*/
	background-image: url(../img/QQ图片20210603092423.png);  
	 background-repeat: no-repeat; 
	 background-position:right;
}

.click {
	height: 36px;
	width: 100px;
	background-color: #3388FF;
	border-width: 0px;
	font-size: 15px;
	color: white;
}

成品：

Mae_strive

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
微信小程序第三次作业（模仿制作百度页面）

第一次模仿制作百度页面，感觉有一点难，相似度也不是很高哈哈哈哈HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>百度一下，你就知道</title>  <link rel="stylesheet" href="./css/百度.css"> </head> <
复制链接

扫一扫