http://learning.artech.cn/category/css-div-web-design
CSS/DIV网页设计视频教程目录
2007年05月01日 星期二
欢迎您来到前沿视频教室,下面列出的是CSS/DIV网页设计视频教程列表,我们还会不断地推出相关的课程, 如果您有兴趣,欢迎您常来这里看一看!
CSS基础知识与核心概念
CSS初探 - CSS基本知识 - 第1课
CSS基本语法与核心概念 - CSS基本知识 - 第2课
设置丰富的文字效果 - CSS基本知识 - 第3课
CSS/DIV布局专题讲解
设置图片效果 - CSS/DIV专题讲解 - 第1课
设置网页背景 - CSS/DIV布局专题讲解 - 第2课
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课
用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课
CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课
理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课
CSS排版 - CSS/DIV布局专题讲解 - 第8课
网页变幻 - CSS/DIV布局专题讲解 - 第9课
CSS与其他技术
CSS与Javascript的综合应用 - CSS与其他技术 - 第1课
CSS与XML的综合运用 - CSS与其他技术 - 第2课
CSS与AJAX的综合应用 - CSS与其他技术 - 第3课
CSS/DIV综合实践
博客设计DIY - CSS/DIV综合实践 - 第1课
小型工作室 - CSS/DIV综合实践 - 第2课
公司网站 - CSS/DIV综合实践 - 第3课
购物网站设计 - CSS/DIV综合实践 - 第4课
旅游观光网站设计 - CSS/DIV综合实践 - 第5课
div+css布局如何插入视频的方法。
如下参考:
1.创建一个新的HTML文件test.html来解释div+CSS布局的基本过程。
2.在test.html文件中,设置正文的样式,将margin设置为0,padding设置为0,将text对齐到文本的中心。
3.在test.html文件中,为了便于解释,将所有div的高度设置为200px,内容的颜色设置为红色。
4.在test.html文件中,使用div创建页面的标题,使用margin:0auto设置divcenter,将其宽度设置为800px,背景颜色设置为灰色。
5.在test.html文件中,使用div创建页面的中间部分,使用margin:0auto设置divcenter,并将其宽度设置为800px。
6.在test.html文件中,在页面的中间创建两个div,将中间分成两个部分,每个部分的宽度为50%。左边部分使用float:left来设置左边的float,右边部分使用float:right来设置右边的float。
7.在test.html文件中,使用div创建页面的底部。使用clear:两者都清除上面div的浮动,以避免影响底部的布局。同时,使用margin:0auto来设置divcenter,宽度为800px,背景颜色为#000fff。
8.在浏览器中打开test.html文件,布局插入视频的问题就解决了。
CSS是前端基础技能之一,而CSS最重要的功能就是网站布局。CSS布局方式有很多,从远古时代的table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出),下面咱们简单谈一谈各种布局的用法及其优缺点。
table布局就是将网站当做一个表单来做,这里不做展开,因为现在基本不这么用了。
float:浮动。float刚开始并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题的。
如下图:
这种常见的图文效果,没有float之前是很难达到的。有了float之后只需要加一个float:left,轻松搞定。
‘咦,如果float可以处理图文的问题,那用来布局不也可以吗?’,后来有人用float试着用于网页布局,还真的可以。
网页中最常见的布局如下:
用float做
比table布局要方便不少,不过float随之而来的带来了 “浮动高度塌陷”的问题:
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;
引申:网页元素一般分为 普通流,浮动流,定位流。其中普通流和浮动流在一个层级上,定位流>浮动流>普通流。
之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法,非常麻烦。
position:定位;顾名思义,就是确定位置。position同样可以用做网页布局。
同样的效果
不过position需要计算每一个元素的位置,而且这个位置是定死的,略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。
关键点:子绝父相。需要定位的元素用absolute绝对定位,其父元素用 relative相对定位。还有fixed固定定位,他是以html为父元素的定位。
flex:弹性;弹性布局很好的解决了float和position的问题,非常好用。
使用方法:
在父元素使用 display:flex确定弹性作用的范围。
然后
justify-content:center(space-around,space-between等);水平方向布局;
align-items:center(flex-start,flex-end等)垂直方向布局;
不过flex不兼容IE8及以下的浏览器。
大部分情况下flex布局已经能满足需要,不过flex只能用作一维布局,也就是说,flex一次只能作用于一条线。如果想要进行二维布局,必须翻转坐标二次弹性,这样会显得不够优雅,这时候grid(网格)布局就发展起来了。
grid布局用法和flex相似,但是作用于二维布局。
先在父元素使用 display:grid确定网格作用范围;
然后
grid-template-columns: 40px 50px auto 50px 40px(行)
grid-template-rows: 25% 100px auto(列)
等等属性,这里只简单介绍,大家了解有这个东西就行。
在现实工作用,以flex为主,position辅助已经足够应对所有问题。