本文主要是介绍【完整版】从分析页面布局、标记各部分区域高宽开始，构建一个挂号平台页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
【图片素材是在慕课网上的，我在看完视频之后，觉得这种开发方法很适合我这种小白去多多尝试，多多练习，这里我也是奔着掌握web前端开发方法来写的，嗯，代码及所有图片的标记也是我自己从头写过和标记的，这也算对自己学习的一个总结与扩展吧】
我理解中，一般的开发流程应该是从需求分析到设计，再到编写代码，然后前后端对接调试。在开发一个平台之前，我们首先需要从UI设计师的手中拿到设计好了的图稿，初步分析页面的布局应该如何做，在心里对整个页面有一个大概的轮廓之后，才可以接下来去做进一步的排版，其实在一开始如果先把最外层的框架写好了，然后再把细节的内容加进去，这样会非常容易且有条理地去搭建一个项目。
虽然这里我没有用git、npm、webpack、vue的脚手架工具来写网页，但是在这里我依然需要一步一步地从外到内完成各部分的内容，模块化、组件化地构建一个网页。像刚才说的那样，我会先搭建一个外层框架，然后再往里面添加文字、图片等内容，最后再添加有交互效果的组件。预期能做到的网页效果主要体现在交互效果上，这里我会用jQuery去完成，包括轮播图组件、按需切换搜索组件、导航选项卡组件、底部箭头回到顶部组件。完成这些之后，如果我有时间的话，会考虑把banner图右侧的那些搜索功能使用ajax和json技术实现，当然，使用Ajax的话我会用一个本地服务器来调试。
通过以上分析，先进入第一部分内容的完成，那就是初步判断页面的各部分，得出页面的整体布局，标记各区域的像素大小，然后代码实现。
（一）划分区域
页面可分为顶部、头部、导航部、banner部、主要内容部、脚部。
顶部是由联系方式、登录、注册入口等内容，头部区域是logo图和搜索框；导航区域就是横着排过去的那些，同时也包括侧边导航区域，也就是banner图左侧的那部分；banner图区域就是轮播图、“快速预约”、“帮助中心”这些内容；主要内容部分就是医院详细展示部分、“最新公告”、“听诊公告”这些内容；最后就是脚部了。分析完布局之后，就开始标记各区域的大小，以及背景颜色。这里我用的图片工具是PxCook，用这个工具可以标记宽高、颜色、距离。
（二）所以最初的HTML结构是：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>城市预约挂号平台</title><link rel="stylesheet" type="text/css" href="style/layout.css">
</head>
<body><div class="top"></div><div class="header"></div><div class="nav"></div><div class="banner"></div><div class="content"></div><div class="footer"></div>
</body>
</html>从图片可以看出，除了banner区域、content区域，其他区域的宽度都是占据100%，但内容都集中在中间，同时，又因为div是块级元素，占据的是一整行，所以只要给它们设了高度或者内容有高度，宽度就会撑满100%。所以，可以给每个区域再加一个class为wrap的div，其宽度根据图片划分的来算，就刚好是1000px，有了这个wrap，把它居中，内容写在里面，就会集中在水平中部。
但是有一个比较难处理的点，那就是在导航nav区域与banner区域之间的那块下拉下来的部分有点难处理，在这里，因为nav里面刚好嵌套了wrap，而wrap又刚好水平居中在页面，所以可以给wrap加一个相对定位，然后在html结构上，在wrap里面，添加一个div（class为nav-list），nav-list的定位设为绝对定位，top、left都设为0，宽度是190px，高度是459px，这样就可以定位到图片所示的位置。在这里要注意的是，不能给wrap设置overflow:hidden;的样式，因为nav-list的高度是撑出来了的，如果这样设置的话，超过nav高度的那部分会被隐藏。
再看banner区域，因为wrap是要写公共样式的，所以公共样式可能会对banner不太适应，因为banner区域里的内容以后会有浮动，需要清除浮动，所以要在父元素上设置overflow:hidden;为了不那么麻烦，就不为banner加wrap了，直接设置banner父元素宽度为（1000-190）=810px，减去的190是为上面的nav-list留出来的，但是减去了190px，就要补回来，要不然就会宽度不够，所以要给宽度左边撑开190px，为了能让内容向右移动190px，又能让宽度撑开达到1000px，所以就可以设置左内边距为190px，这样就刚刚好。设置左内边距留空位是一个很好用的技巧，这在后面的背景填充上还会用到。
还有一个特别好用的技巧是左浮动设置，这用到了banner区域和content区域里。三块区域，第一块的宽度最大，第二第三块等宽，且第一块的宽度与第二（第三）的宽度加起来刚好等于父元素的宽度，这时可以设置它们的浮动都是左浮动，这样就会使它们呈两列布局了。
以上是对整体最外层布局的分析，下面是初步完成的样式及代码：
初步轮廓：
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>城市预约挂号平台</title><link rel="stylesheet" type="text/css" href="style/layout.css">
</head>
<body><div class="top"></div><div class="header"></div><div class="nav"><div class="wrap"><div class="nav-list"></div></div></div><div class="banner"><div class="banner-slide"></div><div class="banner-search"></div><div class="banner-help"></div></div><div class="content"><div class="wrap"><div class="content-detail"></div><div class="content-news"></div><div class="content-stop"></div></div></div><div class="footer"></div>
</body>
</html>layout.css
*{margin:0;padding:0;
}
.top{height: 30px;background-color:#f6f5f4;
}
.wrap{width: 1000px;margin:0 auto;position: relative;
}
.header{height: 92px;background-color:#fff;
}
.nav{height: 36px;background-color:#0cc3f2;position: relative;
}
.nav-list{position: absolute;width: 190px;height:459px;background: #03a5f0;top:0;left: 0;z-index: 0;
}
.banner{height: 414px;padding:10px 0 10px 190px;width: 810px;margin:0 auto;overflow: hidden;
}
.banner-slide{height: 414px;width: 544px;background: #f2eaef;float:left;margin:0 8px;
}
.banner-search{width: 250px;height: 255px;background:#eee;float:left;
}
.banner-help{width: 250px;height: 146px;margin-top:12px;float:left;background:#eee;
}
.content{overflow: hidden;
}
.content-detail{width: 742px;height: 486px;background: #eee;float: left;margin-right: 8px;
}
.content-news,
.content-stop{width: 250px;height: 238px;float:left;background:#eee;
}
.content-stop{margin-top: 12px;
}
.footer{height: 119px;background: #eee;margin-top: 42px;
}（三）写完了外层框架之后，现在就可以向里面添加内容了。这部分的内容是静态页面的内容，还有交互动态的那些效果放在下一部分。
顶部结构
<div class="top"><div class="wrap"><div class="left gray">010-114/116411电话预约</div><div class="right"><span class="gray">欢迎来到城市医院预约挂号统一平台 请 </span><span><a href="#3" class="blue">登录</a> <a href="#3" class="blue">注册</a> <a href="#3" class="blue">帮助中心</a></span></div></div>
</div>全局样式及顶部基础样式
ul{list-style: none;
}
a{text-decoration: none;
}
input,select{outline: none;border: none;
}
/*顶部基础样式*/
.top{font-size: 12px;line-height: 30px;overflow: hidden;
}
.top .left{float: left;padding-left: 20px;background: url(../img/icon-call.png) no-repeat left center;
}
.top .right{float: right;
}
.top .gray{color: #86837e;
}
.top .blue{color: #00a7e0;
}头部结构
<div class="header"><div class="wrap"><div class="logo"><img src="./img/logo.png" alt="城市预约挂号平台"></div><div class="header-search"><span class="header-search-focus">医院</span><div class="header-search-list"><span><a href="#2">疾病</a></span><span><a href="#2">科室</a></span><span><a href="#2">医院</a></span></div><input type="text" placeholder="请输入搜索内容" class="header-search-text"><a href="#1" class="header-search-click"> </a></div></div>
</div>头部基础样式
/*头部基础样式*/
.logo{float: left;padding:10px 20px;
}
.logo,
.logo img{width: 393px;height: 72px;line-height:这篇关于【完整版】从分析页面布局、标记各部分区域高宽开始，构建一个挂号平台页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
