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

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

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

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

简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的

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

正确布局:

在这里插入图片描述

 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>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值