1,bs网站(bs 响应式布局)
https://v3.bootcss.com/
https://v4.bootcss.com/
https://getbootstrap.net/
2,bs的基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
要使用BS,需要导入对应的文件(jq文件以及bs的css/js文件),再去官网找喜欢的代码
导入顺序有要求:
1,导入JQuery
2,导入bootstrap的css文件
3,导入bootstrap的js文件
-->
<!-- 1,导入JQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- 2,导入bootstrap的css文件 -->dist/css/bootstrap-theme.min.css
<link rel="stylesheet" href="dist/css/bootstrap-theme.min.css">
<!-- 3,导入bootstrap的js文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
3,bs的CV大法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- https://v3.bootcss.com/css/#forms -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--https://v3.bootcss.com/css/#images -->
<img src="img/05.jpg" alt="..." class="img-rounded">
<img src="img/06.jpg" alt="..." class="img-circle">
<img src="img/08.jpg" alt="..." class="img-thumbnail">
</body>
</html>
4,ajax 同步 异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- ajax:
同步请求 --同时执行,网页在加载数据时候,必须等待数据加载完才能做其他事情
异步请求 --异步执行,网页在加载数据的时候,可以同时做其他事,边做边等
---ajax 就是一种前后端之间进行请求传输的方式
前端从后端得到的是一个json的数据
-->
<img src="" alt="" id="pic">
<!-- 1,js版本的请求 -->
<!-- <script>
// 声明一个实例对象
let ky = new XMLHttpRequest() //基于xml给后端发生基于http协议的请求
// 指定请求对象
ky.open('GET','https://mp.csdn.net/mp_blog/creation/editor') //向某个网站拿数据
// 发送请求
ky.send()
let pic = document.getElementById('pic')
// onload 读取事件,数据读取完毕后执行
ky.onload = function(){
let data = JSON.parse(ky.response) //把拿到的数据以Json文件进行解析,给data
pic.src = `${data.message}`
}
</script> -->
<!-- 2,jq版本的ajax写法 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.ajax({
// 请求地址
url : 'https://getbootstrap.net/docs/getting-started/introduction/',
// 请求方式
method : 'get',
success : function(msg){
console.log(msg)
},
// 请求失败后,执行函数
error(err){
console.log(err)
},
// 返回的数据类型
dataType : 'json'
})
</script>
</body>
</html>
学习建议
.学习建议
编程之路是没有捷径的,想学好编程最简单的办法就是编程 --> 多写代码,多看博客.代码量上去了,经验业绩上去了.多交流.多拓展自己的眼界(少钻牛角尖)
多看论坛:
csdn 博客园 cxy521 掘金 菜鸟教程 LeetCode
1.养成写笔记的习惯 --> 后续学完django后,可以搭建个人博客
2.大学生有条件的话,多去参加比赛 --> 蓝桥杯 ACM CTF
3.要对自己有个清晰的认知 --> 1.你想干嘛 2.你现在能干嘛 3.你还缺点啥
4.提升自己的竞争力:
1.硬实力 -- IT专业技能相关的内容. 扎实的技术/学历/项目经验
2.软实力 -- 文案/沟通/管理/比赛经验/证书
3.加分项 -- 影视后期 / 自媒体