1.网页布局
1.1什么是网页布局
网页布局是一种定义网站结构的模式 (或框架)
它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径,并将网站的最重要元素置于网站的正面和中心。
2.为什么要进行网页布局
良好的布局可以使用户留在网站上,因为它可以轻松访问重要信息并直观地查找它们。不良的布局会使用户感到失望,然后他们会因为找不到所需的内容而迅速离开网站。
3.基础布局
网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域
4.媒体查询
CSS3 的媒体查询继承了 CSS2 媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情,例如:
viewport (视窗)的宽度与高度;
设备的宽度与高度;
朝向 (智能手机横屏/竖屏) ;
分辨率。
我们可以通过多媒体查询技术,将制作出的网页同时适配 io 手机、Android 手机、平板电脑、PC机、笔记本电脑等设备
4.1媒体查询语法
媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
@media not | only mediatype and (mediafeature and | or | not mediafeature){
#main {
width:200px;
float:left;
}
}
not:not运算