样式配置

1、给CSS文件夹中添加reset.css样式表来初始化样式

2、一般写CSS代码用less来写会方便很多，可以在扩展文件中下载easy less扩展使用

（使用方法：在写好的less文件上ctrl+s即可生成对应的css文件）

3、在html文件中导入reset样式和自己写的css

头部部分

左侧布局（登录注册）

先确定基本的头部框架

HTML

<body><!--最外层的包裹元素--><div id="wrapper"><!--头部--><header id="header"><!--上面部分--><div class="headTop"><!--版心元素--><div class="headTopMain"><!--左侧--><div class="left"><h5>欢迎来到尚优选！ 请</h5><p><a href="javascript:;">登录</a><a href="javascript:;">注册</a></p></div><!--右侧--></div></div></header></div>
</body>

less

//引入清除浮动样式文件
@import "mixins/clear.less";//最外层的包裹元素
#wrapper {//头部#header {//上面部分.headTop {height: 30px;background: #eaeaea;//版心元素.headTopMain {.clearfix();width: 1200px;margin: 0 auto; //水平居中line-height: 30px; //垂直居中//左侧.left {// 添加浮动使h5和p标签在同一水平线上h5 {float: left;margin-right: 5px;}p {float: left;a {// 第一个a标签&:first-child {padding-right: 5px;margin-right: 0;// 右边的竖线border-right: 1px solid #b3aeae;}}}}}}}
}

为了解决子元素添加浮动后的父元素塌陷问题，需要清除浮动，新建一个clear.less文件

在所需调用的地方.clearfix()即可

右侧布局（列表布局）

html

              <div class="right"><nav><a href="##">我的订单</a><a href="##">我的购物车</a><a href="##">我的尚优选</a><a href="##">尚优选会员</a><a href="##">企业采购</a><a href="##">关注尚优选</a><a href="##">合作招商</a><a href="##">商家后台</a></nav></div>

LESS

因为a标签自带一个字体大小所以会有间隙，需要先手动去掉，再手动添加一个

LOGO部分&搜索框

<div class="headBottom"><!--头部下半部版心--><div class="headBottomMain"><!--logo--><h1 class="logo"><a href="javascript:;"><img src="data:images/Logo.png" alt=""></a></h1><!--搜索框--><div class="search"><!-- input 中的提示文本信息--><input type="text" placeholder="请输入搜索内容"><input type="button" value="搜索"></div></div></div>

//下面部分.headBottom {//版心元素.headBottomMain {width: 1200px;margin: 0 auto;.clearfix();//logo.logo {float: left;a {img {width: 175px;height: 56px;margin: 25px 45px;}}}//搜索框.search {float: right;margin-top: 35px;input {//文本框&:first-child {box-sizing: border-box;width: 490px;height: 32px;padding: 0 4px;border: 3px solid #ea4a36;float: left;}//提交按钮&:last-child {width: 68px;height: 32px;color: #fff;background: #ea4a36;border: none;}//修饰placeholder&::-webkit-input-placeholder {color: yellowgreen;}}}}}

商品分类导航

      <div id="navWrap"><!--版心元素--><div class="navWrapMain"><a href="javascript:;">全部商品分类</a><a href="javascript:;">服装城</a><a href="javascript:;">美妆馆</a><a href="javascript:;">尚优选超市</a><a href="javascript:;">全球购</a><a href="javascript:;">闪购</a><a href="javascript:;">团购</a><a href="javascript:;">有趣</a><a href="javascript:;">秒杀</a></div></div><!--分类导航结束-->

 //分类导航开始#navWrap {border-bottom: 2px solid #e1251b;//版心元素.navWrapMain {width: 1200px;margin: 0 auto;.clearfix();a {margin: 0 22px;font-size: 16px;color: #333;float: left;line-height: 50px;&:first-child {width: 210px;height: 50px;background: #e1251b;color: #fff;font-size: 14px;font-weight: bold;float: left;text-align: center;line-height: 50px;}}}}//分类导航结束

同样的因为子元素添加了浮动，父元素要清除样式以免造成塌陷（给父元素用cleafix()）

内容区域

路径导航

html

 <!--内容区域开始--><div id="content"><!--版心元素--><div class="contentMain"><!--路径导航--><div id="navPath"><a href="javascript:;">手机、数码、通讯</a><i>/</i><a href="javascript:;">手机</a><i>/</i><a href="javascript:;">Apple苹果</a><i>/</i><a>iphone 6S系</a></div></div></div>
<!--内容区域结束-->

less

//内容区域开始#content {//版心元素.contentMain {width: 1200px;margin: 15px auto 0 auto;//路径导航#navPath {padding: 9px 15px 9px 0;// 去掉a和i之间间隙font-size: 0px;a {font-size: 12px;}i {padding: 0 5px;font-size: 12px;}}}}//内容区域结束

同样的因为a标签和i标签都是行内元素所以会有间隙，需要在父元素身上将font-size设为0，子元素单独设置

动态渲染路径导航数据

引入js文件（先引入数据的JS文件，再引入自己的JS）

数据文件

var goodData = {path: [{title: "手机、数码、通讯",url: "###"}, {title: "手机",url: "###"}, {title: "Apple苹果",url: "###"}, {title: "iphone 6S系",}],imagessrc: [{ b: "./images/b1.png", s: "./images/s1.png" },{ b: "./images/b2.png", s: "./images/s2.png" },{ b: "./images/b3.png", s: "./images/s3.png" },{ b: "./images/b1.png", s: "./images/s1.png" },{ b: "./images/b2.png", s: "./images/s2.png" },{ b: "./images/b3.png", s: "./images/s3.png" },{ b: "./images/b1.png", s: "./images/s1.png" },{ b: "./images/b2.png", s: "./images/s2.png" },{ b: "./images/b3.png", s: "./images/s3.png" },{ b: "./images/b1.png", s: "./images/s1.png" },{ b: "./images/b2.png", s: "./images/s2.png" },{ b: "./images/b3.png", s: "./images/s3.png" },{ b: "./images/b1.png", s: "./images/s1.png" },{ b: "./images/b2.png", s: "./images/s2.png" }],goodsDetail: {title: "Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机bbb123",recommend: "推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返",price: 5299,promoteSales: {type: "加价购",content: "满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品"},support: "以旧换新，闲置手机回收 4G套餐超值抢 礼品购",address: "广东省 深圳市 宝安区",evaluateNum: 670000,crumbData: [{"title": "选择颜色","data": [{type: "金色",changePrice: 0},{type: "银色",changePrice: 40},{type: "黑色",changePrice: 90},]},{"title": "内存容量","data": [{type: "16G",changePrice: 0},{type: "64G",changePrice: 300},{type: "128G",changePrice: 900},{type: "256G",changePrice: 1300},]},{"title": "选择版本","data": [{type: "公开版",changePrice: 0},{type: "移动版",changePrice: -1000}]},{"title": "购买方式","data": [{type: "官方标配",changePrice: 0},{type: "优惠移动版",changePrice: -240},{type: "电信优惠版",changePrice: -390},]}]}
}

index.js

//作用：需要将所有的DOM元素对象以及相关的资源全部都加载完毕之后，再来实现的事件函数
window.onload = function () {/*** 思路：* 1、先获取路径导航的页面元素（navPath）* 2、再来获取所需要的数据（data.js->goodData.path）* 3、由于数据是需要动态产生的，那么相应的DOM元素也应该是动态产生的，含义需要根据数据的数量来进行创建DOM元素* 4、在遍历数据创建DOM元素的最后一条，只创建a标签，而不创建i标签*///1.获取页面导航的元素对象var navPath = document.querySelector('#wrapper #content .contentMain #navPath');//2.获取数据var path = goodData.path;//3.遍历数据for (var i = 0; i < path.length; i++) {if (i == path.length - 1) {//只需要创建a且没有href属性var aNode = document.createElement("a");aNode.innerText = path[i].title;navPath.appendChild(aNode);} else {//4.创建a标签var aNode = document.createElement("a");aNode.href = path[i].url;aNode.innerText = path[i].title;//5.创建i标签var iNode = document.createElement('i');iNode.innerText = '/';//6.让navPath元素来追加a和inavPath.appendChild(aNode);navPath.appendChild(iNode);}}
}

网页基本布局流程（上半部分）相关推荐

CSS——网页版心和布局流程
阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". "版心&qu ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
前端学习之版心和布局流程
什么是版心? "版心"(可视区)是指网页中主体内容所在的区域.一般在浏览器窗口水平居中显示,常见的宽度值为960px.980px.1000px.1200px等. 布局流程为了提高 ...
[css]版心和布局流程
1.版心阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". " ...
CSS 版心和布局流程
版心和布局流程阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". &qu ...
android的布局流程,Android View 布局流程(Layout)全面解析
前言上一篇文章,笔者详细讲述了View三大工作流程的第一个,Measure流程,如果对测量流程还不熟悉的读者可以参考一下上一篇文章.测量流程主要是对View树进行测量,获取每一个View的测量宽高, ...
计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智摘要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
响应式网页的布局设计
值得收藏的14款响应式前端开发框架作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
域名与网页服务器的什么对应,简述网站从域名到网页的访问流程
简述网站从域名到网页的访问流程时间:2019-12-30 1384 次浏览大家对上网并不陌生,不管是IT人士还是普通大众,不管用电脑还是手机,上网已变成大家生活中的一部分.什么是上网?简单点讲就是 ...

网页基本布局流程（上半部分）

样式配置

头部部分

左侧布局（登录注册）

HTML

less

右侧布局（列表布局）

html

LESS

LOGO部分&搜索框

商品分类导航

内容区域

路径导航

html

less

动态渲染路径导航数据

引入js文件（先引入数据的JS文件，再引入自己的JS）

数据文件

index.js

网页基本布局流程（上半部分）相关推荐

最新文章

热门文章