备考1+x前端证书
Bootstrap
Bootstrap3和Bootstrap4 栅格系统的区别
.container固定宽度
.container-fluid 100%宽度
Bootstrap3
.col-xs(<768px) 超小屏幕
.col-sm(>=768px) 小屏幕
.col-md(>=992px) 中等屏幕
.col-lg(>=1200px) 大屏幕Bootstrap4
.col-(<576px) 超小屏幕
.col-sm(>=576px) 平板
.col-md(>=768px) 桌面显示器
.col-lg(>=992px) 大桌面显示器
.col-xl(>=1200px) 超大桌面显示器Bootstrap4 分页
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>核心类名 class=pagination pagination pagination 重要的类名敲三遍
当前页可以使用 .active 类来高亮显示 效果如下:
QQ截图20191211192453.png
Bootstrap4 下拉菜单
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>核心类名
.dropdown 类用来指定一个下拉菜单。
.dropdown-menu 类来设置实际下拉菜单。
dropdown dropdown dropdown
dropdown-menu dropdown-menu dropdown-menuBootstrap4 折叠
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>核心类名 collapse
collapse collapse collapseBootstrap4 导航
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>核心类名 nav
nav nav nav响应式导航栏
.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。例如
.navbar-expand-lg 就是大于lg的宽度 展示全部导航栏 小于则展示面包屑菜单 折叠导航栏
实操题重点
导航栏组件
.navbar表单
堆叠表单
form-group内联表单
form-inline按钮
.btn
.btn btn-info 信息
.btn btn-primary 主要按钮
.btn btn-success 成功
.btn btn-info 信息
.btn btn-danger 危险
.btn btn-link 链接输入框组
.input-group列表组件
.list-groupcss
背景颜色渐变linear-gradient
background: linear-gradient(to bottom,black,white)to bottom 表示从上到下
to right 表示从左到右
to bottom right 表示从左上角到右下角 渐变
字体倍数
以 rem为单位 例如:
font-size: 2.25rem;过渡属性transition
transition:设置过渡的属性名称 规定过渡效果几秒完成 规定速度曲线 定义过渡何时开始(延迟几秒后开始过渡)过渡属性同常结合伪类使用
例如:
#content h2:hover {
font-size: 2.25（13）;/* 设置字体大小为根元素大小的2.25倍 */
transition: font-size 1s;/* 使用过渡，1s内标题字号变大 */
}意思为 鼠标经过以后 1秒内 字体变大2.25倍
盒子阴影box-shadow
box-shadow: 10px 5px 10px #f00;x轴 y轴 阴影大小 阴影颜色
JavaScript
获取dom对象的几种方式
通过id名获取标签
document.getElementById('id名') //获取的唯一一个dom对象通过类名获取标签
document.getElementByClassName('类名') //获取的是一个数组通过标签名获取标签
document.getElementByTagName('标签名') //获取的是一个数组操作DOM
创建DOM对象
var div = document.createElement('div'); //创建div标签把标签放在某个页面或某个标签中
父节点.appendChild(子节点)删除节点
div.empty() 清空div标签的所有子标签和内容
div.remove() 清空标签所有子标签和内容 以及清空自己遍历对象
foreach
var obj = {'name':'Sch0lar','age':'19','sex':'男'};
Object.keys(obj).forEach(function(key){
console.log(key,obj[key]);
})for in
var obj = {'0':'a','1':'b','2':'c'};
for(var i in obj) {
console.log(i,":",obj[i]);
}ajax
之前对ajax并不熟练 考试要考所以重新整理一下
ajax对象的创建
主流浏览器 通过 new XMLHttpRequest()获得
老版浏览器 通过 new ActiveXObject("Microsoft.XMLHTTP") 获得
我们可以通过window.XMLHttpRequest来判断浏览器是否支持XMLHttpRequest()
QQ截图20191215144444.png
window.XMLHttpRequest 判断浏览器是否支持XMLHttpRequest()
ajax请求服务 服务器返回数据
xhr = new XMLHttpRequest();
xhr.open('get','test.php')
//open和服务器进行交互。参数1请求方式 参数2 服务器地址
xhr.send()//发出请求
xhr.onreadystatechange = function(){ //监听
if(xhr.readyState ==4 && xhr.status==200)
alert(xhr.responseText);
}
图片1.png
get post区别
POST与GET不同的是 POST方式需要设置头信息，并将数据通过send()方法发送
文件头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
QQ截图20191215152620.png
QQ截图20191215152654.png
数据传输时字符串转码
QQ截图20191215154311.png
例如我只想传一个参数 content参数值为Sch0lar&age 可以看到这里&符号将age也解析为了一个参数 解决办法就是url编码
encodeURIComponent 函数进行转码 之后在输入到服务器因为get方式有自解码机制所以 也不会有任何错误
encodeURIComponent(content);
QQ截图20191215154208.png
PHP
封装mysqli
<?php
//定义一个类
class Mysqldb{
public $host;
public $user;
public $pwd;
public $dbname;
public $charset;
public $con;
public function __construct($config){
$this->host = isset($config['host'])?$config['host']:'localhost';
$this->user = isset($config['user'])?$config['user']:'root';
$this->pwd = isset($config['pwd'])?$config['pwd']:'root';
$this->dbname = isset($config['dbname'])?$config['dbname']:'xss';
$this->charset = isset($config['charset'])?$config['charset']:'utf8';
$this->connect();
$this->selectDb();
$this->setchart();
}
//封装对象
public function connect(){
$con = mysqli_connect($this->host,$this->user,$this->pwd);
if(!$con){
die('链接失败');
}
$this->con = $con;
}
//封装选择数据库
public function selectDb(){
mysqli_select_db($this->con,$this->dbname);
}
//封装设置字符集
public function setchart(){
mysqli_set_charset($this->con,$this->charset);
}
//封装获取资源
public function query($sql){
$res=mysqli_query($this->con,$sql);//返回的资源
if(!$res){
return false;
}
return $res;
}
//查询全部数据
public function selectall($sql){
$res = $this->query($sql);
$arr = [];
while ($row = mysqli_fetch_assoc($res)){
$arr[] = $row;
}
return $arr;
}
//查询单条语句
public function selectone($sql){
$res = $this->query($sql);
$row = mysqli_fetch_assoc($res);
return $row;
}
}
?>包含上面文件以后 即可调用mysqldb类
<?php
function __autoload($class_anme){
require './'.$class_anme.'.class.php';
}
$arr1 = array(
'host'=>'localhost'
); //传入数组
$db1 = new Mysqldb($arr1); //将数组传入类里
$sql = 'select * from admin where id=1'; //构造sql语句
$res = $db1->selectone($sql); //sql语句带入到 selectone方法进行单条查询
print_r($res);
?>laravel
运行laravel项目
php artisan serve创建laravel项目
composer create-project --prefer-dist laravel/laravel=版本号 项目名称创建控制器
php artisan make:controller 控制器名创建验证器
php artisan make:request 验证器的名称
图片1.png
创建模型
php artisan make:model 模型名创建中间件
php artisan make:middleware 中间件名称自己定义验证规则
用validate关键字
required 必填 不能为空
present 必填 可以为空
filled 可不填 填时不能为空
nullable 验证字段值可以为null本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-12-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读