web前端开发实例,web前端开发案例教程

时间:2022-04-13 阅读:100 评论:0 作者:老李

1.无序列表<ul type="circle">        <li>橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ul>   <ul type="disc">        <li>橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ul>        <ul type="square">        <li style="color:red;">橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ul>2.有序列表    <ol type="1">        <li>橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ol>    <ol type="a">        <li>橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ol>    <ol type="I">        <li>橘子</li>        <li>葡萄</li>        <li>樱桃</li>    </ol>3.自定义列表 <dl> <dt>计算机学院</dt> <dd>软件工程</dd> <dd>网络工程</dd> <dd>计算机应用</dd> <dt>音乐系</dt> <dd>唱</dd> <dd>唱</dd> <dd>唱</dd> </dl>4.列表样式<style> ul{ /**设置列表样式**/ list-style-type:circle; /**设置列表样式为图像**/ list-style-image:url(images/arrow.png); /**设置列表样式位置 : 默认为 outside 外侧 / inside内侧*/ list-style-position:inside; /*简写:**/ list-style:none; }</style></head><body> <ul> <li>橘子</li> <li>葡萄</li> <li>樱桃</li> </ul></body>5.表格跨行跨列 <table border="1"> <tr> <td colspan="3">三年级五班学员语文成绩和数学成绩</td> </tr> <tr> <td rowspan="2">白杨</td> <td>语文</td> <td>86</td> </tr> <tr> <td>数学</td> <td>96</td> </tr> <tr> <td rowspan="2">杨晨</td> <td>语文</td> <td>59</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table>6.数据劫持 var man = { age: 8, state: '儿童', sex: '女', name: "张三" } // man.age = -2500; //这样设置无法对数据可靠性,安全性做出处理 ,很容易造成数据web前端开发实例的混乱 //拦截处理 : get(在获取属性时会自动触发) / set (在设置属性时会自动触发) , 在这种拦截机制中做出需要拦截web前端开发实例的操作 var hanlder = { set: function (target, key, value) { console.log('正在准备设置对象web前端开发实例的属性...',target, key, value); if(key == "age"){ if(value>=0 && value<=120){ target.age = value; if(value>=0 && value<=12){ //实现在每次修改年龄的时候 ,根据修改年龄的数值决定对象属性state的状态 ,此处就与age属性实现web前端开发实例了数据的绑定,而不需要在每次设置age属性的时候,都要去写一遍判断逻辑和操作state target.state="儿童" }else if(value>=13 && value <18){ target.state = "少年"; }else if(value>=19 && value <30){ target.state = "青年"; }else{ target.state = "老年人"; } }else{ throw new Error('年龄输入不合法!!'); } } }, get: function (target, key) { // console.log('此处应该是获取代理目标对象属性的拦截操作...',target,key); switch (key) { case "age": if (target.sex == '女') { return '女孩子的年龄一般不能问的!!'; } else { return target.age; } break; default: return target[key]; } // return '数据保密!'; } } //实例化一个proxy , 其实就是对外提供的一个操作代理对象(操作时修改的就是prxoy对象,但是它会将数据再修改到目标对象上) var proxy = new Proxy(man, hanlder); console.log('年龄为:', proxy.age); //此时会触发proxy中的get ,因为在获取age属性 proxy.age = 30;7.async数据异步操作 //async 函数 ,异步函数 : 目的就将异步操作变成同步操作的方式编写 /** 使用关键字 async 声明一个异步函数 , 在调用异步函数的之前使用await关键配合使用,来声明当前执行的异步需要等待 ,等await关键字中的函数执行完之后 ,才会执行后边的代码 */ async function timeout(time) { return new Promise((resolve, reject) => { setTimeout(() => { //模拟一个异步操作,比如说是一次ajax交互 resolve(123); }, time) }) } async function hello(title, time) { let s = null; await timeout(time).then((res) => { // console.log(res); s = res; }); console.log(title + s); } hello("教育改变生活!!!!", 5000);web前端开发实例

8.模块化开发 :

将庞大的项目结构拆分成若干个独立依赖的小块,然后通过一定的拼装机制(模块化规范)加载到项目中.

常见的模块加载规范 :

CommonJS 同步加载机制 => 适用服务器端

AMD 异步加载机制 => 适用在浏览器端

CMD 异步加载机制(根据AMD衍生出来的 ,国人 玉伯 退出的模块加载机制) = > 浏览器端

ES6规范 了之前的一些模块加载机制优点

模块 : 其实任何js代码块都可以视为是一个模块 ,它可以是一个变量,一个方法或者一个对象和一个类.

为了演示ES6模块化的功能 : nodejs + webpack(打包)

笔记二web前端开发实例

1.雪碧图的使用

2.垂直方向的外边距(重叠):

如果遇到垂直方向的外边距重叠(容器是父子嵌套关系) ,只要使用给父级设置边框或背景色,是阻断重叠现象.

3.选择器:

1)空格 (根据标签的嵌套关系,表示后代元素)

2) >

3),

4)+

5)~

------------------------------------------------------

标准文档流:

行内元素:

1.一行显示,一行显示不下才换行

2.不能设置宽高属性

3.不能垂直方向外边距

4.默认底部对齐

5.使用text-align 实现对齐

a em strong i span img label button input

select option textarea

块级元素:

1.独占一行

2.可以设置宽高属性

3.支持垂直方向外边距

4.使用margin 对齐

p h1-h6 hr br div ul li ol dl dt table tr form

本文链接: https://www.liaier.com/177.html 转载请注明出处!

相关文章 是不是在找它?!
评论区 交流一下吧!

共有0条评论来说两句吧...

欢迎 发表评论: