Fork me on GitHub

CSS与简单的js基础知识学习

发表于 | 分类于 |
本文共计: 3,110 | 阅读耗时 ≈ 15

CSS与简单的js基础知识学习

学习了一段时间的后端的知识，在开发项目的时候对于前端慢慢的学看的也七七八八，现在就重新系统的学习下基础知识,也能减少查手册的时间。

CSS简单语法

CSS的简单语法:

在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

1
2
3
4
5
6
<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

1
2
3
4
元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				color:blue;
			}
		</style>
	</head>
	<body>
		<span>简单的demo</span>
		<span>简单的demo</span>
		<span>简单的demo</span>
		<span>简单的demo</span>
	</body>
</html>

ID选择器:

1
2
3
4
5
以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				color: red;
			}		
		</style>
	</head>
	<body>
		<!--请将JAVAEE颜色改成红色-->
		<div id="div1">JAVAEE</div>
		<div>IOS</div>
		<div>ANDROID</div>
	</body>
</html>

类选择器:

1
2
3
4
5
以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shuiguo{
				color: yellow;
			}
			.shucai{
				color: green;
			}
		</style>
	</head>
	<body>
		<div class="shuiguo">香蕉</div>
		<div class="shucai">黄瓜</div>
		<div class="shuiguo">苹果</div>
		<div class="shucai">茄子</div>
		<div class="shuiguo">橘子</div>
	</body>
</html>

后代选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1 > em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>
			This is a 
			<em>儿子</em>
			<strong>
				<em>孙子</em>
			</strong>
		 heading
		</h1>
	</body>
</html>

CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码 <div class="shuiguo" style="color:yellow">香蕉</div>

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

1
2
3
4
5
6
7
8
9
float属性:
    left
    right

clear属性: 清除浮动
    both : 两边都不允许浮动
    left: 左边不允许浮动
    right : 右边不允许浮动
流式布局

简单例子:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.logo{
				float: left;
				width: 33%;
				/*border-width: 1px;
				border-style: solid;
				border-color: red;*/
				height: 60px;
				line-height: 60px;
		/*		border: 1px solid red;*/
			}
			
			
			.amenu{
				color: white;
				text-decoration: none;
				height: 50px;
				line-height: 50px;
			}
			
			.product{
				float: left; text-align: center; width: 16%; height: 240px;
			}
			
		</style>
	</head>
	<body>
		<!--
			1. 创一个最外层div
			2. 第一部份: LOGO部分: 嵌套三个div
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<div>
			<!--2. 第一部份: LOGO部分: 嵌套三个div-->
			<div>
				<div class="logo">
					<img src="../img/logo2.png"/>
				</div>
				<div class="logo">
					<img src="../img/header.png"/>
				</div>
				<div class="logo">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
				
			<!--清除浮动-->
			<div style="clear: both;"></div>
			
			
			<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
			<div style="background-color: black; height: 50px;">
				<a href="#" class="amenu">首页</a>
				<a href="#" class="amenu">手机数码</a>
				<a href="#" class="amenu">电脑办公</a>
				<a href="#" class="amenu">鞋靴箱包</a>
				<a href="#" class="amenu">香烟酒水</a>
			</div>
			
				
			<!--4. 第三部分: 轮播图--> 
			<div>
				<img src="../img/1.jpg" width="100%"/>
			</div>
			<!--5. 第四部分:--> 
			<div>
				<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
				
				<!--左侧广告图-->
				<div style="width: 15%; height: 480px;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					
                </div>
			</div>
			
			<!--6. 第五部分: 直接放一张图片-->
			<div>
				<img src="../products/hao/ad.jpg" width="100%"/>
			</div>
			<!--7. 第六部分: 抄第四部分的-->
			<div>
				<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
				
				<!--左侧广告图-->
				<div style="width: 15%; height: 480px;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					
                </div>
			</div>
			
			<!--8. 第七部分: 放置一张图片-->
			<div>
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--9. 第八部分: 放一堆超链接-->
			<div style="text-align: center;">
				        
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
			</div>
		</div>
	</body>
</html>

扩展:

  • CSS的优先级

    按照选择器搜索精确度来编写:行内样式 > ID选择器 > 类选择器 > 元素选择器

    就近原则: 哪个离得近,就选用哪个的样式

    CSS: 层叠样式表

    主要作用:

  1. 美化页面
    2. 将页面美化和HTML代码进行分离,提高代码的服用型

  • 选择器:

    • 元素选择器: 标签的名称{}
    • 类选择器: 以. 开头 .类的名称
    • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

  • CSS浮动:

    • float : left, right 不再占有正常文档流中的空间 , 流式布局

    • clear : both left right

      ​

  • CSS中的其它选择器

    • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

    • 属性选择器:

      1
      2
      3
      4
      a[title]
      a[titile='aaa']
      a[href][title]
      a[href][title='aaa']

    • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

    • 子元素选择器: 父选择器 > 儿子选择器

    • 伪类选择器: 通常都是用在A标签上

使用DIV+CSS完成页面的优化

CSS的盒子模型: 万物皆盒子

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

1
2
3
4
padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置

代码实现:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" type="text/css" href="../css/main.css"/>
	</head>
	<body>
		<!--
			1. 总共是5部分
			2. 第一部分是LOGO部分
			3. 第二部分是导航菜单
			4. 第三部分是注册部分
			5. 第四部分是FOOTER图片
			6. 第五部分是一堆超链接
		-->
		<div>
			
			<!--2. 第一部分是LOGO部分-->
			<div>
				<div class="logo">
					<img src="../img/logo2.png" />
				</div>
				<div class="logo">
					<img src="../img/header.png" />
				</div>
				<div class="logo">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<!--清除浮动-->
			<div style="clear: both;"></div>
			<!--3. 第二部分是导航菜单-->
			<div style="background-color: black; height: 50px;">
				<a href="#" class="amenu">首页</a>
				<a href="#" class="amenu">手机数码</a>
				<a href="#" class="amenu">电脑办公</a>
				<a href="#" class="amenu">鞋靴箱包</a>
				<a href="#" class="amenu">香烟酒水</a>
			</div>
			<!--4. 第三部分是注册部分-->
			<div style="background: url(../image/regist_bg.jpg);height: 500px;">
				
				<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
					<table width="60%" align="center">
						<tr>
							<td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>
							
						</tr>
						<tr>
							<td>用户名:</td>
							<td><input type="text"/></td>
						</tr>
						<tr>
							<td>密码:</td>
							<td><input type="password"/></td>
						</tr>
						<tr>
							<td>确认密码:</td>
							<td><input type="password"/></td>
						</tr>
						<tr>
							<td>email:</td>
							<td><input type="email"/></td>
						</tr>
						<tr>
							<td>姓名:</td>
							<td><input type="text"/></td>
						</tr>
						<tr>
							<td>性别:</td>
							<td><input type="radio" name="sex"/> 男
							<input type="radio" name="sex"/> 女
							<input type="radio" name="sex"/> 妖
							</td>
						</tr>
						<tr>
							<td>出生日期:</td>
							<td><input type="date"/></td>
						</tr>
						<tr>
							<td>验证码:</td>
							<td><input type="text"/></td>
						</tr>
						<tr>
							<td></td>
							<td><input type="submit" value="注册"/></td>
						</tr>
					</table>
				</div>
				
			</div>
			
			<!--5. 第四部分是FOOTER图片-->
			<div>
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--9. 第四部分: 放一堆超链接-->
			<div style="text-align: center;">
				        
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					
					<br />
			</div>
			
		</div>
	</body>
</html>

上面用到的CSS部分的技术:

​ CSS: 层叠样式表.

​ CSS作用: 美化页面,提高代码的复用性

​ 选择器:

​ 需要掌握的:

​ 元素选择器: 标签的名称

​ 类选择器: 以 . 开头

​ ID选择器: 以#开头, #ID的名称 ID必须是唯一的

​ 优先级: 按照选择精确度: 行内样式 > ID选择器 > 类选择器 > 元素选择器

​ 就近原则

​ 扩展选择器:

​ 选择器分组: 选择器1,选择器2 以逗号隔开

​ 后代选择器: 爷爷 孙子 中间以空格隔开

​ 子元素选择器: 爸爸 > 儿子

​ 属性选择器: 选择器[属性的名称=’’]

​ 伪类选择器: 超链接标签上使用

​ 浮动: float属性 left right

​ 清除浮动: clear: both left right

​ 盒子模型: 顺时针 : 上右下左

​ padding : 内边距 ,控制的是盒子内容的距离

​ margin : 外边距 控制盒子与盒子之间的距离

​ 绝对定位:

​ position: absolute

​ top:

​ left:

本文标题:CSS与简单的js基础知识学习

文章作者:WilsonSong

发布时间:2018年08月15日 - 19:08

最后更新:2018年08月18日 - 19:08

原始链接:https://songwell1024.github.io/2018/08/15/CSS/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------