网页设计制作网站布局 第1篇
网页设计制作网站布局 第2篇
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
网页设计制作网站布局 第3篇
(box-sizing: content-box|border-box|inherit;)
content-box（默认值）宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
inherit规定应从父元素继承 box-sizing 属性的值。
定义： Flexbox是一个一维的布局模型，它允许你轻松设计复杂的布局结构，而无需使用浮动或定位。
Flex容器（Flex Container）：设置了display属性为flex或inline-flex的元素。 Flex项目（Flex Items）：Flex容器的子元素自动成为Flex项目。 主轴（Main Axis）：Flex项目默认沿着水平方向的主轴排列（除非设置了flex-direction属性为column）。 交叉轴（Cross Axis）：与主轴垂直的轴称为交叉轴。
display：flex
flex-direction: row（横向排列） | row-reverse | column（垂直排列） | column-reverse
flex-wrap: nowrap（默认值，不换行） | wrap（自动换行） | wrap-reverse（以相反顺序自动换行）
justify-content: flex-start（从左向右排序） | flex-end（从右向左排序） | center（居中排列） | space-between （两侧对齐）| space-around（等分间距）
align-items: stretch（拉伸元素至适应容器） | flex-start（上边缘对齐） | flex-end（下边缘对齐） | center（横中线对齐） | baseline（第一行文本基线对齐）
order: 用来定义项目的排列顺序（数值越小，排列越靠前，默认为0） flex-grow: 用来定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 flex-shrink: 用来定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis: 在分配多余空间之前，项目占据的主轴空间（默认值为auto，即项目的本来大小） flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
CSS选择器是用于选择样式化的HTML元素的模式。它们允许精确地定位页面上的元素，并应用样式规则。以下是一些常见的CSS选择器类型：
选择特定类型的HTML元素。 例如：p { color: red; } 将所有
元素的颜色设置为红色。
选择具有特定ID属性的HTML元素。 使用#符号。 例如：#main { width: 100%; } 选择ID为main的元素，并将其宽度设置为100%。
选择具有特定class属性的HTML元素。 使用.符号。 例如：.highlight { background-color: yellow; } 选择所有class为highlight的元素，并将其背景色设置为黄色。
选择页面上的所有元素。 使用*符号。 例如：* { margin: 0; padding: 0; } 将页面上所有元素的内外边距都设置为0。
选择具有特定属性或属性值的HTML元素。 例如：input[type=_text_] { color: blue; } 选择所有类型为text的元素，并将其文本颜色设置为蓝色。