首页手记【笔记】网页布局+实践

【笔记】网页布局+实践

标签：

Html/CSS

《网页简单布局之结构与表现原则》
结构与表现相关内容简介

结构与表现相分离的思想
微博用户发言信息列表制作
1.初学者的理解与定义：div层层嵌套。
2.中级者的理解与定义：去掉多余的div，进行简化。
3.高手的理解与定义：最大化的简化html的结构，然后用css进行设置，减少html与css的契合度。
电话号码布局制作
用text-indent在div中直接缩进到相应的位置就可以了，注意使用的巧妙性。
排行榜制作
利用margin属性来移动设置html结构.margin可以是负值，通过负值，可以使该内容进行移动！实现四个方向的移动。在结构（HTML）和样式（css）中，可以先把内容通过HTML写出来，再利用margin移动位置，实现排版，降低样式和结构的耦合，并且减少代码。
当我们拿到一张网页设计图的时候，首先要关注这个网页的文字内容，还有里边内容模块之间的关系，先把重点放在html代码上，而不要过多的考虑设计图上的布局样式，等到html按内容编写完成后，我们在考虑样式如何实现，力求在不改变现有结构的基础上去完成设计图上要求的视觉效果
网页换肤
在做设计图的时候，也可以先单纯的考虑需要搭建的主要内容，以及放的位置，然后再想他的样式风格。力求在不改变html结构的情况下用css调整想要的效果。

《网页布局基础》
自动居中一列布局
网页布局相关知识点——标准文档流、块级及行级元素
W3C标准包括：结构化标准语言（HTML和XML）、标准标准语言（CSS）、行为标准语言（DOM和CMAScript）。倡导结构、样式、行为分离。网页布局基础讲解的是CSS。
CSS的3种定位机制：标准文档流、浮动、绝对定位。
标准文档流：从左到右，从上到下，输出文档。由块级元素和行级元素组成。
块级元素：撑满页面独占一行，触碰到页面边缘时自动换行。
行级元素：在同一行内显示，不会改变HTML结构。
块级元素和行级元素都是盒子模型。
盒子模型
盒子模型是网页布局的基石。

自动居中一列布局
{margin:0 auto;}会根据浏览器宽度自动设置两边的外边距。原理是（浏览器宽度-外包含层的宽度）/2=外边距。
横向两列布局
浮动布局及float属性
float属性：left/right/none。元素会左移、右移，直至触碰到容器为止。
设置了浮动的元素，仍然处在标准文档里中，所以会对别的元素造成影响。
当元素没有设置宽度但是设置了浮动的时候，元素的宽度会随内容的变化而变化。
当元素设置了浮动之后，会对相邻的元素造成影响，相邻元素特指紧随其后的元素.
清除浮动的常用方法
第一种方法：clear:both/left/right;
第二种方法：width:100%（或固定宽度）+overflow:hidden; 溢出:隐藏;
<br>空标签虽然可以清楚浮动，但对页面来说没有意义。
横向两列布局
当父包含快缩成一条时，用clear:both方法清除浮动无效，她一般用于紧邻后面的元素的清除浮动。
绝对定位布局
简介
绝对定位布局就是使用position属性实现的定位。是CSS中规定的第三种定位机制。能够实现横向多列布局以及较复杂的布局。
position属性拥有三种定位形式：静态定位、相对定位、绝对定位。可以设置4个属性值：static（静态定位）、revelation（相对定位）、absolute（绝对定位）、fixed（固定定位）。
相对定位revelation
相对于自身原有位置进行偏移，仍处于标准文档流中，随意拥有偏移属性和z-index属性。
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
绝对定位absolute
建立了以包含块为基准的定位，完全脱离文档流，随即拥有了偏移属性和z-index属性。
未设置偏移量：无论是否存在已定位的祖先元素，都保持在元素的初始位置。会脱离标准文档流。宽度随内容变化。
设置偏移量+没有已定位的祖先元素：会以<html>为偏移参照基础。
设置偏移量+有已定位的祖先元素：会以最近的祖先元素为偏移参照基础。
横向两列布局fixed
本来可以使用float实现两列布局，如果使用sbsolute实现，适用于一列固定宽度，一列需要自适应的情况。
固定宽度的列>自适应宽度的列。

《如何用CSS进行网页布局》
内容简介

一列布局

二列布局
分为自适应宽度（百分比）和固定宽度的二列布局，这里讲的是固定宽度用float实现。

三列布局
正常如二列布局，以下情况是是左右两列宽度固定，中间列需要自适应。

混合布局

《导航条菜单的制作》
垂直菜单的制作

水平菜单的制作

圆角菜单的制作
改变宽高和位置，使用贴图背景。
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高
伸缩菜单的制作-改变高度
鼠标经过后菜单改变高度。a:hover就是鼠标放上去后的变化。加了10px高（height），但是增加的是下端。想要加到上端就同时再往上挪10px，用margin-top向上-10px。
挪10px后文字也跟了10px，想让文字往下一点，就增加行高，加了10px，一半加文字上面一半加文字下面。相当于分到文字上面了5px，文字就往下降了5px。就没那么突兀了。

备份笔记17.1.13

点击查看更多内容