python 学习笔记十五 前端补充
扩展插件：
bxslider 内容滑块
http://bxslider.com/
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
http://v3.bootcss.com/getting-started/
文件结构
bootstrap2
├── css
│ ├── bootstrap-responsive.css
│ ├── bootstrap-responsive.min.css
│ ├── bootstrap.css
│ └── bootstrap.min.css
├── img
│ ├── glyphicons-halflings-white.png
│ └── glyphicons-halflings.png
└── js
├── bootstrap.js
└── bootstrap.min.js
bootstrap3
├── css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ ├── bootstrap.css
│ ├── bootstrap.css.map # 映射规则对应表
│ └── bootstrap.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js
└── npm.js
Font Awesome
字体和图标库
http://fontawesome.io/get-started/
图标调用：
a、图片，自己找图片，挖洞
b、现成的图标
css
使用样式
bootstrap--以前版本
css
图片库
使用样式
bootstrap--现在版本
css
字体文件（对应关系表）
使用样式
c、css
字体文件
样式
默认情况还是使用大图片的方式
JqueryUI
http://jqueryui.com/
Jquery EasyUI
传统的后台管理页面
http://jeasyui.com/download/index.php
伪类和伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
<!DOCTYPE html> <html lang="en"> <head> <style> h1:before { content:"hello, "; } </style> </head> <body> <h1>world</h1> </body> </html>
效果如下：
":after" 伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; } .clearfix:after { content:"."; clear:both; visibility: hidden; } </style> </head> <body> <div class="c1 clearfix"> <div style="float: left;">123</div> <div style="float: left;;">456</div> </div> </body> </html>
解决子标签float问题。
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
案例：Gotop终极版
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>返回顶部</title> <style> .hide{ display: none; } .icon{ background: url(images/index-bg_20160225.png) no-repeat; background-position: -40px -385px; width: 16px; height: 16px; display: inline-block; overflow: hidden; } .back{ position: fixed; right: 80px; bottom: 100px; width: 50px; } .gotop{ position: relative; width: 48px; height: 38px; border: 1px solid #ccd3e4; color: #fff; text-align: center; } .gotop .icon{ margin-top: 10px; } .gotop:hover:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background-color: #3b5998; } .content { visibility: hidden; width: 30px; height: 32px; padding: 3px 10px; cursor: pointer; font-size: 12px; z-index: 1; text-align: center; line-height: 16px; top: 0; position: absolute; } .gotop:hover .content { visibility: visible; } </style> </head> <body> <div style="height: 2000px;"> 页面内容 </div> <div class="back hide"> <div class="gotop" onclick="GoTop();"> <a class="icon"></a> <div class="content"> <span>返回顶部</span> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript"> function GoTop(){ //返回顶部 $(window).scrollTop(0); } $(function(){ $(window).scroll(function(){ //当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度 var top = $(window).scrollTop(); if(top>0){ //展示“返回顶部” $('.back').removeClass('hide'); }else{ //隐藏“返回顶部” $('.back').addClass('hide'); } }); }); </script> </body> </html>
css代码：
<style> .hide{ display: none; } .icon{ background: url(images/index-bg_20160225.png) no-repeat; background-position: -40px -385px; width: 16px; height: 16px; display: inline-block; overflow: hidden; } .back{ position: fixed; right: 80px; bottom: 100px; width: 50px; } .gotop{ position: relative; width: 48px; height: 38px; border: 1px solid #ccd3e4; color: #fff; text-align: center; } .gotop .icon{ margin-top: 10px; } .gotop:hover:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background-color: #3b5998; } .content { visibility: hidden; width: 30px; height: 32px; padding: 3px 10px; cursor: pointer; font-size: 12px; z-index: 1; text-align: center; line-height: 16px; top: 0; position: absolute; } .gotop:hover .content { visibility: visible; } </style>
jquery代码：
function GoTop(){
//返回顶部
$(window).scrollTop(0);
}
$(function(){
$(window).scroll(function(){
//当滚动滑轮时，执行函数体
//获取当前滑轮滚动的高度
var top = $(window).scrollTop();
if(top>0){
//展示“返回顶部”
$('.back').removeClass('hide');
}else{
//隐藏“返回顶部”
$('.back').addClass('hide');
}
});
});
布局
假设我们想实现页面居中的布局 如下：
可以使用在内容的外层套用一个div标签的方式：
1.需要指定宽度
2.设置居中margin 0 auto;
3.高度由内容撑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 auto; } .head{ height: 40px; background-color: red; } .body{ background-color: #dddddd; } .container{ width: 980px; margin:0 auto; /*处于外层标签的中间*/ } p{ background-color: green; } </style> </head> <body> <div class="head"> <div class="container"> <p>head</p> </div> </div> <div class="body"> <div class="container"> <p>1111111111111111111</p> <p>1111111111111111111</p> <p>1111111111111111111</p> <p>1111111111111111111</p> <p>1111111111111111111</p> </div> </div> </body> </html>
