首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

前端html与css学习笔记总结篇(超详细)

时间：2017-06-10 18:21:13   收藏：0   阅读：2851

第一部分 HTML

第一章 职业规划和前景

第二章 html基本结构

1
2
3
4
<html>
<head></head>
<body></body>
</html>

第三章 html基本标签

1
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
1
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)

第四章 img图片标签与路径

第五章 三种列表的讲解

1
2
3
4
5
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1
2
3
4
5
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
1
2
3
4
5
6
7
8
9
<ul>
<li>柚子
<ul>
<li>沙田柚</li>
<li>蜜柚</li>
</ul>
</li>
<li>荔枝</li>
<li>苹果</li></ul>
1
2
3
4
5
6
7
8
9
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>果汁</li>
<li>牛奶</li></ol>
1
2
3
4
5
6
<dl>
<dt>pc网页制作</dt>
<dd>学习DIV+CSS JS JQ 项目实战</dd>
<dt>手机网页制作</dt>
<dd>手机网页制作实战</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
<dl>
<dt>中国城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
<dd>纽约 </dd>
</dl>

第六章 表单元素(上)

1
2
3
4
<form action="html.do" method="get">
username: <input type="text" name="user" />
<input type="submit" value="提 交" />
</form>
1
2
3
<form>
<input type="hidden" name="hid" value="value">
</form>
1
2
3
4
<select name="" >
<option value=""></option>
<option value="" selected="selected"></option>
<select>

第七章 表单和表格(下)

1
2
3
4
5
6
7
8
9
10
11
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
 
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>

第一部分总结：

HTML部分导图总结

技术分享

技术分享

技术分享

第二部分 CSS

第八章 css基础知识

1
2
3
4
5
6
7
8
9
<div style="position:absolute;top:0px">
<div style="">background-color:gray</div>
<div style="">background-color:#F00</div>
<div style="">background-color:#ffff00</div>
<div style="">background-color:rgb(255,0,255)</div>
<div style="">background-color:hsl(120,80%,50%)</div>
<div style="">background-color:rgba(255,0,255,0.5)</div>
<div style="">background-color:hsla(120,80%,50%,0.5)</div>
</div>

技术分享

1
2
3
4
5
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>

第九章 css选择器(上)

第十章 css选择器(下)

第十一章 背景属性

第十二章 文字文本属性

第十三章 盒子模型

补充盒子模型内容

技术分享

技术分享

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

第十四章 块元素、行元素与溢出

第十五章 定位

技术分享
技术分享

第十六章 框架

1
2
3
4
5
6
7
8
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>内容</body>
</noframes>
</frameset>

第十七章 css高级属性

1
2
3
4
5
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}

技术分享

技术分享

技术分享

第三部分 附录

附录一 DIV命名规范

附录二 CSS精灵

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0;
/*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
 
a:hover {
background-position:0 -66px;
/*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
background-position:0 -132px;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}

附录三 一些tips解决方案

页面优化实践
写DIV+CSS 的一些常识
常用代码片段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
 
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
1
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
1
table-layout: fixed; word-break: break-all;;border-collapse: collapse
1
2
3
4
5
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
      <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
            <input type=”button” value=”item1″ />
      </span>
</div>
1
2
3
4
filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/
1
2
3
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
1
2
3
4
5
6
7
8
.fix{zoom:1;}
.fix:after{
display:block;
content:‘clear‘;
clear:both;
line-height:0;
visibility:hidden;
}
一些总结
一些概念
方案荟萃扩展阅读

附录四 部分工具资源

附录五 编码规范

附录六 进阶学习

附录七 其他资源

附录八 常见问题

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！