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/[email protected]" 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=#>#是指时间

时间: 2024-08-25 04:28:49

html笔记 仅适用于个人的相关文章

C++笔记(仅C++特性,需C语言基础)

C++复习笔记一(类的声明定义应用与构造函数析构函数部分)const在C语言中是"不能被改变值的变量",而在C++种子则是"一种有类型描述的常量",常量必须初始化,并且不可以改变const int *P=15;const 在*的左边,所以*p是常量,不可以改变int * const p=15;const在*的右边,所以p是常量,但是*p不是,*p是int型,*p的值可以改变const型的引用只能用const型,不能用普通类型来引用,因为普通类型引用可能会修改cons

js调用打印机自动分页的功能(仅适用于IE浏览器)

做个功能需要打印的时候添加分页,哪怕是内容不够也需要分页. 浏览器上显示 打印预览是这样的: 模拟打印出来是这样的 都是显示的是5页,方法很简单.在需要分页的位置加上一行代码: <div class="PageNext"></div> css样式是这样的: .PageNext{page-break-after: always;} 以上就是实现的打印分页的功能. 另外有几个打印的常用方法记录一下. 1.调用打印的方法: wb.execwb(6,6) 2.调用打印预

android中百度地图定位的实现方法(仅适用于真机+WIFI联网环境)

注意:此方法的环境是:真机(小米手机,系统版本为Android4.2.2)+WIFI联网(才能实现最后的运行结果):使用虚拟机调试会出现各种问题. 第一步:下载SDK和申请Key 到百度的网站http://developer.baidu.com/map/ 第二步:然后选择SDK下载.(根据需要下载需要的SDK) 第三步:申请key http://developer.baidu.com/map/index.php?title=androidsdk 然后选择创建应用 需要填写:应用名称和数字签名(S

自动生成pdf书签(仅适用于Adobe Acrobat on windows )

必备软件 1.Adobe Acrobat. 2.AutoBookmark 为adobe acrobat的自动生成书签的插件(我用的这个:AutoBookmark Standard Plug-in),下载安装即可. 3.AutoBookmark的使用文档 写的非常详细,让我觉得没必要再写这个blog了,额还是继续写吧. 具体操作 1.使用Adobe Acrobat打开你想要创建书签的pdf格式文档. 2.选中你想作为书签的文本(例如我的文档里“Chapter 1 Introduction”),然后

MySQL恢复备份读书笔记

1. 任何执行时间长于 wait_timeout或interactive_timeout选项值得备份,都会导致会话被关闭,这也会隐含执行UNLOCK TABLES命令.2. 对于使用FLUSH TABLES WITH READ LOCK的备份策略来讲,一个共同的缺陷是它们需要两个独立的线程来完成备份过程.运行FLUSH TABLES WITH READ LOCK命令, 然后从当前连接退出将自动执行一条UNLOCK TABLES命令.从FLUSH TABLES WITH READ LOCK成功返回

(转)两千行PHP学习笔记

亲们,如约而至的PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. MySQL笔记:一千行MySQL学习笔记http://www.cnblogs.com/shockerli/p/1000-plus-line-mysql-notes.html //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任何输出. /* [命名规则] */ 常量名 类常量建议全大写,单词间用下划线分隔 // MIN_WIDTH 变

世界是数字的重点读书笔记(计算机科普知识)

<世界是数字的>是世界顶尖计算机科学家Brian W.Kernighan写的一本计算机科普类读物,简明扼要但又深入全面地解释了计算机和通信系统背后的秘密,适合计算机初学者和非计算机专业的人读.这真的是一本好书,借Google常务董事长的话: 对计算机.互联网及其背后的奥秘充满好奇的人们,这绝对是一本不容错过的好书. 对于一个计算机已经学了N年的专业人士来说,这本书也许简单了点,不过我还是认真过了一遍,发现也有一定的收货,因为一个人很难掌握本领域里的所有知识,或多或少会有一些欠缺,总会有一些你以

swift学习笔记(七)自动引用计数

与Object-c一样,swift使用自动引用计数来跟踪并管理应用使用的内存.当实例不再被使用时,及retainCount=0时,会自动释放是理所占用的内存空间. 注:引用计数仅适用于类的实例,因为struct和enumeration属于值类型,也就不牵涉引用,所以其存储和管理方式并不是引用计数. 当一个实例被初始化时,系统会自动分配一定的内存空间,用于管理属性和方法.当实例对象不再被使用时,其内存空间被收回. swift中的引用类型分为三种,即Strong强引用,weak弱引用和无主引用unw

Varnish 学习笔记总结

声明:文中内容来自以下四个部分的学习笔记总结: 1.马哥教育马永亮老师讲授的varnish课程 2.高俊峰先生写的书籍<高性能Linux服务器构建实战>中的varnish章节 3.陈明乾先生的51cto博客:http://freeloda.blog.51cto.com/2033581/1297414 4.互联网文档. 特此向以上先贤致敬!! 内容概括: 一 varnish 简要概括 Varnish是一款轻量级的Cache和反向代理软件. 官方网站:https://www.varnish-cac