目录
复习一下之前的一些小案例
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
.wrap{
width: 100%;
overflow: hidden;
}
.main{
position: relative;
float: left;
left: 20%;
width: 60%;
height: 30rem;
background-color: aquamarine;
}
.left{
position: relative;
float: left;
left: -60%;
width: 20%;
height: 20rem;
background-color: antiquewhite;
}
.right{
position: relative;
float: left;
width: 20%;
height: 20rem;
background-color: antiquewhite;
}
.main,.left,.right{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>在之前案例中实现该布局中并没有考虑布局自适应，这种布局是不合理的。在本次复习中本人修改了部分css，使得既满足了中间列优先加载并完整显示，且均采用了相同的技术（定位和浮动）以实现该布局。
同时，也实现了伪等高布局，即两边部分随中间扩充。
.wrap{
width:100%;
overflow:hidden;
}
.main,.left,.right{
padding-bottom:10000px;
margin-bottom:-10000px;
}双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
.main{
float: left;
width: 100%;
background-color: aquamarine;
}
.left{
float: left;
width: 20%;
background-color: antiquewhite;
margin-left: -100%;
}
.right{
float: left;
width: 20%;
margin-left: -20%;
background-color: antiquewhite;
}
.content{
padding: 0 20%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>该布局可以不采用定位实现三列布局。通过在中间部分的块元素中添加一个div，并给该div设置padding使内容在中间显示。通过给左右部分设置负值margin-left，以将左右部分与中间部分布局在同一行。
粘连布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
html,body{
height: 100%;
}
.wrap{
min-height: 100%;
background-color: antiquewhite;
}
.main{
padding-bottom: 2rem;
}
.footer{
height: 2rem;
background-color: aquamarine;
margin-top: -2rem;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
main <br>
main <br>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>要实现粘连布局，只需main区域的外层包裹需要有最小高度为100%（根据需求），footer才能跟在底下并根据上部变化进行改变。
按钮动效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
*{
margin: 0;
padding: 0;
font-family: roboto;
}
html,body{
height: 100%;
overflow: hidden;
}
.wrap{
width: 100%;
height: 100%;
background-image: linear-gradient(90deg,#808080,#3fada8);
}
.main{
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
.main > h1{
font-size: 80px;
text-align: center;
padding-top: 20%;
opacity: 0;
transition: all 0.1s;
}
.cMain{
position: absolute;
width: 4%;
height: 6%;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
}
.cross{
position: relative;
top: 15px;
right: -15px;
width: 2rem;
height: 0.3rem;
border-radius: 2rem;
background-color: #fff;
transition: all 0.5s ease-in-out;
}
.cross2{
position: relative;
top: 20px;
right: -30px;
width: 1rem;
height: 0.3rem;
border-radius: 2rem;
background-color: #fff;
transition: all 0.5s ease-in-out;
}
.open .cross{
top: 25px;
transform: rotate(45deg);
background-color: red;
}
.open .cross2{
right: -15px;
transform: rotate(-45deg);
width: 2rem;
background-color: red;
}
.circle{
position: absolute;
width: 4%;
height: 6%;
top: 0;
right: 0;
background-color: black;
border-bottom-left-radius: 100%;
transition: all 1s;
z-index: 1;
}
.open ~ .circle{
top: -13rem;
right: -20rem;
width: 150%;
height: 150%;
border-radius: 0;
background-color: white;
}
.active{
transition: all 1s !important;
transform: translateX(-0.5rem);
opacity: 1 !important;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<h1>Hello,world!</h1>
</div>
<div class="cMain">
<div class="cross"></div>
<div class="cross2"></div>
</div>
<div class="circle">
</div>
</div>
</body>
<script>
window.onload=function(){
let cMain=document.getElementsByClassName('cMain')[0]
let h=document.getElementsByTagName('h1')[0]
cMain.onclick=function(){
cMain.classList.toggle('open')
setTimeout(()=>h.classList.toggle('active'),250)
}
}
</script>
</html>该案例主要利用操作dom层，为按钮和内部元素添加类属性，以此实现不同需求下的样式表现。在没有点击按钮时，右上角有两个平行块元素，点击后进行旋转，转变为×的符号，同时将按钮背景块元素覆盖整个页面，将兄弟元素main显示出来。
滚动条案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
html,body{
height: 100%;
overflow: hidden;
}
.wrap{
height: 100%;
width: 100%;
}
.content{
height: 27rem;
width: 15%;
border: 1px solid;
margin: .5rem auto;
overflow: auto;
}
.bottom{
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<span>
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
在用户注册及使用本服务时，需要搜集能识别用户身份的个人信息以便可以在必要时联系用户，或为用户提供更好的使用体验。搜集的信息包括但不限于用户的姓名、性别、年龄、出生日期、身份证号、地址、学校情况、公司情况、所属行业、兴趣爱好、常出没的地方、个人说明；同意对这些信息的使用将受限于第三条用户个人隐私信息保护的约束
</span>
</div>
<div class="bottom">
<input type="checkbox" class="check" disabled>我已阅读协议并遵守
<input type="button" class="btn" value="确认" disabled>
</div>
</div>
</body>
<script>
window.onload=function(){
let content=document.getElementsByClassName('content')[0]
let btn=document.getElementsByTagName('input')
content.onscroll=function(){
console.log(content.scrollHeight-content.scrollTop,content.clientHeight)
if(content.scrollHeight-content.scrollTop==content.clientHeight){
btn[0].disabled=false
}
}
btn[0].onchange=function(){
if(btn[0].checked)
btn[1].disabled=false
else btn[1].disabled=true
}
}
</script>
</html>该案例为实现用户查看全部协议后才能确认问题。通过对对应块元素添加滚动条事件，监听块元素滚动条高度减去块元素滚动条Top的高度位置是否等于块元素的视窗高度，以判断用户是否查看全部协议。随后将checkbox开放，同时监听checkbox的chang事件，以开放确认按钮。
评论案例
App.vue代码：
<template>
<div id="app">
<div>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>请发表对Vue的评论</h1>
</div>
</div>
</div>
</header>
<div class="container">
<Add :addComment='addComment'/>
<List :comments="comments" :delComment='delComment'/>
</div>
</div>
</div>
</template>
<script>
import Add from "./components/Add.vue";
import List from "./components/List.vue";
export default {
data() {
return {
comments: [ //数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件
{ name: "Bob", content: "Vue还不错" },
{ name: "Mike", content: "Vue很简单" },
{ name: "Chen", content: "Vue很难" },
],
};
},
methods:{
addComment(comment){
this.comments.unshift(comment);
},
delComment(index){
this.comments.splice(index,1);
}
},
components: {
Add,
List,
},
};
</script>
<style>
</style>List.vue代码：
<template>
<div class="col-md-8">
<h3 class="reply">评论回复：</h3>
<h2 v-show="comments.length==0">暂无评论，点击左侧添加评论！！！</h2>
<ul class="list-group">
<Item
v-for="(comment, index) in comments"
:key="index"
:comment='comment'
:delComment='delComment'
:index='index'
/>
</ul>
</div>
</template>
<script>
import Item from "./Item.vue";
export default {
//声明接收属性：这个属性就会成为组件对象的属性
props: ["comments","delComment"], //这种方式只指定了属性名
components: {
Item,
},
};
</script>
<style>
.reply {
margin-top: 0px;
}
li {
transition: 0.5s;
overflow: hidden;
}
.handle {
width: 40px;
border: 1px solid #ccc;
background: #fff;
position: absolute;
right: 10px;
top: 1px;
text-align: center;
}
.handle a {
display: block;
text-decoration: none;
}
.list-group-item .centence {
padding: 0px 50px;
}
.user {
font-size: 22px;
}
</style>Add.vue代码：
<template>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>用户名</label>
<input
type="text"
class="form-control"
placeholder="用户名"
v-model="name"
>
</div>
<div class="form-group">
<label>评论内容</label>
<textarea
class="form-control"
rows="6"
placeholder="评论内容"
v-model="content"
></textarea>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button
type="button"
class="btn btn-default pull-right"
@click="add"
>提交</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
props:{
addComment:{ //指定属性名/属性值的类型/必要性
type:Function,
required:true
}
},
data(){
return{
name:'',
content:''
}
},
methods:{
add(){
//1.检查输入的合法性
const name=this.name.trim();
const content=this.content.trim();
if(!name || !content){
alert('姓名或内容不能为空');
return;
}
//2.根据输入的数据封装成一个comment对象
const comment={name,content};
//3.添加到comments中
this.addComment(comment);
//4.清除输入
this.name='';this.content='';
}
}
};
</script>
<style>
</style>Item.vue代码：
<template>
<div>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;" @click="del">删除</a>
</div>
<p class="user"><span>{{comment.name}}</span><span>说:</span></p>
<p class="centence">{{comment.content}}</p>
</li>
</div>
</template>
<script>
export default {
props: {
//指定属性名和属性值的类型
comment: Object,
delComment:Function,
index:Number
},
methods:{
del(){
const {comment,index,delComment}=this;
if(window.confirm('确定删除'+comment.name+'的评论吗？')){
delComment(index);
}
}
}
};
</script>
<style>
</style>主要是复习了vue中组件之间的通信流程。
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
