<!-- flex布局 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!-- flex-direction 轴线方向 -->
<!-- 横向轴线右端开始 -->
<!-- <div style="width: 100px;height:200px;display: flex;flex-direction: row-reverse;"> -->
<!-- 竖向轴线上端开始 -->
<!-- <div style="width: 100px;height:200px;display: flex;flex-direction: column;"> -->
<!-- 竖向轴向下端开始 -->
<!-- <div style="width: 100px;height:200px;display: flex;flex-direction: column-reverse;"> -->
<!-- flex-wrap 轴线换行 -->
<!-- 轴线从上往下换行 -->
<!-- <div style="width: 100px;display: flex;flex-wrap: wrap;"> -->
<!-- 轴线从上往下换行 -->
<!-- <div style="width: 100%;height:100px;display: flex;flex-wrap: wrap-reverse;"> -->
<!-- flex-flow 轴线方向+轴线换行-->
<div style="width: 100px;height:200px;display: flex;flex-flow: column-reverse wrap;">
<!-- justify-content 主轴方向的布局位置 -->
<!-- 主轴方向居中 -->
<!-- <div style="width: 100%;display: flex;justify-content: center;"> -->
<!-- 主轴方向末尾 -->
<!-- <div style="width: 100%;display: flex;justify-content: flex-end;"> -->
<!-- 主轴方向中间留有空白 -->
<!-- <div style="width: 100%;display: flex;justify-content: space-between;"> -->
<!-- 主轴方向中间和两边都留有空白 -->
<!-- <div style="width: 100%;display: flex;justify-content: space-around;"> -->
<!-- align-items 侧轴上的布局位置-->
<!-- 侧轴方向居中 -->
<!-- <div style="width: 100px;height: 500px;display: flex;flex-wrap: wrap;align-items: center;"> -->
<!-- 侧轴方向底部 -->
<!-- <div style="width: 100px;height: 500px;display: flex;flex-wrap: wrap;align-items: flex-end;"> -->
<div style="background-color: gray;width: 40px;height: 40px;"></div>
<div style="background-color: red;width: 40px;height: 40px;"></div>
<div style="background-color: blue;width: 40px;height: 40px;"></div>
<div style="background-color: black;width: 40px;height: 40px;"></div>
<div style="background-color: yellow;width: 40px;height: 40px;"></div>
<div style="background-color: green;width: 40px;height: 40px;"></div>
</div>
</body>
</html>
<!-- 获取多选框选中的值 -->
<!-- <!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张道陵">张道陵</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="张玄策">张玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="王玄策">王玄策</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="霍去病">霍去病</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="卫青">卫青</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广">李广</label>
<label><input type="checkbox" class="moreSel" name="moreSel" value="李广利">李广利</label>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$('button.btn').click(function(){
let moreSel = []
$("input[name='moreSel']:checked").each(function(){
moreSel.push($(this).val())
})
console.log(moreSel)
})
})
</script>
</html> -->
<!-- 获取单选框选中的值 -->
<!-- <!DOCTYPE html>
<html>
<head>
<script src='./jquery-3.4.1.min.js'></script>
<meta charset="utf-8" />
</head>
<body>
<label><input type="radio" class="oneSel" name="oneSel" value="张道陵" checked />张道陵</label>
<label><input type="radio" class="oneSel" name="oneSel" value="张玄策" />张玄策</label>
<button class="btn">点击</button>
</body>
<script>
$(function() {
$('button.btn').click(function(){
let oneSel = $("input[name='oneSel']:checked").val()
console.log(oneSel)
})
})
</script>
</html> -->
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
