利用HTML CSS制作百度首页

最新推荐文章于 2024-07-11 14:41:43 发布

鱼知意

最新推荐文章于 2024-07-11 14:41:43 发布

阅读量889

点赞数 1

文章标签： html5 百度

本文链接：https://blog.csdn.net/qq_64985902/article/details/124074135

版权

本文介绍了一个网页的布局设计，包括三个主要部分A、B、C的详细CSS样式设置。A部分包含链接菜单，B部分展示了一个图片和搜索表单，C部分则显示了百度热搜新闻。网页使用了浮动布局，调整了元素的尺寸、颜色、边框和对齐方式，实现了内容的展示和交互功能。

摘要由CSDN通过智能技术生成

第一次，存在许多不足，有则改之，无则加勉。

谢谢大佬，能提出宝贵的意见！

/*CSS里面的*/
/* 本网页分为三大块A，B，C，分别是三大块*/
a:visited{
	color:black;
}
a:hover{
	color:blue;
}
a:link{
	text-decoration: none;
	/*祛除连接下划线*/
	margin:4.5px;
	/*内容间距*/
	padding:5px;
	font-size:14px;
	/*设置字体大小*/
		
}
#A{
	red solid;
	width:700;
	height:40px;
	margin-bottom:5px;
	padding:5px 5px 0px 5px;
}
#a1{
	blue solid;
	width:450px;
	height:35px;
	Content:100px;
	float:left
}
#a2{
    text-decoration: initial;
    font-size: 14px;
    color: black;
    float: left;
}
#a3{
    width: 34px;
    height: 16px;
    text-decoration: initial;
    color: white;
    background-color: #1f7aff;
    text-align: center;
	/*居中*/
    line-height: 20px;
    float: right;
	border-radius: 5px;
	/*直角变圆润*/
}
#a{
	blue solid;
	width:120px;
	height:35px;
	float:right
}
#B{
	red solid;
	width:700;
	height:210px;
	margin-bottom:5px;
	padding:5px 5px 0px 5px;
}
#b1{
	border:2px;
	width:450px;
	height:30px;
	border-radius: 5px;
	/*直角变圆润*/
	border-style: solid;
	border-color: royalblue;
}
#b2{
	width:90px;
	height:30px;
	border-radius: 5px;
	/*直角变圆润*/
	background-color: #1f7aff;
	border-style: solid;
	text-align: center;
	border-color: royalblue;
	color: white;
}
#C{
	width:520px;
	height:210px;
	margin-bottom:5px;
	
}
#c1{
	text-align: center;
	width: 100px;
	height: auto;
	margin-left:94%;
}
#i{
	float: left;
	/*向右移动*/
}

<!--js里面的-->

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Float </title>
	<link rel="stylesheet" type="text/css" href="css/new_file.css">
</head>
<body>
    <div id="A" margin-bottom:10px>
        <div id="a1">
			<a href="http://news.baidu.com/">新闻</a>
			<a href="https://www.hao123.com/?src=from_pc">hao123</a>
			<a href="https://map.baidu.com/@13050732.25,3717865.48,12z">地图</a>
			<a href="https://tieba.baidu.com/index.html">贴吧</a>
			<a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
			<a href="https://image.baidu.com/">图片</a>
			<a href="https://pan.baidu.com/?from=1026962h">网盘</a>
			<a href="https://www.baidu.com/more/">更多</a>
		</div>
        <div id="a"><!--style="margin-top:px;"距上边框-->
			<a id="a2" href="https://www.baidu.com/">设置</a>
			<a id="a3" href="">登录</a>
		</div>
    </div>
	
	<div id="B" ><!--left: 100px;为什么不能向右移动？-->
		<div style="position: relative;left: 550px;"><!--top: 0px;向下移动-->
			<a href="http://www.baidu.com">
			<img src="img/s.jpg" width="320" height="150">
		</div>
		<div style="position: relative;left: 480px;">
			<form action="http://www.baidu.com">
						<input id="b1">
						<input id="b2" value="百度一下">
			</form>
		</div>
	</div>
	<div id="C" >
		<div id="c1">百度热搜</div>
			<div id="i" style="position: relative;top: 15px;left: 480px;">
		                <a href="https://baijiahao.baidu.com/s?id=1728776397275729790&wfr=spider&for=pc">1.三部门发文规范网络直播营利行为</a>
			</div>
			<div id="i" style="position: relative;top: 15px;left: 480px;">
					<a href="https://baijiahao.baidu.com/s?id=1728784506667944977">2.五年来雄安的每一天都是新的</a>
			</div>
			<div id="i" style="position: relative;top: 25px;left: 500px;">
					<a href="https://baijiahao.baidu.com/s?id=1728889007513519790">3.上海疫情正处于快速上升阶段问题</a>
			</div>
			<div id="i" style="position: relative;top: 25px;left: 500px;">
					<a href="https://baijiahao.baidu.com/s?id=1728832515761448879">4.轿车坠湖 两工人用挖掘机接力救人</a>
			</div>
			<div id="i" style="position: relative;top: 35px;left: 500px;">
					<a href="https://baijiahao.baidu.com/s?id=1728881461692159743&wfr=spider&for=pc">5.新毒株XE传播速度比奥密克戎BA.</a>
			</div>
			<div id="i" style="position: relative;top: 35px;left: 500px;">
					<a href="https://baijiahao.baidu.com/s?id=1728830529485773612">6.上海浦西封控前夕：居民抓紧采购</a>
			</div>
			
		</div>
	</div>
</div>
</body>
</html>