项目:
规则:项目分析 -> 明确需求 ->列出项目功能 ->数据库设计(表,表的字段) ->项目的页面逻辑
前端
html:标签(语义,功能),页面架构
css:样式,布局,页面样式布局
js:基础语法,事件,选择器,页面业务逻辑
jq:DOM,简化js代码
bootstrap:简化布局(指定页面架构下类名),依赖jq
swiper:轮播图
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>html回顾</title> 6 <link rel="stylesheet" href="font-awesome-4.7.0/css/font- 7 awesome.css">导入字体图标 8 </head> 9 <body> 10 <div></div>搭建页面架构 11 <h1></h1>页面标签 12 <i class="fa fa-suitcase fa-6x"></i> 13 <p></p>段落 14 <span></span>文本标签 15 <b></b> 16 <em></em> 17 <img src="" alt=""> 图片 18 <a href=""></a>超链接 19 <ul><li></li></ul>列表 20 <table><tr> <th></th></tr> 21 <tr><td colspan="2">合并同一列</td><td rowspan="2">合并同一行</td></tr></table>表格 22 <form action="" method=""> 23 <input type="text" value="" placeholder="占位符" name="" id="usr"> 24 <input type="password" value="" name="pwd" id="pwd"> 25 <input type="submit" value="提交"> 26 </form> 27 </body> 28 </html>
css
1 <!doctype html> 声明文档类型 2 <html> 3 <head> 4 <meta charset="UTF-8"> 选择编码格式 5 <title>css回顾</title> 6 <style> 7 .box { 8 width: 200px; 9 height: 200px; 10 background-color: orange; 11 } 类选择器,为类名为box的标签设置宽高及背景颜色 12 .box { 13 font-size: 30px; 14 font-family: "STSong"; 15 text-align: center; 16 line-height: 200px; 17 color: red; 18 /*box内的文本不能被选中*/ 19 user-select: none; 20 font-weight: 900; 21 }类选择器,为类名为box的标签设置 字体大小 字族 文本水平居中 通过设置行高为盒子高度使文本内容垂直居中 字体颜色 字重 以及该盒子内部文本不能被选中 22 .box { 23 background-color: orange; 24 /*background-image: url("1.png");*/ 25 background-repeat: no-repeat; 26 background-position: -100px -100px; 27 }类选择器,为类名为box的标签设置 背景颜色 背景图片 禁止平铺 28 及背景定位 (精灵图经常使用) 29 .box { 30 border-radius: 50px / 50%; 31 }类选择器,为类名为box的标签设置 边界圆角 32 .box { 33 box-shadow: 0 0 10px 0 red, 0 0 2 34 0px 0 black; 35 } 设置盒子阴影,可设置多个 参数分别为 x 轴偏移,y轴偏移,虚化程度,边框宽度,阴影颜色 36 .box { 37 transition-duration: 1s; 38 transition-property: all; 39 transition-timing-function: linear; 40 } 类选择器,为类名为box的标签设置 动画效果 属性 以及 动画效果 41 .box:hover { 42 width: 400px; 43 }类选择器,为类名为box的标签设置 鼠标悬浮时改变样式 44 .box { 45 transform: translateX(100px) rotate( 46 45deg) scale(0.5); 47 }类选择器,为类名为box的标签设置 形变 平移 旋转 缩放 48 </style> 49 50 <style> 51 /* 选择器 52 div 标签选择器 53 .div 类选择器 54 #div id选择器 55 行间式 56 !important 57 58 p, div, a 59 body div 60 .p1 ~ .p2 兄弟 61 div.box#info 62 63 :hover 鼠标悬浮时触发 64 :after 常用于清浮动 65 :nth-child(2n) 该盒子内部第几个内容 66 67 */ 68 69 </style> 70 71 <style> 72 /*盒模型：margin + border + padding + 73 content*/ 74 .box { 75 margin-top: 100px; 76 margin-left: 100px; 77 } 为盒子定位 78 79 /*浮动布局*/ 80 .sub { 81 float: left; 82 } 83 .sup:after { 84 content: ""; 85 display: block; 86 clear: both; 87 } 清浮动 88 89 /*定位布局*/ 90 .box { 91 position: fixed; 92 top: 0; 93 left: 0; 94 } 绝对定位,相对于窗口 95 body { 96 position: relative; 97 } 相对定位 98 p { 99 position: absolute; 100 top: 0; 101 left: 0; 102 } 103 绝对定位,父相子绝 104 105 </style> 106 </head> 107 <body> 108 <div class="box">字体</div> 109 <div class="sup"> 110 <div class="sub">sub</div> 111 <div class="sub">sub</div> 112 <div class="sub">sub</div> 113 </div> 114 <p>123</p> 115 116 </body> 117 </html>
js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js回顾</title> 6 <style> 7 .box { 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 transition: 1s; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="box"></div> 17 </body> 18 <script> 19 var box = document.querySelector('.box');定义变量box并赋值为查找到的盒子对象 20 // box.onclick = btnClick; 21 // 22 // function btnClick() { 23 // 24 // } 25 26 box.onclick = function (ev) { 27 ev.stopPropagation();阻止事件冒泡 28 29 width = getComputedStyle(this, null).width;得到计算后样式 30 width = parseInt(width); 31 console.log(width); 32 33 this.style.width = width * 2 + 'px'; 34 35 return false;防止其他事件响应 36 } 为变量绑定事件 37 38 var a = 10; 39 function fn() { 40 41 } 42 (function () { 43 44 })();匿名函数的自调用 45 46 if (20 > 10) { 47 48 } else if (10 == '10') { 49 50 } else { 51 52 } 53 54 for (var i = 0; i < 5; i++) { 55 56 } 57 数据类型 58 // number string boolean undefined 59 // object function null 60 // Array Date RegExp Math 61 62 // && || ! 前两者具有短路效果 63 64 65 var obj = { 66 name: 'Bob', 67 age: 18 68 } 定义对象 69 function People(name, age) { 70 this.name = name; 71 this.age = age 72 } 73 var p = new People('Hong', 8) 74 75 var arr = [1, 5, 3, 2, 4] 定义数组 76 77 </script> 78 </html>
homework
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>index</title> 6 <link rel="stylesheet" href="bootstrap-3.3.7-dist 7 /css/bootstrap.css"> 导入bootstrap模块 8 <style> 9 h1, ul { 10 margin: 0; 11 padding: 0; 12 } 13 ul { 14 list-style: none; 15 } 16 清除默认样式 17 </style> 18 <style> 19 .wrapper { 20 background-color: orange; 21 background-image: url("img/header-app- 22 image.jpg"); 23 background-size: 100vw; 24 background-repeat: no-repeat; 25 /*背景图片的定位方位 fixed以窗口作为参考 26 27 ，不再随着页面滚动而滚动*/ 28 background-attachment: fixed;将背景图片设置为固定布局 29 } 30 .part1 { 31 background-color: transparent; 设置背景颜色为透明色 32 height: 83px; 33 position: fixed; 绝对定位 34 width: 100vw; 设置宽度为视窗宽度 35 } 36 .part1 h1 { 37 width: 120px; 38 height: 70px; 39 background-color: orange; 40 background: url("img/logo-2.png") 41 no-repeat 0 0; 42 margin: 6px 60px; 43 } 44 .part1 ul { 45 margin-right: 30px; 46 color: white; 47 } 48 .part1 ul li { 49 float: left; 50 padding: 0 20px; 51 line-height: 83px; 52 font-size: 28px; 53 } 54 .part1 ul li:hover { 55 color: red; 56 cursor: pointer; 57 } 58 .part1 ul li.active { 59 color: red; 60 } 61 62 .part2 { 63 height: 600px; 64 background-color: transparent; 65 } 66 .part3 { 67 height: 500px; 68 background-color: green; 69 } 70 .part4 { 71 height: 1000px; 72 background-color: cyan; 73 } 74 </style> 75 </head> 76 <body> 77 <div class="container-fluid wrapper"> 通过类名调用bootstrap布局 78 <div class="row part1"> 79 <h1 class="pull-left"></h1> 80 <ul class="pull-right"> 81 <li class="active">part1</li> 82 <li>part2</li> 83 <li>part3</li> 84 <li>part4</li> 85 </ul> 86 </div> 87 <div class="row part2"> 88 89 </div> 90 <div class="row part3"> 91 92 </div> 93 <div class="row part4"> 94 95 </div> 96 97 </div> 98 </body> 99 <script src="js/jquery-3.3.1.js"></script> 导入jquery 100 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"> 导入bootstrap 101 </script> 102 <script> 103 $(document).scroll(function () { 当文档滚动时触发事件 104 sl = $(this).scrollTop(); 获取滚动的高度 105 // console.log(sl); 106 107 if (sl > 0) { 108 $('.part1').css('backgroundColor', 'white'); 109 110 $('.part1 ul').css('color', 'black'); 111 } else { 112 $('.part1').css('backgroundColor', 113 'transparent'); 114 $('.part1 ul').css('color', 'white'); 115 } 116 117 }) 118 119 $('ul li').click(function () { 为列表项添加点击事件 120 $(this).addClass('active').siblings(). 121 removeClass('active') 122 }) 123 124 $('ul li').eq(0).click(function () { 125 $('html').animate({ 126 scrollTop: 0 127 }, 500) 为第一个列表项添加点击事件为页面对象添加动画 滚动到初始位置 时间为500毫秒 128 }) 129 $('ul li').eq(1).click(function () { 130 pt = $('.part3').position().top; 获取盒子距离顶部的距离 131 console.log(pt); 132 $('html').animate({ 133 scrollTop: (pt - 83) 134 }, 500) 135 })为第二个列表项添加点击事件为页面对象添加动画 滚动到指定位置 时间为500毫秒 136 $('ul li').eq(2).click(function () { 137 pt = $('.part4').position().top; 138 console.log(pt); 139 $('html').animate({ 140 scrollTop: (pt - 83) 141 }, 500) 142 }) 143 144 </script> 145 </html>