新年第一天

项目:

规则:项目分析 -> 明确需求 ->列出项目功能 ->数据库设计(表,表的字段) ->项目的页面逻辑

前端

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>

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>

css回顾

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>

js回顾

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>

作业