一、一些比较好用的html小技巧:
1)在文本<head>标签中加入<meta charset="uft-8">,这样就不用考虑文本的字符编码问题了。
2)html是标记语言,不是编程语言
3)在某个页面停留几秒之后刷新到新的网页<meta http-equiv=”refresh” content=”2;URL=http://…”/>
4)html中的注释语法是<!--语句-->,但是在css中是// 或者/**/
5)用颜色值的时候,单词用来调试,十六进制用来一般的颜色填入,rgba()用于加入带有透明的情况中
6)锚点链接跳转<a href="#log"></a> ,跳转到带有<a id="log"></a>或者<a name="log"></a>的那一行
7)点击图像跳转链接,用<a>嵌套<img>,点击图像某一部分实现跳转,用图像地图
<img src=”1.jpg” usemap=”#find”>
<map name=”find”>
<area shape=”circle(圆)|rect(矩形)|poly(多边形)” coords=“” href=“”/>
</map>
8)colspan 左右合并 rowspan 上下合并
深层含义:将某个<td>的格增大
9)<frameset>与<body>不共存,一个<frame/>一个页面
<frameset>
<frame/>
</frameset>
<body>中也可以由内嵌页面<iframe name=""></iframe>
10)<head>中加入<base target="_blank"/>默认所有链接都在新标签中打开
11)<marquee> (滚动标签)
二、css中的一些小技巧
1)在最开始的时候对各个该清零的标签清零
<style>
*{
margin:0px;
padding:0px;
list-style-type:none;
text-decoration:none;
}
这样在开始把所有的标签的外边距,内边距,列表标记和下划线都去了,这样比较方便。
注:
1 连同<body>的内外边距都去了
</style>
2)字体的粗细 font-weight为100~900,整数。
3)用2em表示两个字符的距离。
4)padding不能设置负值,但是margin可以
5)块状元素默认有外边距,清零的时候最好去掉。
6)导航栏的设置方式 用浮动 用行内元素(作用于li)
7)字体嵌入方法:
将字体放在自己的文件夹里,然后在css加入如下代码
@font-face(font-family:”宋体”;src:url(););
8)清除浮动的几个方式1 clear
2 overflow:hidden;
3 div:after
{
clear:both;
display:;
visible:hidden;
content:””;
}
9)对一些框的处理
color
width
height
display:none ,block,inline,inline-block
line-height
text-align
border-radius:圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius:xxpx;
border
10)不太常用的属性
border-collapse 合并表格 separate 分开 collapse 合并
border-spacing 单元格边框之间的距离
background-position 背景图像位置,可以用top left什么的(最多两个词),
也可以用像素值
background-attachment 背景图像是否滚动,fixed不滚动,scroll滚动
background-clip 背景图像被裁剪的范围,content-box,border-box,
padding-box, 内容框,边框,内边距框
background-origin 定义背景图像相对于哪里定位,content-box,
border-box,padding-box, 内容框,边框,内边距框
text-overflow 文本溢出时的属性 ellipsis 多余的显示为省略号
text-shadow 文本阴影text-shadow:水距 垂距模糊距模糊颜色
box-shadow 盒子阴影text-shadow:水距 垂距模糊距模糊颜色
ul 默认的宽是屏幕宽
hr 默认的内容是空,所以显示是一条线,相当于div中没
有文字,只有border
overflow visible 内容不会被修剪,呈现在元素框之外
hidden 内容被修剪
scroll auto
clip 裁剪一个矩形区域,剩下的区域根据overflow选择,值
为rect(top,right,bottom,left)
:before :after 在某个元素之前或者之后添加东西,要有属性content
:input 获得焦点的元素
visibility visible 可视的 hidden 隐藏的
collapse 隐藏table单元格
cursor 改变光标的样式
opacity:0.4; 改变透明度值为0.0到1.0,越小越透明
filter:alpha(opacity=40); 针对IE8以及以前版本用这个
css3中可以为一个background添加多个图片背景
background-image:url(1.jpg),url(2.jpg);
11)img是行内元素
12)在HTML布局当中出现<input>表单无法正常对齐的情况,或者是包围着文字的div框无法对齐,如下图:
外边的蓝色框是一个div框,里边的红色字体是嵌套的一个<img>标签,后边的红色框是与<img>并列的一个<input>标签
但是<input>标签并没有和蓝色框对齐。
这是因为在一个嵌套的框中,<input>中的文字作为基准最后决定了<input>的位置。在嵌套的框中,小框中如果需要填入文字,那么就要先考虑这个框中文字的情况,再来考虑框的布局
可以在父元素position:relative。子元素用position:absolute
13)写css时候的步骤
/*基础布局*/
/*特殊代码*/
/*调整代码*/