css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义。样式可以分为嵌入式样式表,外部样式表,内联样式表。

外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中。

语法:<link rel="stylesheet" type="text/css" href="样式表的url"/>

嵌入式样式表:在web文档的<head>段使用<style>元素将样式包含在网页内部。仅用于该网页。

语法:<style type="text/css"/>样式定义</style>

内联样式表:多数的HTML标记都包含有一个style属性,允许指定在标记显示时的样式。

语法:<html标记 style="样式定义"></html标记>

比如想要将一个特定的<h1>标记的文本显示为红色。

<h1 style="color:red;">文本</h1>

多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是有优先级的,从小到大为:用户浏览器的设置,外部样式表,嵌入式样式表,内联样式表。

css页面布局基础:

css盒模型:属性包括border(边框),margin(外边据),padding(内边距),width(宽),height(高),这些属性可以用快捷方式表示,顺序为上右下左,值之间用空格隔开。

如;margin:10px 20px auto auto;

正常文档流的布局:在正常流中,文本元素按照从上到下,从左到右的格式布局。块级元素从上到下依次排列,内嵌元素从左到右一次排列。通过浮动或者定位,可以把元素从正常文档流中脱离出来,从而实现与正常文档流不同的复杂的布局。

元素浮动:为使元素浮动到左边或者右边,并且是后面的文本环绕它,我们可以对该元素应用float属性,float属性的取值包括三个:none(不浮动),left(左浮动),right(右浮动)。float属性可以应用于任何元素。

元素浮动的基本行为:1.当float不为none的时候,元素将被视作块级,等于设置display:block;2.当浮动一个文本类型元素时,必须指定该元素的width属性,如果不设置宽度,那么元素内容就会折叠到最小的宽度。3.浮动元素停留在包含它的父级元素的内容区域,不会穿过这个区域。4.浮动元素的margin值是不会重合的。

元素浮动可以很好的节省布局空间。但是有时候并不是最恰当的。这时候可以用clear属性来清楚浮动后的某一区域,让后续的元素从正确位置显示。clear属性的值有:none(允许元素两边都可以有浮动元素),left(不允许左边有浮动元素),right(不允许右边有浮动元素),both(不允许有浮动元素),clear属性只能用于块级元素。

在页面布局中,有时候想要把内容显示到指定的内容,按照正常文档流来说,有时候很难放在想要的位置。这时候可以用定位(position属性)来解决问题。position属性有4个值:static,relative.absolute,fixed.

static:静态定位,表示按照正常定位方式,元素盒按照在文档流中出现的顺序一次格式化。

relative:相对定位,移动元素盒,它在文档流中的原始空间会保留下来,不会被占用。{position:relative;top:;right:;bottom:;left:;}

absolute:绝对定位,移动元素盒,它在文档流中的原始空间不会被保留,不会影响周边元素的布局。{position:absolute;top:;right:;bottom:;left:;}

fixed:固定定位,和absolute类似,元素从文档流中脱离出来,但是它是相对于视口定位,不是对于容器块定位。大多数情况下,视口就是指浏览器窗口。{position:fixed;top:;right:;bottom:;left:;}

元素溢出处理:如果一个元素的大小设置太小,以致不能包含其内容,那么可以使用overflow属性指定其内容不能填充时该如何处理。

overflow的取值可以是visible,hidden,scroll,auto,

visible表示不裁剪内容,强制显示元素的内容。

hidden表示裁剪内容,并不显示超出对象尺寸的内容。

scroll表示裁剪内容,同事提供滚动条,显示全部内容。

auto表示只有在必要的时候才裁剪内容并添加滚动条。

注意:如果要使用overflow属性,那么该元素的position属性必须是绝对定位。

元素的可见性:在CSS中,有两个属性可以设置元素的可见性。display和visibility。

display属性常用的值有:none,block,inline。

visibility属性的值有:visible(可见),hidden(影藏),inherit(继承)。

这2种的区别在于:display影藏元素时,等于是脱离文档,不占据任何空间。而visibility影藏元素时,原有空间仍会被占据。

css可以设置动画效果,下面是一个动画效果的代码:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#div2{
z-index: 1;
position: absolute;
top: 50px;
left: 400px;
animation-name: left-a ,left-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div3{
z-index: 3;
position: absolute;
top: 50px;
left: 400px;
animation-name: center-a ,center-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div4{
z-index: 2;
position: absolute;
top: 50px;
left: 400px;
animation-name: right-a ,right-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;

}
@keyframes left-a
{
0% {transform: scale(0,0) ;position: absolute;top:50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 100px;}
}
@keyframes left-b
{
0%{ left: 100px;}
15%{ left: 100px;z-index: 1;}
45%{ left:700px;}
55%{ left: 700px;z-index: 2;}
70%{ left: 400px;}
85%{ left: 400px;z-index: 3;}
100%{ left:100px ;}
}
@keyframes center-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 400px;}
}
@keyframes center-b
{
0%{ left: 400px;}
15%{ left: 400px;z-index: 3;}
45%{ left:100px;}
55%{ left: 100px;z-index: 2;}
70%{ left: 700px;}
85%{ left: 700px;z-index: 1;}
100%{ left:400px ;}
}
@keyframes right-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1);position: absolute;top: 100px;left: 700px;}
}
@keyframes right-b
{
0%{ left: 700px;}
15%{ left: 700px;z-index: 2;}
45%{ left:400px;}
55%{ left: 400px;z-index: 3;}
70%{ left: 100px;}
85%{ left: 100px;z-index: 1;}
100%{ left:700px ;}
}
</style>
</head>
<body>

<div id="div2"><img src="image/gallery-img1.png" /></div>
<div id="div3"><img src="image/gallery-img2.png" /></div>
<div id="div4"><img src="image/gallery-img3.png" /></div>
</body>
</html>

在做网页的过程中,首先要布好局,布局好了,在往里添加内容,这样做起来才有思路,不会因为一些原因而使得思绪混乱,前面写完的代码,后面看就不知道代表的是什么了。在写代码的时候,我们给元素命组名或者id值的时候,一定要清晰明了,别全文档乱命名,想起什么就是什么,这样会混乱,不好改动。如果哪里需要改动,都不知道找哪里。

时间: 2024-10-26 14:32:15

css基础css页面布局基础的相关文章

用div和css样式控制页面布局

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>网页布局练习</title> 6 7 <link href=&qu

第五章 CSS页面布局基础

1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的元素影响其相邻元素的位置. 2.块级元素 前后换行显示,默认状态下独占一行: 块级元素可以作为容器,包含其他行级元素.块级元素: 块级元素有一定高度和宽度,可以通过width和height来设置. div,table,p,h1-h6,ul,form等等 3.行级元素(内嵌元素.内联标签) 类似于文本

CSS页面布局基础3——元素浮动

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等. 为使元素浮动到左边或者右边,并使后面的文本环绕它,可使用float属性,float属性的取值是:none(不浮动),left(向左浮动),right(向右浮动). 使用float属性后,浮动的元素从正常文档流中脱离出来,同时对布局中的其他元素造成一定的影响. 浮动可以应用于任何元素. 我个人认为我们可以这样理解浮动(如有什么不

css页面布局基础

去掉无需列表的原点list-style:none首字大写list-style:upper-coman变成小写list-style:lower-roman英文首字母大写alpha小写lower-alpha 虚线 boder: 1px dashed #58a  : 点线 boder:10px dotted #58a: 双实线 doble 定义四个方向的样式 boder-top:2px solid  red: right:2px dashed  red: botton: dotton        

css 中的grid布局基础

CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准. grid布局的优点: 1:固定和灵活的轨道尺寸 2:可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置.网格还包含一种算法,用于控制未在网格上显示位置的项目的放置. 3:在需要时添加其他行和列 4:网格包含对齐功能,以便我们可以控制项目放置到网格区域后的对齐方式,以及整个网格的对齐

【html+css】关于页面布局中遇到的问题记录

关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右. text-align:center的测试: .text-align{text-align:center;} <div class="text-align"> <p>jdif</p> <img src="images/pic1.jpg">

CSS布局基础

CSS布局基础 1.块区域介绍 1: <body> 2: <div> 3: <p>This is a pargraph.</p> 4: </div> 5: </body> p 元素的包含块是 div 元素,因为作为块级元素,表单元格或行内元素,这是最近的祖先元素,类似的,div的包含块是 body. 因此,p的布局依赖于 div的布局,而div的布局则依赖于 body的布局. 块级元素会自动重启一行. 2. 块级元素 正常流布局 一般

CSS布局基础汇总

常见布局种类 一列布局 两列布局 三列布局 CSS中的定位机制 网页简单布局之结构与表现的原则 CSS元素隐藏 CSS中清除浮动最优方法 DIVCSS规范命名集合 DIVCSS命名参考表 导入样式及脚本 传统方式 新规范 常见布局种类 一列布局 自上而下的,一般头部进行固定宽度,高度设置为自动 两列布局 自适应的两列布局:width用百分比+float: 固定宽度的两列布局:width:具体值/父级元素的宽度确定,width+百分比:+float; 如果没有加float的话,不能实现并排的两列布

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/