标签：
如何使图片与文本框上下对齐
其实就给<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;width: 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=#>#是指时间
标签：
原文地址：http://www.cnblogs.com/love1226/p/4438064.html
