html+css基础

完整的HTML结构

<!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">

<head>

<title></title>

</head>

<body>

</body>

</html>

 

   样式的引用

  一。内部编写

<head>

<title> </title>

<style type="text/css">

body {background:black; text-spacing:0.5em}

.div_css1 {align="center" margin:20px}

.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}

</style>

<div class="">

(if ues:   so use the style just 1 times)!!!

#div_css {}

<div id="">

(or ues:    so don‘t write"class or id =?" )

div.p {}

div p {}

二。外部引用

<link rel="stylesheet" type="text/css" href="xx.css">

 

 超链接的样式

a {}         // all super links

a:link {}         //no linked links

a:visited{}           //alredy linked links

a:hover{}         //on mose move to the link 

a:action{}      // 点击时

 

  插入flash文件

<object type="application/x-shockwave-flash" date="///" width="" height="" id="">

<param name="movie" value="///"/>

<param name="allowscriptAcess" value="sameDomain"/>

<param name="quality" value="best"/>

<param name="bgcolor" value="#FFFFFF"/>

<param name="scale" value="noScale"/>

<param name="salign" calue="TL"/>

<param name="FlashVars" value="playerMode=embedded"/>

</object> 

                                               

  插入视频

<object type="video/x-ms-wmv" date="////xx" width="" height="">

<param name="src" value="////xx"/>

<param name="autostart" value="true"/>

<param name="controller" value="true"/>

</object>

 

 插入网页块

<iframe 

src="xx"

width=""

height=""

scrolling="auto"

frameborder="o"

name="xx">

</iframe>

 

插入表单

<form action="#" name="" id="" method="post"> </form>

   

 一。文本输入(账号,密码)

账号<input type="text" name="" id="" maxlenth=""/>

密码<input type="password" name="" id="" maxlenth=""/>

 

 二。提交表单

<input type="submit" name="" id="" value="确认"></input>

  

 三。单选

<input type="radio" name="" id="" value="xx">xx</input>

<input type="radio" name="" id="" value="xx">xx</input>

 

四。多选

<input type="checkbox" name="" id="" vslue="xx">xx</input>

<input type="checkbox" name="" id="" vslue="xx">xx</input>

<input type="checkbox" name="" id="" vslue="xx">xx</input>

 

 五。下拉菜单

<select name="" id="">

<option vslue="xx">xx</option>

<option vslue="xx">xx</option>

<option vslue="xx">xx</option>

</select>

     

六。列表(没有下拉)

<select name="" id="" size="个数">

<option value="">xx</optin>

.......

......

</select>

                                    

  悬浮文字框

<fieldset>

<legend>xx</legend>

</fieldset>

     

  滚动文字

<maquee direction="up || left" scrollamount="0-x" onmouseover="stop()" onmouseout="start()">

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

</marquee>    

 

 表格

<table>

<tr>

<td>xx</td>

</tr>

<tr>

<td colspan="num">xx</td>   //合并横向

<td rowspan="num">xx</td>   //合并竖向

</tr>

</table>

 

 文字的一些属性

设置元素内容的文本属性

(1)举例设置文本首行缩进

   text-indent:2em;

(2)举例设置文本对齐方式

   text-align:left | right | center;

(3)举例设置文本修饰方式

   text-decoration:underline;

(4)举例设置字间距

   letter-spacing:2em;

(5)举例设置词间距

   word-spacing:0.5em;

(6)举例空白显示形式 P56

   white-space:pre;

外边距margin:围绕在元素边框之外的可选区域。

内边距padding:文本内容到边框之间的可选区域

 

 元素浮动

浮动:

float

有2个方向: left  right none(不浮动)

对于文字浮动,必须设置高度,宽度,如果不设,后后果自负。

<img style="float:right" src="..."/>

清除浮动:

clear:none;  //允许元素的两边都可以有浮动

clear:left;  //不允许左边有浮动元素

clear:right; //不允许右边有浮动元素

clear:both;  //两边都不允许有浮动元素

 

  定位类型position

 分类:

static(静止)此为默认,即按照正常的文本流,占用正常的位置。

fixed(固定的) 相对于浏览器窗口定位(保留原位置)

 position:absolute;  

绝对定位:相对于父级元素(被包含容器)。

position:relative; 

相对定位:相对于没有设置position时的正常位置定位

原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV,IMG等等。)

例子:

<head>

<style type="text/css">

.div_1 {width:150px;height:200px;}

.text1 {width:200px;height:100px;left:160px;}

</style>

</head>

<body>

<div>

<div class="div_1" style="position:absolute;">

哈,我是一个帅哥

</div>

<div class="text1" style="position:absolute;">

是不是哦,我晕你

</div>

<div style="position:relative;left:10px;top:15px;">

我看看行不行。</div>

</div>

</body>

运行结果为:哈我是一个帅哥  是不是哦,我晕你

                  我看看行不行。

解释:“哈我是一个帅哥”用的是absolute 绝对定位,它相对于第一个DIV来定位,因为第一个DIV是它的父级元素,将它包含在里面。所以它出现在顶部起头。(因为没对其设置left 和top等)

“是不是哦,我晕你”也是absolute 绝对定位,它相对于第一个DIV定位,设置了left值为160px,大于上一个div的宽度,所以不会重合。

“我看看行不行”用的是relative 相对定位,它相对与父级元素定位,也就是第一个DIV,它定位的位置从父级元素里面的最开始位置算起,所以,如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘

                 

指定裁剪区域

position:absolute;

clip:rect(top right bottom left);

top:从上到下裁去top的长度。

left:从左到右裁去left的长度。

right:从左到右裁出right的长度。

bottom:从上到下裁出bottom的长度

 

将块级元素转化为字符级元素

display:inline;

 

将字符级元素转化为块级元素

display:block;

 

处理溢出 

position:absolute;(必须为absolute)

overflow:visible;  //溢出区域可见

overflow:hidden;   //溢出区域不可见

overflow:scroll;   //溢出区域出现滚动条

 

 盒模型 

有 margin padding border width  height 

简写时安上右下左顺序来写

如:border-width:1em 2em 2em 2em

注意:上下左右这几个属性:

在设置时如果只出现3个值,则代表上 左右 下  

                 2个值: 上下  左右

                 1个值:全部  =出现4个一样的值

 

 插入多媒体

<embed src="1.swf" width=300 height=200></embed>

<embed src="1.mp3" width=300 height=200></embed>

<embed src="1.wmv" width=300 height=200></embed> 

转载

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。