HTML+CSS简单的淘宝首页框架布局小练(一）

最新推荐文章于 2025-06-10 09:47:59 发布

原创

最新推荐文章于 2025-06-10 09:47:59 发布 · 1w 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#HTML+CSS淘宝首页布局（一）

本文是作者在学习前端课程中，对淘宝首页框架布局的初步实践和理解。通过分析，作者指出布局应将部分区域分为两大块进行，避免布局错误。虽然未展示布局图，但代码能体现布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开的前端的课程，练习淘宝的前台页面的框架，就简单根据理解写了下，（小傻猫）记录学习的经历

简单首先分析下淘宝首页的布局框架（小傻猫），自己理解的

首先需要注意的是该部分的布局，是将该部分分成量大块布局的（错误：主题市场广告淘宝头条账户信息但个分一块，可能会出现，最后的账户信息块一直是在淘宝头条的下方，并不是出现在右边, 可以自己试试哟）

正确布局：

在这里插入图片描述

 1  .class="focus"  主题市场 广告  淘宝头条    归为整体, 该块主要分为两大部分       
     class=""focus_1"  
     class="focus_2"
 2 . class="focus_1"  主题市场   广告  淘宝头条  归为"focus"下该部分
 （   再将该区域分为三块   
      class="focus_1_1" 
      class="focus_1_2"
      class="news" ）
  3. class="focus_2" 将账户信息单独归为该部分

下面的布局就比较简单了，看布局图效果就可以看出来，具体见代码

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV框架首页</title>
    <link href="../CSS/text4.css" type="text/css" rel="stylesheet">
</head>
<body>

<div class="index">
    <div class="header">页眉</div>

    <div class="nav">
        <div class="nav_1">
            <div class="logo">logo</div>
            <div class="nav_1_1">一</div>
            <div class="nav_1_2">二</div>
            <div class="nav_1_3">三</div>
            <div class="nav_1_4">四</div>
            <div class="nav_1_5">五</div>
            <div class="nav_1_6">六</div>
        </div>