如何使图片与文本框上下对齐
其实就给<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=#>#是指时间