前端HTML之页面结构

前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面.

PS:2015年1月进军编程行业。

废话不多讲,这一年页面改版了N次,以至于设计师都撂挑子了,,,页面做多了,经验自然就有了。

背景(前端小白,迫于生计放弃之前销售工作,计算机专业)

前端的最基本要求,实现设计师所出的效果图,也就是样子跟设计图一样就可以。

这个要求容易实现,需要费点心思,花点时间,期初切图会慢一点,往后就越来越快了,,

前端的进阶一,页面是很讲究布局结构的。

一次偶然的机会,跟同事讨论前端页面,他打开了拉勾网的页面,想做页面其中的一部分,我通过谷歌浏览器F12审查了一下页面代码,发现这页面结构跟我的页面结构也似乎如出一辙,页面是很讲究布局结构的,也就是说,接到页面之后,不是急于去写代码,而是先把布局结构在心里设计好,传统的结构无非就两种,上下结构,左右结构,只是上边与下边,左边与右边的宽度与高度不一样罢了。

前端页面切图的误区,元素高度,浮动,定位。

首先来说一下高度,所有元素的高度,尤其是父元素,也就是最外层包含的容器,这些高度都是由其子元素撑开的。什么意思呢,通俗点说就是,心有多大,舞台就有多大,心就是子元素,舞台就是父元素,子元素能撑多宽,多高,父元素自然就实现了设计图上的效果。

然后再来说一下浮动,不了解浮动为何要清除的刚入门的同学,会在子元素浮动后,父元素,塌陷失去高度,会手动定义高度,因此便觉得浮动不清除也没多大影响,这其实也跟第一个问题也有关系,他还不清除页面元素的高度是靠子元素撑起来的。

最后说一下定位,定位就是需要一个参考值,在当前元素绝对定位时,若父元素没有使用相对定位,其参考的元素为窗口,也可以说是body元素,否则参考的就是最近的使用了相对定位的父元素。还有一种定位是,固定定位,就是固定在页面的某个位置,

时间: 2024-11-17 01:26:25

前端HTML之页面结构的相关文章

2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换

2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生成css进行编译,而不是借助于考拉工具;  顺便从头来一遍流程-- 建立如上图01所示的目录结构,层次明晰,便于日后管理. 快捷键进入当前文件夹,在此打开dos窗口输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法) 之后安装 cnpm,为了日后安装所需的包,速度更

【转】移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

移动Web单页应用开发实践——页面结构化

1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用一个页面装载,也可能是按模块分为独立页面装载.在开发单页应用时第一个要处理的问题就是页面结构化,由于多个功能集中在一个页面呈现,就必然需要考虑如何实现多个视图布局?如何实现视图之间动画切换?等问题. 下面我就来讲述下手机搜狐前端团队在单页应用开发的页面结构化上做过的一些尝试与努力. 2. 页面视图

前端读者 | 为什么页面跟设计稿差距这么大?是啊!为毛啊?

本文来自优设 @3年2班程远:链接:https://www.uisdc.com/design-just-stay-design 在互联网产品的研发流程中,页面的视觉还原是很重要的一个步骤,也往往是问题最多的一个环节.如果一些细节问题在这个环节没有被有效地发现并解决,那么后续流程中再去解决这些问题的成本就会呈指数上升. 那么今天我们就来梳理一下,看看前端工程师本身以及上下游的角色之间,都会容易遇到哪些常见的问题. 设计师 设计师是最贴近产品体验的人,但是术业有专攻,设计师往往更加注重视觉的表现,而

页面结构

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面结构</title> <style> header, nav, article, footer{ border: solid 1px #666; padding: 5px; } header{ width: 500px; } nav{ flo

web前端开发与页面设计的协作、区别与发展

web前端开发与页面设计的协作.区别与发展,布布扣,bubuko.com

我的前端架构之一--页面作用域

场景 现在页面的内容大都是分块的,常见的如下结构: <html> <head></head> <body> <header> </header> <main> <left> </left> <content> </content> <right> </right> <footer> </footer> </main>

Android网络项目课程笔记-----页面结构

1. Android App主页结构 存在主要的App组织结构: 1) Tab页 a) Android Tab标签在顶部 b) 模仿iOS Tab标签在底部,最后一个是更多 2) 侧滑菜单 Tab 优点:直观 缺点:占空间 menuDrawer 优点:节省空间 缺点:不直观 时间 2侧滑菜单: 2.1 SlidingMenu 主页面(包括Actionbar)完整滑动 2.2 menuDrawer 内容部分被滑动菜单遮住 GMail.GoogleMusic.Google+ 3. GoogleSty

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元