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;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=#>#是指时间

上一篇:Cisco IOS IP Service Level Agreementv (IP SLA)


下一篇:JS 九宫格算法 用原生js实现