Web前端开发打卡第一天

最新推荐文章于 2024-09-30 15:42:36 发布

YoungG1110

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量53

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/YoungG1110/article/details/130406453

版权

实战样例

代码整体框架

整体框架代码

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
	  <div class="top">
		<div class="left_top">
			<div class="left_top_list"></div>
			<div class="left_top_list_choice"></div>
			<div class="left_top_list_img"></div>
		</div>
		
		<div class="right_top">
			<div class="right_top_list"></div>
			<div class="right_top_img"></div>
		</div>
	  </div>
  </body>
</html>

左边框架搭建

<!DOCTYPE html>
<html lang="en">
  <head>
	  <style>
		* {
			padding: 0;
			margin: 0;
		}  
		.top {
			width: 100%;
			height: 800px;
		}
		.top .left_top {
			width: 872px;
			height: 800px;
			
		}
		
		.top .left_top .left_top_list  {
			width: 872px;
			height: 32px;
			background: #f5f5f5;
		}
		.top .left_top .left_top_list  a{ /* 属于文本就是属于超链接 */
			text-decoration: none;
			color: #999;
			width: 288px;
			color: #999;/* 字体颜色 */
			line-height:32px;
			display: block;
			float: left;
			text-align: center;
						
			
		}
		.top .left_top .left_top_list .split {
			width: 2px;
			height: 20px;
			overflow: hidden;
			float: left;
			background: #e1e1e1;
			display: inline-block;
			margin: 5px 0 0px;
		}
			
		
	  </style>
  </head>
  <body>
	  <div class="top">
		<div class="left_top">
			<!-- 三个部分 -->
			<div class="left_top_list">
				<a href="JavaScript">精品栏目</a><span class="split"></span>
				<a href="JavaScript">赛事精英</a><span class="split"></span>
				<a href="JavaScript">英雄攻略</a>
			</div>
			<div class="left_top_list_choice"></div>
			<div class="left_top_list_img"></div>
		</div>
		
		<div class="right_top">
			<div class="right_top_list"></div>
			<div class="right_top_img"></div>
		</div>
	  </div>
  </body>
</html>