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         ;

left:            double        ;

div的长宽一样的话  可设置成圆

boder-redins:50%

元素阴影

box-shadow:5px 5px 2px#000;

线性渐变

background:liner-gradiedt(to right,red,yellow);

循环

@keyfeames box{

from{

background-color;yellow

}

to{background-color;red}

}

也可以用比分比符号

trasition:all linear 1s;一秒匀速变换

行类标记转换为块级

change a{diaplay:block

line-height:200px

}

padding值不能为负 margin可以

垂直防线外边距会重叠,取最大值

浮动

float:left;左浮动

right 右浮动

加上父级再浮动  可以排序浮动后的顺序

消除最后一项浮动

list-child{

clear both

}

子级浮动父级高度会塌陷

行嘞元素浮动后会视为块级

在浮动文本时设置宽度

时间: 2024-12-23 18:46:42

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

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

第五章 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属性后,浮动的元素从正常文档流中脱离出来,同时对布局中的其他元素造成一定的影响. 浮动可以应用于任何元素. 我个人认为我们可以这样理解浮动(如有什么不

div+css页面布局-html代码

<html> <head> <title>div+css页面布局</title> <meta http-equiv="content-type" content="text/html" > <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head&

html+css页面布局

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

CSS页面布局

<1>页面布局 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标准的页面的布局首页</title> <style ty

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty

简单的html+css页面布局

页面布局如下: 对应的html代码: