第4天学习Web技术笔记

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

## 其它

CSS开发心理：边写边预览

1. CSS选择器[标记选择器,id选择器,class选择器]
2. 代码位置[页内样式，行内样式，外部样式]
3. 边框样式[边框变红border: 1px solid red]

---

## 一. CSS显示

1. display[隐藏释放区域]
2. visibility [隐藏，不释放区域]

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

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>CSS显示与隐藏</title>
	<style>
		.picdiv{
			display: none;/*不占位，不显示*/
			visibility:hidden;/*占位不显示*/
		}
	</style>
</head>
```

这是body区的:
</div>

```html
<body>
	<h1>NUC软院</h1>
	<div class="picdiv">
		<img src="images/IMG.jpg">
	</div>
	<h1>NUC软院-小草林</h1>
</body>
```

---

## 二. CSS浮动[float]

1. 主要用于：网页布局[CSS+DIV]
2. 不浮动为竖的，浮动为横的
3. CSS+DIV做网页布局离不开浮动

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

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>CSS浮动</title>
	<style>
		#firdiv{
			width: 300px;
			height: 90px;
			background-color: yellow;
			float: left;/*让第一个div浮动*/
		}
		#cdiv{
			width: 310px;
			height: 100px;
			background-color: blue;
			float: left;
		}
		#tdiv{
			width: 320px;
			height: 110px;
			background-color: blueviolet;
			float: left;
		}
		#foudiv{
			width: 330px;
			height: 120px;
			background-color: cyan;
		}
		#fivdiv{
			width: 340px;
			height: 130px;
			background-color: greenyellow;
		}
	</style>
</head>
```

这是body区的:
</div>

```html
<body>
	<div id="firdiv">第1个div</div>
	<div id="cdiv">第2个div</div>
	<div id="tdiv">第3个div</div>
	<div id="foudiv">第4个div</div>
	<div id="fivdiv">第5个div</div>
</body>
```

---

## 三. Bootstrap技术

### 1. 介绍

- Twitter公司发明的技术
- 用Bootstrap技术做的网页，屏幕大小自适应
- 移动优先[随智能手机而来]
- Bootstrap技术基于HTML,JS,CSS
- Bootstrap本质：CSS样式库
- Bootstrap不是编程语言，是一种技术

### 2. 如何用

- 把Bootstrap下载后，复制到自己项目中
- 直接用CDN[内容分发]
- 必须联网用

### 3. 如何学

- 看[官方文档][1] <img src="https://www.xuegao-tzx.top/usr/themes/handsome/assets/img/emotion/aru/lurking.png" class="emotion-aru">

### 4. 原理

- 网格系统[屏幕分为12列，使用者可以自己组合]
- 使用Bootstrap后，CSS不用自己写

### 代码示例：

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>用户登录-Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
```

这是body区的:
</div>

```html
<body>
	<div class="container">
		<h1>用户登录-小草林</h1>
		用户名<input class="form-control" type="text"/><br>
		密码<input class="form-control" type="password" />
		<input type="submit" class="btn btn-primary btn-block"  type="登录"/>
	</div>
</body>
```

[1]: https://getbootstrap.com/docs/5.0/getting-started/introduction/

最后修改：2021 年 08 月 16 日

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

1 条评论

小有名气的学生 Google Chrome 88.0.4324.93 Android 10 中国山西太原
July 24th, 2021 at 07:04 am

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

回复

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

评论 *

打卡

私密评论

名称 *

🎲

邮箱 *

地址

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

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

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

第4天学习Web技术笔记

小草林 • 2021 年 07 月 16 日

## 其它

CSS开发心理：边写边预览

1. CSS选择器[标记选择器,id选择器,class选择器]
2. 代码位置[页内样式，行内样式，外部样式]
3. 边框样式[边框变红border: 1px solid red]

---

## 一. CSS显示

1. display[隐藏释放区域]
2. visibility [隐藏，不释放区域]

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

这是head区的:
</div>

这是body区的:
</div>

```html
<body>
	<h1>NUC软院</h1>
	<div class="picdiv">
		<img src="images/IMG.jpg">
	</div>
	<h1>NUC软院-小草林</h1>
</body>
```

---

## 二. CSS浮动[float]

1. 主要用于：网页布局[CSS+DIV]
2. 不浮动为竖的，浮动为横的
3. CSS+DIV做网页布局离不开浮动

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

这是head区的:
</div>

这是body区的:
</div>

```html
<body>
	<div id="firdiv">第1个div</div>
	<div id="cdiv">第2个div</div>
	<div id="tdiv">第3个div</div>
	<div id="foudiv">第4个div</div>
	<div id="fivdiv">第5个div</div>
</body>
```

---

## 三. Bootstrap技术

### 1. 介绍

### 2. 如何用

- 把Bootstrap下载后，复制到自己项目中
- 直接用CDN[内容分发]
- 必须联网用

### 3. 如何学

- 看[官方文档][1] <img src="https://www.xuegao-tzx.top/usr/themes/handsome/assets/img/emotion/aru/lurking.png" class="emotion-aru">

### 4. 原理

- 网格系统[屏幕分为12列，使用者可以自己组合]
- 使用Bootstrap后，CSS不用自己写

### 代码示例：

这是head区的:
</div>

这是body区的:
</div>

[1]: https://getbootstrap.com/docs/5.0/getting-started/introduction/

第4天学习Web技术笔记

1 条评论

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

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

浅谈自己部署使用Gitlab

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

第5天学习Web技术笔记

第7天学习Web技术笔记

TS语言学习记录

浅谈C语言课程设计 --- 校园导航问题[已评优秀]

关于备案

《小草林学习宝》获得第二届HarmonyOS开发者创新大赛三等奖和最佳学生团队奖

老家风景

第4天学习Web技术笔记

1 条评论

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

第4天学习Web技术笔记

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