web前端
V________
这个作者很懒,什么都没留下…
展开
-
迪士尼首页布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/norm原创 2020-11-11 10:14:35 · 600 阅读 · 0 评论 -
淘宝首页布局练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/n原创 2020-11-11 10:11:51 · 599 阅读 · 0 评论 -
豆瓣首页布局练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link rel="styleshe原创 2020-11-11 09:52:16 · 240 阅读 · 0 评论 -
盒模型基础布局练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第三个界面</title> <link rel="stylesheet" href="css/page3.c原创 2020-11-11 09:46:35 · 140 阅读 · 0 评论 -
盒模型基础练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web前端基础知识</title> <link rel="stylesheet" href="css/pag原创 2020-11-11 09:44:38 · 218 阅读 · 0 评论 -
基础页面布局练习
<!DOCTYPE html><!--文档声明,Document Type,既不是元素也不是注释,用于通知浏览器文档正使用哪个HTML版本--><html lang="en"><head> <!--文档头,是HTML元素中第一个子元素--> <meta charset="UTF-8"> <!--空元素,指示浏览器使用UTF-8解析界面--> <meta name="viewpor原创 2020-11-11 09:39:48 · 236 阅读 · 0 评论 -
node.js简单ATM
ATM简单计算机const rs = require("readline-sync");let account1 = 111;let password1 = `1a2b`;let account2 = 222;let password2 = `2b1a`;let balance1 = 1000;let balance2 = 5000;let state = true;console.log(`请输入您的账号`);let inputId = rs.question();if (!isNa原创 2020-11-04 10:17:23 · 118 阅读 · 0 评论 -
魔兽世界首页静态界面
魔兽世界首页静态界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./CSS/reset.css"> <link re原创 2020-11-03 13:16:51 · 486 阅读 · 1 评论 -
html与css基础
8.17总结1.重置文件:让相同标签在不同浏览器中显示相同样式2.判断主流浏览器,内核是不是自主研发3.主流浏览器4.开发思路-----垂直化1.用户群体A.渐进增强:先搭结构,根据用户,添加功能B.优雅降级:先开发所有功能。根据用户,进行删减5. doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + ‘px’;remfontSize:设置文件字体大小, winWidth:获取当前屏幕宽度,1080为设计稿尺寸,6原创 2020-09-10 20:54:58 · 127 阅读 · 0 评论 -
html与css基础
8.13总结1.有序列表:ol,子级只能是li ,li标签的display:list-item适用场景:相关的一类内容展示或者分类2.有序列表:ul适用场景:导航:header>nav>ul本身的list-style显示在padding区域,称次盒子,但可让其进主盒子,消除list-style可none也可消除padding list-style 在一个声明中设置所有的列表属性。list-style-type 设置列表项标记的类型。ollower-roman小写罗马数字 u原创 2020-09-10 20:53:45 · 113 阅读 · 0 评论 -
html与css基础
8.11总结1.常见的行盒:大部分文本类元素:span abbr em I cite strong b,图片和音视频2.文字必须放置在行内元素中(使其自动换行),否则会自动生成匿名行盒音视频会生成行盒3.空白折叠的规则仅适用于行盒内部与行盒之间4.可使用水平方向上的padding与margin设置内容间的距离5.由于每个标签在每个HTML中独占一行,在页面中就会产生一个空格,标签为了消除空格,需要在产生空格的父元素中设置font-size:06.默认情况下行盒设置宽高,垂直方向上的margi原创 2020-09-10 20:52:23 · 136 阅读 · 0 评论 -
html与css基础
8.7 总结1.flex与flex-grow区别(建议使用flex-grow) Flex设置的项目,会忽略本身尺寸,将剩余空间与本身宽度和 / 份数,再分配 Flex-grow则只计算剩余宽度,将剩余宽度 / 份数,再分配 但多个项目若二者的值相同,则没有区别2.设置背景图片Background-image:url(“”);雪碧图的操作步骤:设置标签雪碧图中图片的尺寸(宽高)已背景图方式引用图片设置雪碧图图片位置 background-position:- X - Y行盒原创 2020-09-10 20:50:03 · 152 阅读 · 1 评论 -
HTML与CSS基础
8.3总结1.盒模型:组成成分4个,所有标签都有子盒子:只有content叫内容盒content-boxPadding和content叫填充盒padding-boxBorder和Padding和content叫边框盒border-box2.改变盒子计算规则若标签width:200pxBox-sizing:content-box(默认值):内容盒占200pxborder-box(IE浏览器默认值):边框盒占200px一个元素产生什么样的盒子取决于css中的display属性,不能继承的属性原创 2020-08-09 21:00:39 · 286 阅读 · 0 评论 -
HTML基础知识
7.29总结1.一般是指AD或者相关信息,若为AD则靠近书写2.target:页面打开方式,(为了优化界面,增强用户体验感已经不常用)有_self:当前界面(默认值),_blank:新界面,两个属性值3.绝对路径:协议号://域名/目录,可以省略协议号和域名 访问站外资源(第三方)只能使用绝对路径,并且不能省略协议号和域名 当网站部署到服务器上后,网站中的所有资源都可以使用绝对路径访问4.相对路径:相对于当前资源的位置,只能访问站内资源 书写格式 ./ (可以省略) 当前worksp原创 2020-08-02 11:20:46 · 173 阅读 · 0 评论