html笔记 仅适用于个人

如何使图片与文本框上下对齐  

其实就给<img>加一个属性 align="absmiddle"

<form method="post" action="english.asp">

 <input type="text" name="title" onfocus="this.value=''"  value="请输入单词"> 

 <input type=image src="http://blog.163.com/sjzlgt@126" align="absmiddle">

</form>

3.ul中的问题

在a 连接中给块   设定宽度

行高最好在a里面给

4.a代替ul做的导航

<div id="menu">

<div id="nav">

<a href="http://dzsw.whicu.com/">网站首页</a>

<a href="http://dzsw.whicu.com/list/?107_1.html">文件通知</a>

<a href="http://dzsw.whicu.com/about/?108.html">大赛流程</a>

<a href="http://dzsw.whicu.com/list/?109_1.html">赛事动态</a>

<a href="http://dzsw.whicu.com/list/?110_1.html">风采展示</a>

<a href="http://dzsw.whicu.com/about/?111.html">联系我们</a>

<div class="c">

</div>

</div>

meun 中给背景  nav  中给左右的距离    a中给字之间的距离 还有块   

如果在文字之间有竖条  在a中加背景    看竖条在左边还是右边然后用background-position  定位

特殊处理的 你就搞个 行内样式。  是最简单最直观的了

在做二级或多级菜单中:使图片弄够在前面显示要在menu中加display:block;  position:relative;

在二级菜单中的阴影解决方法是: .menu ul li{margin-right: 16px;margin-left: 15px; 105px;line-height: 27px;text-align: center;position: relative;z-index: 998;float: left;display: inline;}

这是解决第二个ul中出现块向右的结果.menu ul li:hover ul{display:block;position:absolute;left:-15px;}

在导航中如果出现多余的背景就在行内加样式   在定义除去背景，background-iamges：none；就ok

导航可以用伪连接a  代替ul    前提是有一个层要包含a

4.图片还有图片下面的文字的问题

<div class="list">

   <div class="img"><img src="../images/cVe0QaD0.jpg" width="136" height="102"  title="房子"/></div>

                    <div class="img_name"><a href="#">工程案列</a></div>

                    <div class="im_a">分类：<a href="#">工程案列</a></div>

</div>

或者用ul

代替   

5.伪类：

:

6.position也称为定位: 

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

如果出现左右

需要在这个层的最后一个div之前给以浮动

7.图片与文字的对齐的方法

    现在手里在改一个CRM页面的左侧菜单，经常是一碰到改有关js的东西就头大，这次也不例外，遇到的几个小细节问题怎么也解决不了。其中一个就是一个div里面文字前面的小图片比文字高出一些，图片是css样式引用的背景图片，以为可以通过设置一些数值就可以控制图片的位置，使之与文字在一行对齐，于是自己摸索着做一些调整，但一直无济于事。纠结了很久以后才忽然想起来一个css的样式，可以控制图片和文字的位置，可是怎么也想不起来是哪个样式了，就到网上搜索一下。

    文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

设置各对象的vertical-align属性，属性说明：

baseline－将支持valign特性的对象的内容与基线对齐

sub－垂直对齐文本的下标

super－垂直对齐文本的上标

top－将支持valign特性的对象的内容与对象顶端对齐

text-top－将支持valign特性的对象的文本与对象顶端对齐

middle－将支持valign特性的对象的内容与对象中部对齐

bottom－将支持valign特性的对象的文本与对象底端对齐

text-bottom－将支持valign特性的对象的文本与对象顶端对齐

在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了

css+DIV里面是文字和图片居中对齐

来源：http://hi.baidu.com/lxiangsheng/blog/item/7b53ce088cc4ce38e82488e7.html

<div>

<div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<img src="b-grade.png"></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:text-top"><img src="b-grade.png"></span></div>

<br>

<div>文字与图片对齐方式<span style="vertical-align:top"><img src="b-grade.png"></span></div>

</div>

   

方法二：通常图片与文字放在一起的时候图片往往会偏上，通过设置margin-bottom可以达到文字图片底边对齐的目的

我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点)

解决问题最好的办法：.一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的

<img src="bottom.gif" style="margin-bottom:-3px">

或者在样式里面设置

img {

margin-bottom:-3px;

}

这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了.

方法三：

li{

margin: 0px;

padding: 20px 3px 3px 8px;

background: url(images/sohu_06.jpg) no-repeat 0 50%;

list-style-type: none;

list-style-position: inside;

}

<a href="文件名"></a>

<a href="" target-></a>

target-blank（开新的页面）

target-self（替换当前页面）

src是一个外部的网站的链接

框架

框架是将一个大的浏览器窗口划分成若干个区域，每一区域可以显示一个独立的网页，每一个区域可以看成浏览器的小窗口

窗格相当于框架中框架结构<frameset>,使用<frameset>可以划分窗口浏览器

框架找你不能出现body

Frameboder：是否显示框架边线，取值：yes或者是no。1或0

Border：设置框架边线的粗细，

Bordercolor：边框颜色

Framespacing：框架之间的距离

Rows：划分上下行或上中下型框架

            Rows=“80，*”划分上下两个框架，上框架80px；剩余是高度下的框架

Rows=“80，*，100”划分上中下三个框架，上80 中是剩下的框架    下100

Cols：划分左右，或者左中右三个框架

Cols：=“80，*”划分左右两个框架，左80剩下是右框架

Cols：“80，*，100”划分三个左80  右100 中自由伸缩

<frame>是小窗口

Src:指定一个默认的网页

Scrolling：滚动条如何显示：auto是自动显示，yes都显示      no不显示

Noresize：框架是否可以调大小，

Name：是指定小窗口的名称，

<frameset cols="按照列的百分比分隔" rows="按照行的百分比分隔">

<frame 属性。。/>例如<frame src=""noresize是不可拖拽>

<frameset>

例如aa.html和bb.html.他们组成all.html。在all中不能用body抱住

frameborder是边框

framespacing是指边框之间的距离  bordercolor是边框的颜色

内嵌框架iframe：

注意它是行内框架并且是body的子标记，可以理解为在网页中挖一个洞，<iframe 属性=“属性值”>对不起你完蛋</iframe>

Src：指定引入的网页文件

Frameborder:是否显示框架的边框

Width：边框的粗细

Height：框架的高度

Align：框架在body或者网页中的对齐方式，

Srcolling:如何显示滚动条

< name="">

<option value="beijing"></option>

</selcet>

<select size="2" >是指出现两行，而且是二选一

<select size=  multiple>是多选

hidden是指隐藏

<input type="hidden" value="重新输入"> 

<textarea cols=30 rows="" ><textarea>是这文本域

*（password密码框  text是文本框  hidden隐藏框 checkbox复选框 radio是单选框  sumbit提交按钮    reset重置按钮 image是图片）

在列表中出现

要给span一个右浮动

Marquee的属性：块元素

Width：宽度

Height：高度

Direaction：方向：left right up down；

Behavior：滚动的方式，取值：alternate（弹动）slide（滚动）

Scrollamount：滚到的步长值；值越大滚动的越快

Scrodelay：两步之间的停留时间，单位为毫秒，1000毫秒=1秒

<marquee direction=#><font>我会跑</font><img scr=""></marquee>#=right left 

<marquee bihavior=#></marquee>#=scroll一圈一圈的走  slide走一圈就停止  alternate 来回的走 

<marquee scrollmount=#>#是指时间