Web前端开发打卡第一天

编程入门行业动态更新时间:2024-10-07 06:48:30

Web前端开发打卡第一天

实战样例

代码整体框架

整体框架代码

<!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>