display: flex/inline-flex
使用了display: flex/inline-flex属性后，子元素横向排列
使用了display: flex 属性后，父元素不设置宽度，宽度就是100%；不会被子元素宽度撑开；
使用了display: inline-flex 属性后，父元素不设置宽度，宽度就是所有的子元素宽度之和，会被子元素宽度撑开，实现宽度自适应；
.header {
...
justify-content: center; # 使子元素居中
display: flex; # 子元素居中的前提是display：flex，因为justify-content属性只对flex生效
}
# 百度：flex的作用，使子元素能够在父元素里弹性的伸缩（子元素尺寸大于父元素时）
# 与flex的不同是，inline-flex类似于行内元素，但与行内元素不同的是，他可以设置宽度，并且子元素宽度之和大于父元素时，与flex结果相同
.nav-bar { #.nav-bar的div位于header的div中，然后居中
display: inline-flex; # 设置了inline-flex,里面的行内子元素在容器高度范围内按行排列，即使子元素之间对齐方式不一样导致它们不在同一水平线排列
height: 100%; # 高度与父容器一致
}
.telephone{
display: inline-flex; # .telephone是块级元素div，需要修改为行内flex
margin: 10px 10px 10px 50px;
align-items: center;
}
# 设置flex，为了justify-content：center生效，子元素居中
<div class="content" style="display: flex; justify-content: center;margin-bottom: 20px">
<div style="width: 1100px;">
# 设置inline-flex，这个div就一定按指定高度，里面的元素也必须在这个高度里。宽度由内容决定。
<div style="display: inline-flex;height: 50px;align-items: center"> #justify-content使里面水平居中，align-items垂直居中
<span style="background-color: #b35215; width:8px; height: 60%; margin-right: 5px"></span>
<h2 style="color: #999999; font-weight: 900; font-size: 20px;">最新公告</h2>
</div>
# 设置inline-flex,也是让子元素按行排列
<div style="display: inline-flex; background-color: lightcyan;">
{% for obj in annouces %}
<div id="annouce" style="margin: 0 20px 10px 20px;">
<h1>{{ obj.title }}</h1>
<p>{{ obj.summary }}</p>
<a href="{{ obj.target }}" style="text-decoration: none;">查看更多</a>
</div>
{% endfor %}
</div>
</div>
</div>
子绝父相+hover
# 让鼠标移动.scenerys_box时显示图片.scenerys_img2
.scenerys_img1 {
position: absolute; #子绝父相
top: 0;
left: 0;
}
.scenerys_img2 {
position: absolute; #子绝父相
top: 0;
left: 0;
display: none;
}
.scenerys_box{
position: relative; #子绝父相
}
.scenerys_box:hover .scenerys_img2{
display: block; # hover的时候显示
}
transition动画
.teacher-other-list>div {
display: inline-block; #水平排列
font-size: 0; {# 使div高度多出的4px去掉 #}
margin-right: 61px;
position: relative; #子绝父相
overflow: hidden; {# 这样下面的cover 一开始在外面就不显示 #}
}
.teacher-other-list>div:hover .teacher-other-cover{
margin-top: 0; #hover的时候，取消margin，使cover显示出来
}
.teacher-other-cover>div {
margin-top: 20px;
}
.teacher-other-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: #202020;
opacity: 0.5; #半透明
margin-top: 100%; #使一开始的时候在下面，被hidden
transition: margin-top 0.5s; #设置动画
color: white;
text-align: center; {# strong标签是行内元素没有align属性，需要设置父级的text-align来居中 #}
padding-top: 40px;
}
背景图片
.nav-bar>.telephone-a { #a标签
background: url("/static/imgs/slogan2.png") no-repeat; #设置背景图片
background-position: left center; #设置背景图片位置
font-size: larger;
vertical-align: top; {# 设置了大字体后，又把父div撑高了，这里设置这个解决。与logo img一样 #}
float: right; {# 因为浮动了，发现vertical-align属性不再需要，这里保留，供日后参考 #}
}
.nav-bar>.logo-a:hover {
background-color: transparent; #其它a标签hover高亮，这里单独让这个a标签不高亮
}
.nav-bar>.logo-a>img {
position: relative; # 为了能够调整顶部间隙
top: 2px;
height: 46px; #设置图片高度height
vertical-align: top; {# 让其它a标签与它的顶部对齐，否则，它与其它a标签水平不对齐，撑高了父div。在a标签那里设置也可以 #}
} #top：使元素及其后代元素的顶部与整行的顶部对齐
vertical-align
关于vertical-align：https://blog.csdn.net/gua222/article/details/106460113 。文字与img的基线位置是不一样的。
另：同一文章：图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
居中
margin: 0 auto; # 在标准流中居中的方法
.nav-bar>a {
text-decoration: none;
display: inline-block;
height: 50px;
line-height: 50px; {# line-height = height 文字居中 #}
}
行内元素没有align属性，需要设置父级的text-align来居中
text-align
<div style="justify-content: center; display: flex">
#text-align: center使里面的行内元素居中
<div style="width: 1000px;text-align: center;font-size: 14px;margin-top: 5px">
<hr> # 分割线
<div style="margin-top: 10px">
...
</div>
<div style="margin-top: 10px;">
...
</div>
</div>
</div>
瀑布流
.w { #瀑布流容器
width: 1200px;
margin: 80px auto;
}
.item {
width: 33.33%; #分三列，所以是33.33%
float: left; #因为是div，浮动让它们水平并排
}
<div class="w" id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="/static/plugins/bxslider/js/jquery-1.12.4.js"></script> #引入jQuery
<script>
#页面加载完，立刻执行
$(function () {
var obj = new ScrollImg(); #创建对象
obj.fetchData(); #加载数据
obj.scrollEvent() #监听滚动事件
});
function ScrollImg() {
this.NID = 0; # 定义实例变量NID，记录要请求数据的初始ID
this.LASTPISITION = 2; #记录上一次排到哪个item
this.fetchData = function () {
var that = this;
$.ajax({
url: '/get_students/',
type: 'GET',
data: {nid: that.NID},#让后台根据nid来查询一定量的数据回来
dataType: 'JSON', #因为后台发送json数据过来
success: function (arg) {
var data = arg.data; # 拿到的是一系列的数据，列表
$.each(data, function (index, student) { #遍历列表，对每个数据做处理
var eqv = (index + that.LASTPISITION + 1) % 3;# +上一次位置+1，为了求得这次应该从哪个item开始放置新div
if (index + 1 == data.length) { #处理到最后一个
that.LASTPISITION = eqv; #记录这次item位置
that.NID = student.id #记录最后一个数据的id，下次数据从这个id开始获取
}
var item = $('#container').children().eq(eqv); #.eq 按索引eqv获取子元素
var div = document.createElement('div'); #创建div
div.style.margin = '0 20px 30px 20px'; #设置上下左右间距
div.style.border = '0.5px solid #dddddd';#设置边框
item.append(div);#添加div到item
var tag1 = document.createElement('img'); #创建img
tag1.style.width = '100%'; #宽度与容器一致
tag1.src = student.img_url; #设置图片
div.append(tag1); #添加img到div
var p1 = document.createElement('p');
p1.innerText = student.name;
p1.style.fontSize = '20px';
p1.style.fontFamily = 'Arial';
p1.style.color = '#333333';
p1.style.margin = '8px 10px'; #与容器边界的距离
div.append(p1);
var p2 = document.createElement('p');
p2.innerText = '公司：' + student.company + '\r\n薪资：' + student.salary + '/月';
p2.style.fontSize = '12px';
p2.style.fontFamily = 'Arial';
p2.style.color = '#666666';
p2.style.margin = '8px 10px';
p2.style.lineHeight = '20px'; #使行与行有间距
div.append(p2);
var p3 = document.createElement('p');
p3.innerText = student.gratitude;
p3.style.fontSize = '14px';
p3.style.fontFamily = 'Arial';
p3.style.color = '#666666';
p3.style.margin = '8px 10px 20px 10px'; #与容器边界的距离
div.append(p3);
})
}
})
};
this.scrollEvent = function () {
var that = this; #谁调用，this就是谁。这个先把this记录下来，是因为上面是ScrollImg对象调用。这样下面就可以调用fecthData方法。
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); #获得页面顶部向上滚了多少
var winHeight = $(window).height(); #获得浏览器高度
var docHeight = $(document).height(); #获得页面总高度
if (scrollTop + winHeight == docHeight) { # 浏览器高度+顶部滚动的高度=页面总高度，说明滚到底了。
that.fetchData();
}
})
};
}
</script>
Django后台接口
def get_students(request):
nid = request.GET.get('nid')
lid = int(nid) + 4 #现有id加4等于最后一个数据的id，id__gt=nid, id__lte=lid每次加查询4个数据
# .select_related("detail") 优化了数据库查询，链表查询。这里只需进行一次查询就可以了。
students = models.student_info.objects.filter(id__gt=nid, id__lte=lid).select_related("detail").all()
stu_list = [{'name': obj.name, 'img_url':obj.img_url(), 'company':obj.company, 'salary':obj.salary, 'gratitude':obj.detail.gratitude, 'id':obj.id} for obj in students]
return JsonResponse({'status':True, 'data':stu_list})
页面内嵌视频
优酷：点击分享按钮有通用代码，复制过来使用
<iframe height=498 width=510 src='https://player.youku.com/embed/XNjAwNTk3OTU1Mg==' frameborder=0 'allowfullscreen'></iframe>
腾讯地图js
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
window.onload = function(){
//直接加载地图
//初始化地图函数 自定义函数名init
function init() {
var center = new qq.maps.LatLng(22.914751,114.083267); // 地图的中心地理坐标。
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom:11 // 地图的中心地理坐标。
});
var marker = new qq.maps.Marker({ // 标记
position: center,
map: map
})
}
//调用初始化函数地图
init();
}
</script>
<!-- 定义地图显示容器 -->
<div id="container">
<div>
#其它是复制指南的代码。这里自己添加一个a标签，点击跳转到腾讯地图页，并指定了初识位置
<a target="_blank" href="http://apis.map.qq.com/uri/v1/marker?marker=coord:28.914751,106.083267;title:**市***镇；addr:**大厦" style="position: fixed; z-index: 100"><i class="itag"></i>查看完整地图</a> {# z-index:100使不被遮盖，前提position不是static。 i标签 加个样式 显示图标 #}
</div>
</div>
分割线的设置方法
<hr align="left" width="100%" size="1" color=#e0e0e0>