美国科学家在7月15日出版的《科学》杂志上报告称,相关研究表明,谷歌等搜索引擎的出现改变了我们学习和记忆信息的方式。在一个遍及搜索引擎的新世界中,更好地理解记忆的工作原理有望改变各个领域的教学和学习方式。
哥伦比亚大学的心理学家贝齐•斯帕罗和同事进行了一系列实验后得出结论说,人们会忘记自己能在网上找到的信息,而记住自己认为无法在网上找到的信息。研究也发现,人们更容易记住在互联网的何处能找到这些信息,而不是……
个人简介
⭐️个人主页:微风洋洋♂️
博客领域:编程基础,后端,大数据,信息安全
写作风格:干货,干货,还是tmd的干货
精选专栏:【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
支持洋锅:点赞、收藏⭐、留言
好久不见,甚是想念!
大家好♂️
我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS网页布局,希望大家读完有所收获,那我辛苦码字也就值了
CSS常用的布局方式主要有定位式和浮动式两种,相应布局属性为定位属性(position)和浮动属性(float)。
使用position属性可以精确控制盒子的位置,其语法格式如下。
position: static |relative | absolute | fixed
设置position属性的值为static,或不做设置即缺省时默认为static,元素按照HTML规则定位。
示例
代码
效果
设置position属性的值为relative时即为相对定位,设置盒子相对其原本位置的定位。相对定位的盒子占用原页面空间。
示例
代码
效果
设置position属性的值为absolute时即为绝对定位,设置盒子相对其具有position设置的父对象进行定位。
示例
代码
效果
绝对定位元素的所有层次父对象均无position属性设置时,该元素以body即浏览窗口为参照绝对定位。如示例15-13中,删除A图片父对象position属性设置,即删除如下代码行:
position: relative;
left:0px;
top:0px;
被定位的元素会挡住部分其他元素,可以通过层叠定位属性(z-index)定义页面元素的层叠次序。z-index的取值可以为负数,表示各元素间层次关系,值大者在上,当为负数时表示该元素位于页面之下。
示例
代码
效果
float属性可以控制盒子左右浮动,直到边界碰到父对象或另一个浮动对象。
float属性语法格式如下。
float:none|left|right;
设置了向左或向右浮动的盒子,整个盒子会做相应的浮动。浮动盒子不再占用原本在文档中的位置,其后续元素会自动向前填充,遇到浮动对象边界则停止。
示例
代码
效果
浮动设置使用户能够更加自由方便地布局网页,但有时某些盒子可能需要清除浮动设置,这时需要用到浮动属性clear,其语法格式如下:
clear:none|left|right|both;
示例
代码
效果
网页布局结构按照列数可分为单列、两列和三列等几种布局。
单列布局相对简单,很多复杂布局往往以单列布局为基础。单列布局中的对象位置可固定在左侧、浮在右侧或居中;宽度可用像素值固定、百分比或相对于字号设置。
举个例子
代码
用HTML5结构元素布局
搜索引擎改变记忆方式 人们忘记网上找到的信息
Article:美国科学家在7月15日出版的《科学》杂志上报告称,相关研究表明,谷歌等搜索引擎的出现改变了我们学习和记忆信息的方式。在一个遍及搜索引擎的新世界中,更好地理解记忆的工作原理有望改变各个领域的教学和学习方式。
哥伦比亚大学的心理学家贝齐•斯帕罗和同事进行了一系列实验后得出结论说,人们会忘记自己能在网上找到的信息,而记住自己认为无法在网上找到的信息。研究也发现,人们更容易记住在互联网的何处能找到这些信息,而不是……
1.传统的两列布局
两列布局使用两个盒子,第一个盒子位置应在页面左侧,第二个盒子(应在页面右侧,可用fixed属性或float属性设定。
思考:如果左右两个盒子没有设置统一的高度“height: 400px”,页面效果会有什么变化呢?
如果使用盒布局,需要设置左右两个盒子的外层容器的box属性,不需要使用float属性。
3.嵌套的2列布局
顶部固定,一列固定、一列变宽的布局是在博客类网站中很受欢迎的布局形式,这类网站常把侧边的导航栏宽度固定,而主体的内容栏宽度是可变的。
与盒布局相关的部分属性
下面例子是一个典型的嵌套2列布局,用到了盒布局中的弹性布局属性-webkit-box-flex。
效果
三列布局可以使用float属性实现,对3个盒子(列)对象分别设定位置和宽度,再设置浮动属性即可。
#left{ height: 400px;
width: 120px;
float: left;
}
#right{ background:#FFC;
height: 400px;
width: 100px;
float: right;
}
#main{
background: #D0FFFF;
height: 400px;
margin-left:120px;
}
1.简单的三列布局
下面例子是一个使用盒布局实现的三列布局。左右两列宽度固定,中间列自适应。
代码
效果
嵌套的三列布局
前面布局采用的策略是将盒子(div块)从上到下、从左到右依次排列。
代码实现
在设计网页之前,首先对网页布局有一个总体思路,然后就可以用盒子对网页进行大致分块设定。
1.用DIV+CSS布局方式实现图文混排效果
举个例子
效果
代码实现
对上面例子进行改进
效果
代码实现
美国著名的《连线》杂志,曾就一系列事物的发展前景向一批各自领域的专家征询。这些专家的看法可能有些武断,但令人欣赏地直奔主题。下面是他们对互联网络所预言的另一张时间进程表:
尼葛洛庞帝
阿伦•凯
代表人物
导航菜单通常分为横向导航菜单和纵向导航菜单。DIV+CSS布局中多通过控制列表样式制作导航菜单,主要用到
、、
等3组标记。
1.建立一级菜单
效果和代码实现
2.定义CSS样式
创建样式#menu,设置菜单整体大小等属性,并添加到 效果和代码实现 3.创建二级菜单 二级导航菜单是指当鼠标经过一级菜单项时,会弹出相应的二级菜单,鼠标离开该项后二级菜单自动消失。接下来在上例的基础上制作二级菜单,以一级菜单项“CSS”为例,在其下添加二级菜单。 效果和代码实现 4.横向二级导航菜单 效果和代码实现 关注,即可提高学习效率。Perfect!
如果觉得这篇文章对你有一丢丢启发的话,不妨 点赞、收藏⭐、留言支持一下,你的支持将是我继续创作的最大动力。下一篇将介绍JS,到时不见不散❤️❤️❤️
由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!