一开始我们接触网页制作的时候, 就了解到 html 代表结构, CSS 代表样式, JavaScript 代表行为, 网页制作中, 我们一直强调结构与表现相分离的原则, 这里面的结构一般指 HTML, 此外分离是说把它们写在不同的文件加以引用吗? 当然不是, 在这里的学习中了解到, 分离不单是一种方法更是一种思想, 简而言之, 一个平面二维坐标, 其中 x 轴代表技术发展, y 轴代表网页制作需求, 分离就是根据根据技术发展和我们的网页制作需求完成的!
举例: 比方说我们盖房子, HTML 就相当房子的结构, CSS 相当于后期的装修, 网页都是基于一张效果来完成的, 在我们浏览网页的时候, 根据效果图不同, 样式不同, 所以我们浏览的页面是五花八门的, 那么我们如何来布局好网页? 首先不要考虑过多的 CSS 样式, 尽量让我们的 HTML 结构合理简洁和语义化, 然后再添加完善 CSS 样式!
当我们拿到页面时, 不同的制作者对结构结构样式有不同的链接, 根据这个结构样式了解深度的不同, 暂定划分为: 初级, 中级, 高级三个不同的层次;
比方说这样一个常见的对话框, 有 3 个单元, 首先我们需要完成一个单元, 另外的进行 CTRL+V; 如果是初级制作者拿到页面后, 一般按照上面的方框进行划分, 一个大的 div 里面包含 2 个小的 div, 左右浮动, 左侧放 img, 右侧放 p,h 等标签, 至于时间因子通过 position 属性定位实现, 那下面就用代码说明下
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- 1 <div class="demo1">
- 2 <div class="fl">
- 3 <img src="../../images/head02.jpg" alt="">
- 4 </div>
- 5 <div class="fr">
6 <span>10 分钟前 </span>
7 <h6 > 渐行渐远渐无书 </h6>
8 <p>
9 你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙, 仔细想想又不知道自己真正地在忙些什么, 而养成良好的习惯, 照顾好自己, 追随自己的梦想, 才能提高生产力, 这也意味着改善你与家人和朋友的关系, 因为当你改变时, 你周围的一切都改变了, 高效能的人有哪些习惯值得我们学习? 10 </p>
- </div>
- </div>
- <div class="demo2">
- <img src="../../images/head02.jpg" alt="">
- <div class="fr">
16 <span>10 分钟前 </span>
17 <h6 > 渐行渐远渐无书 </h6>
18 <p>
19 你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙, 仔细想想又不知道自己真正地在忙些什么, 而养成良好的习惯, 照顾好自己, 追随自己的梦想, 才能提高生产力, 这也意味着改善你与家人和朋友的关系, 因为当你改变时, 你周围的一切都改变了, 高效能的人有哪些习惯值得我们学习? 20 </p>
- </div>
- </div>
- <div class="demo3">
- <img src="../../images/head02.jpg" alt="">
25 <span class="time">10 分钟前 </span>
26 <h6 > 渐行渐远渐无书 </h6>
27 <p>
28 你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙, 仔细想想又不知道自己真正地在忙些什么, 而养成良好的习惯, 照顾好自己, 追随自己的梦想, 才能提高生产力, 这也意味着改善你与家人和朋友的关系, 因为当你改变时, 你周围的一切都改变了, 高效能的人有哪些习惯值得我们学习? 29 </p>
- </div>
- </div>
=>3 个不同的 demo 代表 3 种不同的页面结构 || 书写页面结构公共部分展示:
- /*reset*/
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}
- /* 公共样式 */
- .demo1,.demo2{
- width: 600px;
- margin-top: 20px;
- overflow: hidden;
- margin-bottom: 20px;
- }
- p{
- text-align: justify;
- text-indent: 2em;
- line-height: 24px;
- }
=> 初级制作者 CSS
- /* 初级 */
- .demo1{
- width: 600px;
- margin-top: 20px;
- overflow: hidden;
- }
- .demo1 .fl{
- width: 100px;
- float: left;
- }
- .demo1 .fl img{
- margin-left: 20px;
- padding: 10px;
- border: 1px solid #ccc;
- }
- .demo1 .fr{
- width:488px;
- float: right;
- border: 1px solid #ccc;
- position: relative;
- padding: 5px;
- }
- .demo1 .fr span{
- position: absolute;
- right:18px;
- top: 5px;
- }
=> 中级制作者 CSS, 相较于初级进行了结构简化, 去掉了左侧的 div, 保留了右边的部分;
- /* 中级 */
- .demo2 .fr{
- width:488px;
- float: right;
- border: 1px solid #ccc;
- position: relative;
- padding: 5px;
- }
- .demo2 .fr span{
- position: absolute;
- right:18px;
- top: 5px;
- }
- .demo2 img{
- margin-left: 20px;
- padding: 10px;
- border: 1px solid #ccc;
- }
=> 高级制作者 CSS: 先按照结构和语义编写代码, 然后再进行 CSS 样式设置, 减少了 CSS 与 HTML 的契合度 (文档移动, 图像移出, 定位属性)
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
- (从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- /* 高级 */
- .demo3{
- border: 1px solid #ccc;
- width: 488px;
- margin-left: 100px;
- padding: 5px;
- position: relative;
- }
- .demo3 img{
- float: left;
- margin:-6px 0 0 -86px;
- padding: 10px;
- border: 1px solid #CCCCCC;
- }
- .demo3 span{
- position: absolute;
- top: 10px;
- right: 20px;
- }
结论: 拿到一张网页设计图的时候, 首先要观察文字和内容模块之间的关系, 重点放在编写语义化 HTML 代码上, 而不要过多地考虑设计间的布局样式, 等到 HTML 代码编辑完成, 再考虑如何实现, 力求在不改变现有页面结构的基础上完成设计图稿要求呈现的视觉效果!
来源: http://www.jianshu.com/p/69064f97a119