DIV+CSS搭建（淘宝首页）布局图

制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。
下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。

搭建的布局图与最终效果的一个比较：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div class="wrapper"><!-- 导航条 --><div class="top-nav-wrap"><div class="top-nav"><div>导航条</div><div>广告图</div></div></div><!-- 搜索部分 --><div class="search-wrap"><div class="search"><div>搜素部分</div></div></div><!-- 主体部分 --><div class="mian-wrap"><!-- 主体导航条部分 --><div class="mian-nav"><div>主体导航条部分</div></div><!-- 主体部分 --><div class="mian-box"><!-- 先两栏布局 --><div class="mian"><div class="mian-inner"><div class="inner-lf"><div>主体分类栏</div></div><div class="inner-cer"><div>主体轮播图</div></div><div class="inner-rt"><div>主体右侧展示</div></div></div><div class="mian-bottom"><div>主体底部信息</div></div></div><div class="box-rt"><div class="member"><div>登录注册部分</div></div><div class="massage"><div>信息部分</div></div><div class="notice"><div>公告</div></div><div class="mobule"><div>图标</div></div><div class="app"><div>apps</div></div></div></div></div></div>
</body>
</html>

  <style>*{margin: 0;padding: 0;}div{color: #fff;font-size: 16px;}html,body{width:100%;height: 100%;}.wrapper {width: 100%;height: 100%;}/* 导航条部分 */.wrapper .top-nav-wrap{width: 100%;height: 105px;}.wrapper .top-nav {width: 1190px;height: 105px;margin: 0 auto;background-color: green;border: 1px solid #000;}/* 搜索部分 */.wrapper  .search-wrap{width:100%;height: 97px;}.wrapper .search{width: 1190px;height: 97px;background-color: #ff5500;margin: 0 auto;border: 1px solid #000;}/* 主体部分 */.wrapper .mian-wrap{width: 1190px;height: 663px;margin: 0 auto;border: 1px solid #000;}.wrapper .mian-wrap .mian-nav{width: 100%;height: 30px;background-color:green;}.wrapper .mian-wrap .mian-box .mian{width: 890px;height: 632px;float: left;}.mian-wrap .mian-box .mian .mian-inner{width: 890px;height: 522px;background-color: pink;}.mian-wrap .mian-box .mian .mian-inner .inner-lf{width: 190px;height: 100%;float: left;background-color: #ff5500;}.mian-wrap .mian-box .mian .mian-inner .inner-cer{width: 520px;height: 100%;float: left;border:1px solid #000;}.mian-wrap .mian .mian-inner .inner-rt {padding: 0 8px;width: 160px;height: 100%;float: left;background-color: yellow;}.mian-wrap .mian .mian-bottom{width: 890px;height: 110px;background-color:purple;}.wrapper .mian-box .box-rt{width: 290px;height: 632px;float: left;margin-left: 8px;background-color: blue;}.wrapper .mian-box .box-rt .member{width: 290px;height: 132px; background-color:#ff5500;}.wrapper .mian-box .box-rt .massage{width: 290px;height: 26px;background-color: pink;}.wrapper .mian-box .box-rt .notice{width: 290px;height: 98px;padding-top:10px;background-color:orange;}.wrapper .mian-box .box-rt .mobule{width: 290px;height: 230px;background-color:red;}/* .wrapper .mian-box .box-rt .app{} */</style>

DIV+CSS搭建（淘宝首页）布局图相关推荐

淘宝首页焦点图设计分析
淘宝首页每天都有那么多的焦点图,在同等展现量的情况下,究竟哪些焦点图可以获取更多的点击量呢. 于是我就找了几张曾现出现过的焦点图做了一个小调研,调研人群仅涉及到我QQ上的一些朋友.并且调研人数基数也很 ...
只用div+CSS做淘宝手机端首页
div+CSS教你做出淘宝手机端首页为什么只用div做网页网页代码网页效果展示需要更全面的SEO优化网站软件工具及软件操作文档可以联系博主,会有更详细的教程,系统的帮助您的网站关键词40天上百 ...
淘宝首页html css
自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...

DIV+CSS搭建（淘宝首页）布局图

DIV+CSS搭建（淘宝首页）布局图相关推荐

最新文章

热门文章