练习：静态网页

最新推荐文章于 2022-10-28 16:01:20 发布

褚哲希

最新推荐文章于 2022-10-28 16:01:20 发布

阅读量506

点赞数 1

分类专栏：前端学习文章标签： linq html javascript

本文链接：https://blog.csdn.net/m0_51996043/article/details/122953255

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/news.css"/>
	</head>
	<body>
		<!-- 顶部logo 广告 -->
		<div class="top_box">
			<!-- logo -->
			<div class="top_box_left">
				<img src="img/logo.png" />
			</div>
			<!-- 广告 -->
			<div class="top_box_center">
				<img src="img/advert.jpg" />
			</div>
			<!-- 登录 -->
			<div class="top_box_right">
				<input type="button" value="登&nbsp;&nbsp;录" class="login_btn"/>
			</div>
			<!-- 清除浮动 -->
			<div style="clear: left;"></div>
		</div>
		<!-- 顶部结束 -->
		
		<!-- 中间区域 -->
		<div class="middle_box">
			<!-- 中间的左边：导航栏 -->
			<div class="middle_box_left">
				<div class="navigation_first">
					<a href="" class="navigation_btn_first">最新新闻</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">新闻快报</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">国内新闻</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">国际新闻</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">人文风景</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">科技创新</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">创业俱乐部</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">区块链</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">互联网</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">二手房</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">汽车资讯</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">上市新车</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">用车小百科</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">旅游攻略</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">体育视界</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">财经股票</a>
				</div>
			    <div class="navigation">
					<a href="" class="navigation_btn">美食天地</a>
				</div>
				<div class="navigation">
					<a href="" class="navigation_btn">教育公益</a>
				</div>
			</div>
			
			<!-- 中间的中间：文章 -->
			<div class="middle_box_center">
				<!-- 最新发布 -->
				<div class="middle_box_center_top">
					<div class="publish">
						最新发布
					</div>
				</div>
				
				<!-- 文章一 -->
				<div class="article1">
					<!-- 文章一标题 -->
					<div class="article1_title">
						文章标题
					</div>
					<!-- 文章一内容 -->
					<div class="article1_content">
						<div class="article1_date">
							发布于 2020-12-21
						</div>
						<!-- 文章详情 -->
						<div class="article1_detail">
							文章摘要……
						</div>
						<!-- 互联网 -->
						<div class="article1_inter">
							互联网
						</div>
						<!-- 阅读 -->
						<div class="article1_read">
							阅读（908）
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>
					<!-- 文章一图片 -->
					<div class="article1_picture">
						<img src="img/c7y2lxc4ww6kelwdfz.jpg" class="article1_p1">
					</div>
					<!-- 清除浮动 -->
					<div style="clear: left;"></div>
				</div>
					
				
				<!-- 文章二 -->
				<div class="article1">
					<!-- 文章标题 -->
					<div class="article1_title">
						腾讯云
					</div>
					<!-- 文章2内容 -->
					<div class="article1_content">
						<div class="article1_date">
							发布于 2020-12-21
						</div>
						<!-- 文章详情 -->
						<div class="article1_detail">
							腾讯云11.11云上盛惠 ，精选热门产品助力上云，云服务器首年88元起，买的越多返的越多，最高返5000元
						</div>
						<!-- 互联网 -->
						<div class="article1_inter">
							互联网
						</div>
						<!-- 阅读 -->
						<div class="article1_read">
							阅读（908）
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>
					<!-- 文章2图片 -->
					<div class="article1_picture">
						<img src="img/cb0wihpicadc7i4hf6.jpg" class="article1_p1">
					</div>
					<!-- 清除浮动 -->
					<div style="clear: left;"></div>
				</div>
		
			</div>
			
			
			<!-- 中间的右边：其他 -->
			<div class="middle_box_right">
				<!-- 搜索框 -->
				<div class="search">
					<!-- 输入框 -->
					<div class="search_left">
						<input type="text" value="请输入关键词" class="in"/>
					</div>
					<!-- 搜索按钮 -->
					<div class="search_right">
						<input type="submit" value="搜索" class="search_btn"/>
					</div>
					<!-- 清除浮动 -->
					<div style="clear: left;"></div>
				</div>
				<!-- 活动广告 -->
				<div class="ad">
					<img src="img/ay.jpg" >
				</div>
				
				<!-- 推荐文章 -->
				<div class="recommend">
					<!-- 推荐文章标题 -->
					<div class="recommend_title">
						<div class="publish">
							推荐文章
						</div>
					</div>
					<!-- 推荐一 -->
					<div class="recommend1">
						<!-- 文章 -->
						<div class="recommend1_left">
							<!-- 文章标题 -->
							<div class="recommend1_title">
								文章标题
							</div>
							<!-- 时间 -->
							<div class="recommend1_date">
								2020-12-21
							</div>
						</div>
						<!-- 图片 -->
						<div class="recommend1_right">
							<img src="img/c7y2lxc4ww6kelwdfz.jpg" class="recommend1_p">
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>
					
					<!-- 推荐二 -->
					<div class="recommend1">
						<!-- 文章 -->
						<div class="recommend1_left">
							<!-- 文章标题 -->
							<div class="recommend1_title">
								【腾讯云】12.11云上盛惠，云产品限……
							</div>
							<!-- 时间 -->
							<div class="recommend1_date">
								2020-11-04
							</div>
						</div>
						<!-- 图片 -->
						<div class="recommend1_right">
							<img src="img/cb0wihpicadc7i4hf6.jpg" class="recommend1_p">
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>
				</div>
				
				<!-- 特惠广告 -->
				<div id="ad">
					<img src="img/aliyun.jpg" class="ad_p" >
				</div>
				
				<!-- 点击最多的文章 -->
				<div class="recommend1">
					<!-- 推荐文章标题 -->
					<div class="recommend_title">
						<div class="publish1">
							点击最多的文章
						</div>
					</div>
					<!-- 推荐一 -->
					<div class="recommend1">
						<!-- 文章 -->
						<div class="recommend1_left">
							<!-- 文章标题 -->
							<div class="recommend1_title">
								gfast流程介绍
							</div>
							<!-- 时间 -->
							<div class="recommend1_date">
								2020-12-21
							</div>
						</div>
						<!-- 图片 -->
						<div class="recommend1_right">
							<img src="img/c7y2lxc4ww6kelwdfz.jpg" class="recommend1_p">
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>
					<!-- 推荐二 -->
					<div class="recommend1">
						<!-- 文章 -->
						<div class="recommend1_left">
							<!-- 文章标题 -->
							<div class="recommend1_title">
								美国称只要不涉及5G，将允许更多企业供货……
							</div>
							<!-- 时间 -->
							<div class="recommend1_date">
								2020-10-30
							</div>
						</div>
						<!-- 图片 -->
						<div class="recommend1_right">
							<img src="img/c6q2we8re5mcjaxyxx.jpg" class="recommend1_p">
						</div>
						<!-- 清除浮动 -->
						<div style="clear: left;"></div>
					</div>	
				</div>
			</div>
			<!-- 清除浮动 -->
			<div style="clear: left;"></div>
		</div>
		
		<!-- 底部友情链接 -->
		<div class="under_box">
			<!-- 友情链接 -->
			<div class="friend_link">
				友情链接
			</div>
			<!-- 链接内容 -->
			<div class="linking">
				<a href="" style="font-size: 20px; color: #000000;">百度</a>
				<a href="" style="font-size: 20px; color: #000000;">新浪</a>
				<a href="" style="font-size: 20px; color: #000000;">腾讯</a>
				<a href="" style="font-size: 20px; color: #000000;">淘宝</a>
			</div>
		</div>
		
		<!-- 底部声明 -->
		<p align="center">&reg;2021 今日头条 京公网安备 11000002002023号</p>
		<p align="center">联系电话：400-140-2108</p>
		<p align="center">公司名称：北京字节跳动科技有限公司     管理员登录</p>
	</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}
body{
	background-color: #F4F4F4;
}

/* 顶部 */
.top_box{
	width: 1200px;
	background-color: white;
	margin: auto;
	/* height: 90px;  用来测试 */ 
}
.top_box_left,.top_box_center,.top_box_right{
	float: left;
	height: 90px;
}
.top_box_left{
	width: 200px;
}
.top_box_center{
	width: 800px;
}
.top_box_right{
	width: 200px;
	text-align: center;
	 line-height: 90px; /* 把整个div当做一行,行高为90,行内的内容默认垂直居中，主要块级标签不能这样用 */
}
/* 登录按钮 */
.login_btn{
	background-color: #ED4040;
	color: white;
	border: 0px; /* 去除边框 */
	font-size: 15px;
	padding: 10px;
	font-weight: 300px;
	border-radius: 10px;
}



/* 中间 */
.middle_box{
	width: 1200px;
	background-color: white;
	margin: auto;
	margin-top: 10px;
}
.middle_box_left,.middle_box_center,.middle_box_right{
	float: left;
}

/* 左边导航栏 */
.middle_box_left{
	width: 200px;
	text-align: center;
}
.navigation_first,.navigation{
	padding: 20px;
}
/* 普通导航栏内容 */
.navigation{
	background-color: white;
}
.navigation_btn{
	color: black;
	text-decoration:none;
}
.navigation:hover{
	background-color: #ED4040;
	border-radius: 5px;
}
.navigation_btn:hover{
	color: white;
}
/* 最新推荐 */
.navigation_first{
	color: white;
	background-color: #ED4040;
	border-radius: 5px;
}
.navigation_btn_first{
	color: white;
	text-decoration:none;
}


/* 中间 */
.middle_box_center{
	width: 681px;
	
	background-color: white;
}
/* 最新发布 */
.middle_box_center_top{
	width: 681px;
	height: 60px;
	background-color: white;
	border: white;
	border-bottom-color: lightgrey;
	border-bottom-width: 0.5px; 
	border-style:solid;
}
.publish{
	height: 40px;
	width: 100px;
	color: #000000;
	font-size: 20px;
	padding-left: 5px;
	padding-top: 15px;
	text-align: center;
	border: white;
	border-bottom-color: #ED4040;
	border-width: 3px;
    border-style: solid;
}

/* 文章一 */
.article1{
	width: 671px;
	background-color: white;
	padding-left: 10px;
	border: white;
	border-bottom-color: lightgrey;
	border-bottom-width: 0.5px; 
	border-style:solid;
}
/* 文章一标题 */
.article1_title{
	width: 671px;
	height: 40px;
	font-size: 25px;
	padding-left: 10px;
	padding-top: 15px;
}
/* 文章一内容 */
.article1_content,.article1_picture,.article1_inter,.article1_read{
	float: left;
}
.article1_content,.article1_picture{
	float: left;
}
.article1_content{
	width: 300;
}
/* 日期 */
.article1_date{
	font-size: 15px;
	color: grey;
	height: 25px;
	padding: 5px 10px;
}
/* 摘要 */
.article1_detail{
	width: 200px;
	font-size: 20px;
	padding: 5px 10px;
}
/* 互联网 */
.article1_inter{
	width: 45px;
	font-size: 15px;
	color: white;
	background-color: #ED4040;
	padding: 5px 10px;
	margin: 15px 10px;
}
/* 阅读数量 */
.article1_read{
	color: grey;
	font-size: 15px;
	padding: 5px 10px;
	margin: 15px 10px;
}
/* 文章一图片 */
.article1_picture{
	width: 300px;
	height: 200px;
	margin-left: 150px;
}
.article1_p1{
	width: 300px;
	height: 200px;
	padding: 0px;
}


/* 中间右边 */
.middle_box_right{
	float: left;
	width: 319px;
}
/* 搜索框 */
.search{
	width: 269px;
	height: 40px;
	padding: 25px;
	/* background-color: #000000; */
}
.search_left,.search_right{
	float: left;
}
/* 搜索栏 */
.in{
	width: 210px;
	height: 26px;
	border: #D3D3D3 1.8px solid;
	outline: none; /* 去除浏览器默认点击时的边框 */
	font-size: 15px;
	color: #D3D3D3;
	padding: 3px;
}
/* 搜索按钮 */
.search_btn{
	width: 45px;
	height: 35px;
	outline: none;
	border: none;
	color: white;
	background-color: #ED4040;
}

/* 活动广告 */

/* 推荐文章 */
/* 标题部分见最新发布 */
.recommend{
	border: white;
	border-bottom-color: lightgrey;
	border-bottom-width: 0.5px; 
	border-style:solid;
}
.recommend_title{
	width: 315px;
	height: 60px;
	background-color: white;
	border: white;
	border-bottom-color: lightgrey;
	border-bottom-width: 0.5px; 
	border-style:solid;
}

/* 推荐标题 */
.recommend1_left,.recommend1_right{
	float: left;
}
/* 文字内容 */
.recommend1_left{
	width: 200px;
	height: 140px;
}
/* 标题 */
.recommend1_title{
	font-size: 16px;
	padding-left: 10px ;
	padding-top: 20px;
	/* padding-bottom: 5px; */
}
/* 推荐时间 */
.recommend1_date{
	color: gray;
	font-size: 8px;
	padding: 5px 10px;
}
/* 图片 */
.recommend1_p{
	width: 100px;
	height: 80px;
	padding-top: 20px;
}

/* 广告图片 */
.ad_p{
	width: 319px;
	height: 200px;
}

/* 点击最多的文章标题 */
.publish1{
	height: 40px;
	width: 155px;
	color: #000000;
	font-size: 20px;
	padding-top: 15px;
	text-align: center;
	border: white;
	border-bottom-color: #ED4040;
	border-width: 3px;
	border-style: solid;
}



/* 底部 */
.under_box{
	width: 1200px;
	background-color: white;
	margin: auto;
	margin-top: 10px;
}
/* 友情链接 */
.friend_link{
	padding-top: 35px;
	padding-left: 10px;
	padding-bottom: 15px;
	font-size: 20px;
	font-weight: 600;
}
/* 链接 */
.linking{
	padding: 20px;
	font-size: 15px;
}

完成样式：