第3天学习Web技术笔记

博主：小草林
发布时间：2021 年 07 月 15 日
893 次浏览
1 条评论
5929字数
分类：编程日常-Web

## 其它

前端：
设计工程师： PS UI
开发工程师： JS CSS HTML

---

## 一.CSS是什么

1. 层叠式样式表，简称为样式[Cascading Style Sheets]
2. 由W3C制订，最新版CSS3
3. CSS由浏览器执行
4. 美化网页[HTML不具备美化功能]

---

## 二.CSS选择器(*****)

1. 标记选择器
2. id选择器
3. class选择器

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```html
<head>
        <meta charset="UTF-8">
	<title>CSS选择器</title>
	<style>
		/*标记选择器*/
		div{
			color:red;
		}
		p{
			color:greenyellow;
		}
		/*id选择器*/
		#sy1{
			font-size: 20px;
		}
		#sy2{
			color: #982585;
		}
		/*class选择器*/
		.nuc{
			font-size: 45px;
			color: blue;
		}
	</style>
</head>
```

这是body区的:
</div>

```html
<body>
	<div class="nuc">实验</div>
	<div id="sy1">1实验1</div>
	<div id="sy2">2实验2</div>
	<div id="sy3">3实验3</div>
	<p class="nuc">这是个段落</p>
</body>
```

---

## 三.CSS代码放置位置

1. 页内样式：head之间，用style标记
2. 行内样式：标记style属性里[优先级最高]
3. 外部样式：放在单独CSS文件中，用link标记引入

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>CSS代码位置</title>
	
        <link rel="stylesheet" href="nuc.css"/>
	<style>
		div{
			color:blue;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<h1>CSS代码位置1(页内样式)：head之间，用style标记</h1>
	<div>NUC软院</div>
	<h1>CSS代码位置2(行内样式)：标记style属性里</h1>
	<p style="color: green;font-size: 20px;">实验</p>
	<h1>CSS代码位置3(外部样式)：放在单独CSS文件中</h1>
	<input type="text" id="uname"/>
</body>
```

这是nuc.css文件中的:
</div>

```css
#uname {
	width:300px;
	height:50px;
}
```

---

## 四. 开发常用样式

1. 背景样式[background-color]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>背景样式</title>
	<style>
		#suBtn{
			background-color: #FF8000;
			width:125px;
			height: 30px;
			color:white;
		}
		#my{
			background-color: #0000FF;
			width:125px;
			height: 30px;
			color:white;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<div id="my"></div>
	<input type="submit" value="下一步" id="suBtn"/>
</body>
```

2. 文本样式[color\text-align\text-decoration]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>文本样式</title>
	<style>
		.nucnuc{
			color:#0000FF;
			text-align: center;
			text-decoration: underline;
		}
		#nuc1{
			text-decoration: line-through;
		}
		a{
			text-decoration: none;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<p class="nucnuc">NUC</p>
	<p id="nuc1">实验111</p>
	<span class="external-link"><a class="no-external-link" href="https://" target="_blank"><i data-feather="external-link"></i>Blog</a></span>
</body>
```

3. 字体样式[font-family\font-size]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>字体样式</title>
	<style>
		.mymy{
			font-family:"arial, helvetica, sans-serif";
			font-size: 50px;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<p class="mymy">这是一个段落</p>
</body>
```

网页上文字默认16px;工程上是12px/14px
</div>
4. 超链接样式(:hover)
<div class="tip inlineBlock warning">

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>超链接</title>
	<style>
		a{
			text-decoration: none;
		}
		a:hover{
			color: blue;
			font-size: 50px;
		}
		p{
			text-align: center;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<p>
		<a href="网址">Blog网站</a>
	</p>
</body>
```

5. 表格样式[细线边框border-collapse,collapse]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>表格样式</title>
	<style>
		table{
			width: 500px;
			height: 80px;
			text-align: center;/*表格内文字居中*/
			/*边框折叠，无空心*/
			border-collapse: collapse;
		}
		/*同时施加样式*/
		table,tr,td{
			/*边框宽度1px 实线 黑色*/
			border: 1px solid black;
		}
		a{
			text-decoration: none;
		}
		a:hover{
			color: #E80017;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<table align="center">
		<tr>
			<td>学号</td>
			<td>姓名</td>
			<td>籍贯</td>
			<td>操作</td>
		</tr>
		<tr>
			<td>123</td>
			<td>XXX</td>
			<td>ys</td>
			
			<td>
				<a href="网址">修改</a>
				<a href="网址">删除</a>
			</td>
		</tr>
		<tr>
			<td>123</td>
			<td>XXX</td>
			<td>sh</td>
			<td>修改 删除</td>
		</tr>
		<tr>
			<td>123</td>
			<td>XXX</td>
			<td>jz</td>
			<td>修改 删除</td>
		</tr>
		<tr>
			<td>123</td>
			<td>XXX</td>
			<td>ty</td>
			<td>修改 删除</td>
		</tr>
		<tr>
			<td>123</td>
			<td>XXX</td>
			<td>sx</td>
			<td>修改 删除</td>
		</tr>
	</table>
</body>
```

6. 边框样式[边框变黑border: 1px solid black;]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>边框样式</title>
	<style>
		#name{
			border: 1px solid red;
			width:200px;
			border-radius:10px;/*边框带弧度*/
			height:35ps;
		}
		#my{
			border: 1px solid blue;
			width:500px;
			height:500px;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<input type="text" id="name"/><br>
	<div id="my">这是</div>
</body>
```

---

## 五. 盒子模型

1. 与网页布局有关
2. 外边距margin，内边距padding,内外边距相对，看在哪，4方向

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>CSS盒子模型</title>
	<style>
		#f1{
			width: 480px;
			height: 480px;
			border: 1px solid red;
			padding-top: 50px;
			margin: 0 auto;
		}
		#f2{
			width: 260px;
			height: 260px;
			border: 10px solid cyan;
			margin-left: 50px;
			padding-top: 50px;
			margin: 0 auto;
		}
		#login{
			margin-left: 50px;
			margin-bottom: 30px;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<div id="f1">
		<div id="f2">
			<button id="login">登录</button>
		</div>
	</div>
</body>
```

---

## 六.登录网页

1. 用到盒子模型
2. HTML表单元素

以我的博客后台为例的综合代码示例:
</div>

[登录网页展示][1]

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>Typecho登录</title>
	<style>
		body{
			background-color: #1E9FFF;
		} 
		#logindiv{
			background-color: white;
			width: 350px;
			height: 380px;
			margin:0 auto;
			color: #1E9FFF;
			margin-top:100px;
			text-align:center;
			padding-top: 25px;
		}
		#uname{
			width: 230px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid lightgray;
			margin-left: -30px;
			background-color: transparent;
			padding-left: 30px;
		}
		#upsw{
			width: 230px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid lightgray;
			margin-left: -30px;
			background-color: transparent;
			padding-left: 30px;
			margin-top: 16px;
		}
		#btn{
			width: 230px;
			height: 30px;
			border-radius: 5px;
			border: 1px solid #1E9FFF;
			background-color: #1E9FFF;
			padding-left: 30px;
			margin-top: 16px;
			color: white;
		}
		#tishi{
			padding-left: 30px;
			margin-top: 16px;
			margin-left: -180px;
			color: white;
		}
		#log1{
			background-color: white;
			width: 350px;
			height: 30px;
			margin:0 auto;
			color: black;
			text-align:center;
			padding-top: 5px;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<div id="logindiv">
		<h1>UOLab联合开发实验室管理平台</h1>
		<img src="//www.xuegao-tzx.top/usr/uploads/auto_save_image/a20e8a7e2a422cf6b57cd70fe8bf507f.png"/>
		<input placeholder="用户名" id="uname" name="user"/><br>
		<img src="//www.xuegao-tzx.top/usr/uploads/auto_save_image/4aa1e0f6fa88fcf67d780a4494372d93.png"/>
		<input type="password" placeholder="密码" id="upsw" name="user1"/><br>
		<div id="log1">
			<input type="checkbox" id="tishi">记住密码<br>
		</div>
		<a href="https://xxxxxx.html">
			<input type="button" value="登录" id="btn"/>
		</a>
	</div>
</body>
```

[1]: https://xuegao-tzx.top/admin

最后修改：2021 年 08 月 16 日

如果觉得我的文章对你有用，请随意赞赏，谢谢

1 条评论

骄傲的女士 Google Chrome 92.0.4515.107 Windows 10 中国山西太原
July 23rd, 2021 at 07:36 pm

写得好好哟,我要给你点赞！::funny:04::

回复

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

打卡

私密评论

名称 *

🎲

邮箱 *

地址

缘梦の镇
申请更换链接：网站名称：缘梦の镇网站描述：只要你肯奋斗，没有什...
缘梦の镇
申请更换链接：网站名称：缘梦の镇网站描述：只要你肯奋斗，没有什...
譚興宇
相机拍照偏色
小有名气的道士
ヾ(≧∇≦*)ゝ
蓝易云
该评论仅登录用户及评论双方可见

数据结构笔记-3
浏览次数: 673
Debian
浏览次数: 188
小草林学习宝[发布说明]
浏览次数: 146
此内容被密码保护
浏览次数: 383
关于备案
浏览次数: 551

79 文章数目
123 评论数目
29.06 万全站字数
1 在线人数
67,220 访客总数
1年259天运行天数
79 ms 响应耗时
2 星期前最后活动

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

第3天学习Web技术笔记

小草林 • 2021 年 07 月 15 日

## 其它

前端：
设计工程师： PS UI
开发工程师： JS CSS HTML

---

## 一.CSS是什么

1. 层叠式样式表，简称为样式[Cascading Style Sheets]
2. 由W3C制订，最新版CSS3
3. CSS由浏览器执行
4. 美化网页[HTML不具备美化功能]

---

## 二.CSS选择器(*****)

1. 标记选择器
2. id选择器
3. class选择器

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

这是body区的:
</div>

```html
<body>
	<div class="nuc">实验</div>
	<div id="sy1">1实验1</div>
	<div id="sy2">2实验2</div>
	<div id="sy3">3实验3</div>
	<p class="nuc">这是个段落</p>
</body>
```

---

## 三.CSS代码放置位置

1. 页内样式：head之间，用style标记
2. 行内样式：标记style属性里[优先级最高]
3. 外部样式：放在单独CSS文件中，用link标记引入

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

这是nuc.css文件中的:
</div>

```css
#uname {
	width:300px;
	height:50px;
}
```

---

## 四. 开发常用样式

1. 背景样式[background-color]

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

```html
<body>
	<div id="my"></div>
	<input type="submit" value="下一步" id="suBtn"/>
</body>
```

2. 文本样式[color\text-align\text-decoration]

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

3. 字体样式[font-family\font-size]

这是html文件中head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>字体样式</title>
	<style>
		.mymy{
			font-family:"arial, helvetica, sans-serif";
			font-size: 50px;
		}
	</style>
</head>
```

这是html文件中body区的:
</div>

```html
<body>
	<p class="mymy">这是一个段落</p>
</body>
```

网页上文字默认16px;工程上是12px/14px
</div>
4. 超链接样式(:hover)
<div class="tip inlineBlock warning">

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

```html
<body>
	<p>
		<a href="网址">Blog网站</a>
	</p>
</body>
```

5. 表格样式[细线边框border-collapse,collapse]

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

6. 边框样式[边框变黑border: 1px solid black;]

这是html文件中head区的:
</div>

这是html文件中body区的:
</div>

```html
<body>
	<input type="text" id="name"/><br>
	<div id="my">这是</div>
</body>
```

---

## 五. 盒子模型

1. 与网页布局有关
2. 外边距margin，内边距padding,内外边距相对，看在哪，4方向

综合代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

这是html文件中body区的:
</div>

```html
<body>
	<div id="f1">
		<div id="f2">
			<button id="login">登录</button>
		</div>
	</div>
</body>
```

---

## 六.登录网页

1. 用到盒子模型
2. HTML表单元素

以我的博客后台为例的综合代码示例:
</div>

[登录网页展示][1]

这是head区的:
</div>

这是html文件中body区的:
</div>

[1]: https://xuegao-tzx.top/admin

第3天学习Web技术笔记

1 条评论

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

浅谈中国高校学生如何申请教育优惠

浅谈自己部署使用Gitlab

小草林学习宝&我的仓库&鸿蒙交流群

第5天学习Web技术笔记

第7天学习Web技术笔记

数据结构笔记-3

Debian

小草林学习宝[发布说明]

此内容被密码保护

关于备案

第3天学习Web技术笔记

1 条评论

发表评论 取消回复 本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

第3天学习Web技术笔记

发表评论取消回复
本站使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款