制作百度的静态页面

最新推荐文章于 2024-05-25 10:00:21 发布

Ljk_dwl

最新推荐文章于 2024-05-25 10:00:21 发布

阅读量317

点赞数

文章标签： elementui vue.js sass

本文链接：https://blog.csdn.net/Ljk_dwl/article/details/124908137

版权

关于html的代码段

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="baidu.css">
</head>
<body>
	<div class="first ">
		<div class="left">
			<a href="#">新闻</a>
			<a href="#">hao123</a>
			<a href="#">地图</a>
			<a href="#">直播</a>
			<a href="#">视频</a>
			<a href="#">贴吧</a>
			<a href="#">学术</a>
			<a href="#">更多</a>
	    </div>
	    <div class="right">
	    	<a href="#">设置</a>
	    	<a href="#" id="login">登录</a>
	    </div>
	</div>
	<div class="main">
	    <div class="juzhong">
		    <img src="baidu.jpg" alt="">
	    </div>
	    <div class="search">
	    	<div class="holder">
		        <input type="text" id="searchcontent"/>
		        <a href="#">百度一下</a>
		    </div>
	    </div>
	</div>
	<table>
		<tr>
			<td style="padding-left:14px;padding-top:3px;"><span style="color:#fe2d46;">百度热榜</span></td>
			<td style="width: 300px;"><a id="hhh">换一换</a></td>
		</tr>
		<tr>
			<td ><a href=""><span style="color:#fe2d46;"></span>&nbsp&nbsp致敬劳动者&nbsp&nbsp<span class="_new">新</span></a></td>
			<td><a href=""><span style="color:#9b9fac;">3</span>&nbsp&nbsp 方舱里的感动</a></td>
		</tr>
		<tr>
			<td><a href=""><span style="color:#ff6600">1</span>&nbsp&nbsp长沙楼房倒塌致23人被困39人失联</a></td>
			<td><a href=""><span style="color:#9b9fac;">4</span>&nbsp&nbsp多地小龙虾价格跳水价格逼近个位数</a></td>
		</tr>
		<tr>
			<td><a href=""><span style="color:#faa90e;">2</span>&nbsp&nbsp北京67例感染者详情：含学生外卖员&nbsp&nbsp<span class="_hot">热</span></a></td>
			<td><a href=""><span style="color:#9b9fac;">5</span>&nbsp&nbsp吴京ip属地显示泰国：在当地拍电影</a></td>
		</tr>

</table>

	<div class="foot">
		<a href="#">关于百度</a>
		<a href="#">about BaiDu</a>
		<a href="#">使用百度必读</a>
		<a href="#">帮助中心</a>
		<a href="#">京备10212222200</a>
	</div>
</body>
</html>

关于css的代码段

*{
	margin: 0;
	padding: 0;
}
.left{
	float: left;
	height: 40px;
}
.right{
	float: right;
	height: 40px;
}
.first{
	*zoom:1;
}
.first::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.left a{
	font: 13px/23px Arial,sans-serif;
	float: left;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.right a{
	font: 13px/23px Arial,sans-serif;
	float: right;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.nav a:hover{
	color: blue;
}
#login{
	background-color: #4E6EF2;
	color: white;
	border-radius: 5px;
}
.main{
	text-align: center;
}
.juzhong{
	text-align: center;
}
.juzhong img{
	width: 200px;
	height: 100px;
}
.search{
	text-align: center;
	width:100% ;
	height: 30px;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.foot a{
	padding-left: 150px;
	text-decoration: none;
	color: black;
}
.search{
	text-align: center;

}
.holder{
	display: inline-block;
}
#searchcontent{
	height: 36px;
	width: 500px;
	float: left;
	border-radius: 10px 0 0 10px;
	border-width: 1px;
	border-color: CEC7C4;
	border-right: 0px;
}
.search a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	height: 38px;
	line-height: 36px;
	text-align: center;
	border-radius: 0px 5px 5px 0px;
	font-family: "微软雅黑";
	cursor: pointer;
	background-color: #4E6EF2;
	color: white;
	float: left;
}
.search a:hover{
	background-color: blue;
}
._new{
	display: inline-block;
    background-color: #ff455b;
    width: 14px;
    height: 19px;
    color:#fff;
    padding:0 2px;
    border-radius: 5px;
}
table{
	text-align: center;
	margin: 0px auto;
	border-collapse: collapse;
	border:3px soolid black;
	text-decoration: none;
}
table a{text-decoration: none;
	color: black;
	}

制作出来的样式为

Ljk_dwl

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
制作百度的静态页面

关于html的代码段<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="baidu..
复制链接

扫一扫