html/css 页面布局 详细步骤

[筑·梦]

页面布局：
PC端尺寸要求：
1、页面高度限制（可以出现上下滚动条）
2、页面宽度有要求（不允许出现左右滚动条）

PC端页面宽度以1280px的分辨率为准（页面最宽为1260px）

css:层叠样式表

定义一组规则（显示效果）
1、基本选择器
1）、标签（元素）
1、html中的标签
2、定义后自动应用到页面中的所有标签


定义格式：标签{属性:属性值; 属性:属性值;...}

2）、类
1、自定义
2、指定对象调用（可重复调用）
定义格式：.类名{属性:属性值; 属性:属性值;...}

3)、id
1、自定义
2、指定对象调用（调用一次）
定义格式：#id{属性:属性值; 属性:属性值;...}

调用id="id"
块级元素水平居中：设置外边距
（margin）左右自动即可（margin:auto;）

margin外边距：当对象与四周其他对象之间的距离

一个值：四周距离都一致（margin：10px；）
两个值：第一个值为上下，第二个值为左右（margin:20px 10px;）
三个值：上，左右，下（margin:10px 30px 20px;）
四个值：上，右，下，左（margin:10px 30px 20px 10px;）

overflow溢出

1、同时设置height和weight属性时，内容超出高度范围会隐藏（hidden）或用滚动条显示（auto）
2、如果只设置overflow属性，当前块级元素高度自适应。

浮动float:让对象脱离文档流

让多个块级元素在同一行显示：设置浮动即可

占页面高度和宽度：

占用页面宽度=宽（width）+左右内边距（padding）+左右边框（border）+左右外边距（margin）
占用页面高度=高（height）+上下内边距（padding）+上下边框（border）+上下外边距（margin）
背景：
background:#f00 url(img/5.png) no-repeat -10px 20px;
----综合定义背景属性，多个值之间用空格隔开

单独属性定义：background-color:#f00;
----背景颜色
background-image:url("img/5.png");
----背景图片
background-repeat:no-repeat;
----背景图片是否重复
background-position;
-----背景图片位置

1、上下左右单词

水平方向： 左 中 右
垂直方向：上 中 下

2、通过数值来定位

第一个值为水平方向，第二个值为垂直方向
背景图片偏移：向右下为正、向左上为负

[winzond]

我去，你不如直接百度或者详细看看教程或者手册

[葉幺]

看一楼的或者百度吧

[___紫菜]

看二楼或者一楼的或者百度吧

[towrabbit]

看三楼或者二楼或者一楼的或者百度吧

[yhanw]

还是看菜鸟教程吧

[看着是个昵称]

这些都是基础的东西，没有人会一点点告诉你的，自己去看看教程，熟练一下基础吧

[a1424674894]

看看，1，2，3，，5，，7，8楼的或者百度吧，对的，没有4，6楼，可能被抓了

[R0biN_]

菜鸟教程的确不错~