www.baike369.com
百科369 > 网页制作 > CSS教程

CSS教程

CSS页面板块位置的确定

CSS页面板块位置的确定

页面中各个板块位置的确定是通过定义相关的CSS属性来实现的。根据不同的页面结构和内容,要灵活地选择各种布局方法。下面以效果图:CSS页面板块划分的效果图注:该效果图在“CSS页面框架”中进行了讲解。所...

CSS页面框架

CSS页面框架

建立一个CSS页面框架,主要包括三部分内容:首先使用<div>元素,将页面划分为几个板块。然后确定每个板块显示的位置,也就是确定页面的结构。最后使用CSS中的相关属性,将每个板块定义在适当的位置。CS...

CSS容器和内容大小都固定的垂直居中的代码设置实例

CSS容器和内容大小都固定的垂直居中的代码设置实例

当父元素大小固定的时候:如果子元素为块级元素,则很难实现任何内容都能够垂直居中。如果子元素为行内元素,例如图片等内容,则可以通过定义行高的方式实现垂直居中。由于父元素的高度已经确定,所以可以通过定义行...

CSS内容大小固定时定义垂直居中的代码设置实例

CSS内容大小固定时定义垂直居中的代码设置实例

已知子元素的大小时,如果将该子元素放到任何大小的父元素中,子元素都能够垂直居中显示,则可以使用相对定位属性和负的边界属性值来实现。由于子元素的高度已经确定,所以可以首先使用相对定位属性将子元素定位在父...

CSS使用子元素的定位属性定义垂直居中的代码设置实例

CSS使用子元素的定位属性定义垂直居中的代码设置实例

由于父元素和子元素中都定义了固定的高度,因此可以在子元素中使用绝对或相对定位属性定义子元素的位置,达到垂直居中的效果。实例使用子元素的定位属性(position属性)定义垂直居中的实例的源代码如下:上...

CSS使用子元素的边界属性定义垂直居中的代码设置实例

CSS使用子元素的边界属性定义垂直居中的代码设置实例

由于父元素和子元素都定义了固定的高度,所以也可以在子元素中定义上边界属性,使子元素与父元素的上下边线分开相同的距离。实例使用子元素的边界属性(margin属性)定义垂直居中的实例的源代码如下:上面的代...

CSS使用父元素的补白属性定义垂直居中的代码设置实例

CSS使用父元素的补白属性定义垂直居中的代码设置实例

在CSS中,在定义子元素垂直居中显示的时候,如果父元素和子元素的大小都确定,就可以使用两个元素的补白属性来定义元素的垂直居中了。实例使用父元素的补白属性(padding属性)定义垂直居中的实例的源代码...

CSS使用边界属性定义垂直居中的代码设置实例

CSS使用边界属性定义垂直居中的代码设置实例

在CSS中,在子元素中定义margin属性的两个边界属性值为auto时,元素无法显示垂直居中的效果。实例使用margin属性定义垂直居中的实例的源代码如下:在上面的代码中,在子元素<p>中定义了垂直方...

CSS使用垂直居中属性定义垂直居中的代码设置实例

CSS使用垂直居中属性定义垂直居中的代码设置实例

在CSS中,使用vertical-align属性定义垂直居中。但是,vertical-align属性只能作用于行内元素,在定义块级元素内容的居中时,无法显示居中的效果。实例使用vertical-ali...

CSS使用边界属性定义水平居中的代码设置实例

CSS使用边界属性定义水平居中的代码设置实例

在讲解盒子模型的时候曾经讲解过,块级元素在水平方向上由5个部分组成,元素的内容和背景只显示在边框所包围的区域中。所以,如果定义子元素水平居中时,可以将margin属性左右两边的边界属性值定义为auto...

CSS使用水平居中属性定义水平居中的代码设置实例

CSS使用水平居中属性定义水平居中的代码设置实例

水平居中的问题一般出现在块级元素中。因为在行内元素中,无法定义宽度和高度属性,所以行内元素中一般不涉及水平居中的问题。在CSS中,使用水平居中属性(text-align属性),以前还可以定义元素的内容...

CSS定义链接效果的顺序的代码设置实例

CSS定义链接效果的顺序的代码设置实例

在使用CSS属性定义链接显示效果时,可以按照:link、:visited、:hover和:active的顺序来进行定义,也可以不按照这样的顺序而按照其它的顺序进行定义,它们的显示效果都是一样的。实例使...

CSS定义链接访问后的显示效果的代码设置实例

CSS定义链接访问后的显示效果的代码设置实例

在CSS中,使用:visited伪类可以定义链接内容被访问后的各种显示效果。:visited伪类的使用方法如下所示:实例使用:visited伪类的实例的源代码如下:当链接访问后的显示效果如下:提示只有...

CSS定义链接激活的显示效果的代码设置实例

CSS定义链接激活的显示效果的代码设置实例

在CSS中,使用:active伪类可以定义链接激活时的各种显示效果。所谓链接激活,是指鼠标按下与释放之间的那种状态。:active伪类的使用方法如下所示:实例使用:acive伪类的实例的源代码如下:当...

CSS定义链接鼠标悬停的显示效果的代码设置实例

CSS定义链接鼠标悬停的显示效果的代码设置实例

在CSS中,使用:hover伪类可以定义链接鼠标悬停时的各种显示效果。:hover伪类的使用方法如下所示:实例使用:hover伪类的实例的源代码如下:当鼠标悬停在链接内容上时的执行效果如下:...

Copyright© 2011-2016 www.baike369.com All Rights Reserved