如何用CSS进行网页布局-imooc-【更新完毕】

姘搁『发布于2019-08-30 12:46 / 1889人阅读

摘要：中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。而对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

第一章内容简介 1-1 内容简介

网页可以自适应宽度
网页的长度理论上可以无限延长

页面为：

头部

主体部分

底部

分栏又称为分列：

一列布局

二列布局

三列布局

混合布局（用的最多）

布局通过浮动和定位来完成(实现ui界面效果）

第2章用HTML+CSS实现最简单的网页布局效果：一列布局 2-1 一列布局





一列布局




head
main
footer

第3章自适应宽度及固定宽度的二列布局的实现 3-1 二列布局

float和position：absolute可以使元素脱离文档流。

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。





二列布局





    left
    right

第4章用position定位方法实现自适应效果的三列布局





三列布局




    
    left
    设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。
    right

第5章用HTML+CSS实现复杂结构的混合布局 5.1 混合布局





混合布局





    head


    left
    
        sub_left
        
        sub_right
        
    

footer

5.3 挑战编程





混合布局编程挑战





top

    right
    left

foot

云服务器 GPU云服务器如何用css 如何用云计算 html如何用如何用html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115053.html

HTML+CSS基础课程-imooc-【更新完毕】

摘要：包含后代选择器包含选择器，即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可...

Heier 2019-08-01 15:04 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

187J3X1 2019-08-29 16:10 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

Drinkey 2019-08-26 12:09 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

LittleLiByte 2019-08-02 11:03 评论0 收藏0
网页布局基础-imooc

摘要：第章自动居中一列布局相关知识点讲解标准文档流块级及行级元素等标准标准，由万维网联盟制定的一系列标准，包括结构化标准和表现标准语言行为标准语言和倡导结构样式行为分离。中的定位机制种的定位机制标准文档流浮动绝对定位。第1章课程简介 1-1 课程简介网页布局：网页制作的基础流式布局浮动布局绝对定位布局与三种布局相关的知识点：标准文档流，盒子模型，float属性，position...

Lucky_Boy 2019-08-30 12:46 评论0 收藏0