页面设计总结:
1.首先分析布局 由几部分组成 确定盒子分布 。width, height, margin, background-color:便于查看(body使用border 1px solidblack margin:0 auto 查看位置)
3.必要时候可以使用父子选择器控制特定标签;
4.可以定义一个字体的类选择器 设置常用字体。
5HTML的基本结构:
<元素 属性 =‘属性值’。。。>内容</元素>
如果没有内容,可以这样写
<元素 属性 =‘属性值’。。。/ >
<元素 属性 =‘属性值’。。。></元素>
特别注释:元素就是标记
HTML基本语法知识点
1、html 的超链接
<a href=”mailto:[email protected]”>给管理员写信</a>
2、html 图像元素
<img src=”图片的路径”width=”宽度”height=”高度”></img>3、html 表格
<table border=”边框宽度”cellspacing=”空隙大小”cellpadding=”填充大小” ><tr align =”center”><td>1</td><td>2</td><td>4</td></tr></table><tr></tr>表示行
<td></td>表示列
cellspacing=”空隙大小:指两个列,行间的距离。
cellpadding=”填充大小:各行各列中的内容被填充,这样就会在一定程度上撑大格子。
4、html 列表---无序列表
<ul type=”属性值”>
<li>列表内容</li>
</ul>
5、html 列表---有序列表
<ol type=”属性值” start=”起始值”>
<li>列表内容</li>
</ol>
6、html 列表---框架
<frameset frameborder=”边框大小”cols=”各窗口百分比,隔开”
rows=” 各窗口百分比”>
<frame name=”给frame取名”src=”html路径”noresize>
</frameset>
7、html form (表单)元素
html的表单元素,主要用于让用户输入数据,并提交给服务器。
基本语法:
<form action = “url” method = “提交的方法(get/post),默认是get”>
各种元素[输入框,下拉列表,文本域,密码框。。。]
</form>
表单元素的格式:
<input type = * name = **/>
type = text[文本框] password[密码框] hidden [隐藏框] checkbox[复选框]
radio[单选框] submit[提交按钮] reset[重置按钮] image [图片按钮]
name 是你给该表单元素取名
div+css(层叠样式表单)(使得内容和样式分离)
Div是用于存放内容(文字,图片,元素)的容器。
Css 是用于指定放在div中的内容如何显示,包括这些内容的位置和外观。
选择器
①类选择器 ②id选择器 ③html选择器 ④通配符选择器
1、类选择器
类选择器的语法:
.类选择器名{
属性名:属性值;
。。。
}
2、id 选择器
选择器基本语法:#id 选择器名{
属性名:属性值;
}
3、html 选择器
基本语法:html 元素名称{
属性名:属性值;
}
例:
/*html 的选择器*/body {
color:orange;
}
4、通配符选择器
如果希望所有的元素都符合一种样式,可以使用通配符选择器。基本语法:
*{
属性名:属性值;
}
内部CSS
<html>
<head>
...............
<style type="text/css">
. style{
font-size: 20px
color: red;
}
</head>
<body>
<span class =”style1”>栏目一</span><br/>
.................
</body>
</html>
外部CSS
.......
<head>
<link href=”my.css” type=”text/css” rel=”stylesheet”/>
</head>
<body>
<div class=”style1”>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
..........
</table>
</div>
</body>
</html>
My.css文件
.style1{
width:300px;
heigth:200px;
}
/*子选择器*/
.style1 table{
width:298px;
heigth:180px;
}
块元素和行内元素
行内元素(inline element):特点是只占内容的宽度,默认不会换行,行内元素一般放文本或者其它的行内元素。常见内联元素<span><a>块元素(block element):特点不管内容有多少,他要换行,同时沾满整行,块元素可以放文本,行内元素,块元素。常见块元素<div><p>
块元素和行内元素的转换
如果我们希望一个元素按照块元素方式显示,则:
style = “Display:block;”->转为块元素(比如a)
如果我们希望一个元素按照行内元素方式显示,则:
style =Display:inline; ->转为行内元素(比如div)
浮动
左浮动: float:left 是指让该元素,尽量向左边移动,让出自己右边空间,给下一个元素显示。
右浮动: float:right 是指让该元素,尽量向右移动,直到碰到他的父元素的右边界。(特别强调:浮动对块元素和行内元素都生效!)
清除浮动:clear:right; clear:left; clear:both
如果我们的div框很多,外面的框无法容纳水平排列的浮动div元素,那么其它浮动块向下移动,直到有足够的空间。
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”
定位
position:static :元素正常生成
position:relative :元素框偏移某个距离,它原本空间任保留
position:absolute :元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
position:fixed :元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。(以body本身来定位)
//Relative.html源代码:
<div class="s1">Sunny</div>
<div id="special" class="s1">Alison</div>
<div class="s1">Alice</div>
<div class="s1">Jasun</div>
//Relative.css源代码:
.s1{width:100px;
height: 60px;
background-color: yellow;
margin-left: 10px;
float: left;}
#special{position: relative;/*这里我们使用了相对定位*/ left:40px;/*在原来的位置,向右移动大小(如果向左移动,则值是负数*/
top:70px;/*在原来的位置,向下移动大小(如果向上移动,则值是负数)*/}