Web前端
内涵是一种信仰
这个作者很懒,什么都没留下…
展开
-
css_标准流_浮动_清除浮动_overflow_左右结构的布局_定位_两个css案例_Unit_7;
Topic 1 . 标准流/文档流:其实就是一个非常常见的现象:由于页面中的所有标签默认状态下都受标准流控制,所以块级标签独占一行,行内标签可以一行共存多个Topic 2 .浮动:浮动是一种脱离标准流的形式 -- 半脱离为什么说浮动是半脱离:他应该有一下两个原因:1 . 浮动流是一种半脱离标准流的排版方式,之所以这么说,是因为浮动元素浮动之后的位置取决于它在浮动之前的标准...原创 2018-07-17 15:49:15 · 621 阅读 · 0 评论 -
css的三个小练习及其需要注意的知识点_Unit_6;
写一个如下的页面:代码解析如下<!doctype html><html><head><meta charset="utf-8"><title>表单页面</title><style type="text/css"> body,div,p,span,a,原创 2018-07-16 11:10:04 · 194 阅读 · 0 评论 -
JavaScript_基础知识的总结_数据类型_关键字,保留字_Math对象_Js特殊的运算符_类型的转换_三元运算符_Unit_2;
说明 :对于JavaScript的基础知识有许多都是与Java相同的,在这里我们只梳理他们的不同之处,还有就是我感觉有必要复习的点;Topic 1 :数据类型 :JavaScript中的数据类型有 :1 . number这个就是数字类型 它对应的有一个NaN(not a number)NaN的作用为:用来表示数值的一种不正常的状态。一般情况下会在计算出现错误的时候出...原创 2018-07-30 09:52:49 · 192 阅读 · 0 评论 -
JavaScript_案例_1.检测用户输入_2.文本框默认样式设置_3.设计一个表格的样式实现全选反选的功能 _Unit_5;
Topic 1 : 检测用户的输入 :题目要求:编写一个用户注册页面检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 ;代码如下 :<!doctype html><html><head><meta charset="utf-8"><title>用户注册页面</title&g原创 2018-08-05 16:30:22 · 273 阅读 · 0 评论 -
JavaScript_获取元素_事件_事件的两个小案例_表单元素的组成_元素的属性_id选择器与类选择器的异同_代码的优化_js中this的解析_Unit_3;
说明:关于JavaScript的文章 我把知识点都以注释放在代码里 所以说代码注释真的很重要:Topic 1 :获取元素的方法 :获取元素的方法有五种 :1 . 根据id获取元素 :2 . 根据标签名字获取元素 :代码示例如下:<!doctype html><html><head><meta charset="utf-...原创 2018-08-01 17:53:06 · 211 阅读 · 0 评论 -
JavaScript_案例_标签的自定义属性_样式操作_开关灯操作_二维码显示操作_div样式操作_隔行变色高亮显示_Unit_6;
Topic 1 : 标签的自定义属性代码示例:<!doctype html><html><head><meta charset="utf-8"><title>自定义属性</title> <style> .bg { background-color: red;原创 2018-08-07 16:31:21 · 349 阅读 · 0 评论 -
css高级技术_渐变背景的切法_华为首页_华为的list页面制作步骤_大图制作banner通栏效果_精灵图结构做法_Unit_12;
Topic 1 :渐变背景的切法 :我们在看到这个渐变背景的时候就要想到找规律,不能像我们以前那样直接切出来一像素,我们仔细观察这个图,如果我们切一像素是显然不能平铺成如图所示的这个背景的,我们要把这个背景分解成若干个相同的切片取其中的一个就好了, 如图中所选切片所示;Topic 2 :华为首页(完整版) :代码如下:.html<!doctype html>...原创 2018-07-28 20:16:05 · 506 阅读 · 0 评论 -
JavaScript_BOM_定时器_倒计时案例_Location_登录页面的编写_Unit_12;
Topic 1 :BOMDOM : 文档对象模型BOM : 浏览器对象模型浏览器中的顶级对象是window;我们在写的时候一般会把window给省略;我们定义的属性和方法都是window的子对象;需要注意的就是window中的name和top两个属性,我们在代码中要是定义了相同名字的属性name很可能会是string类型(因为window中有这个属性);onunload(关...原创 2018-09-02 18:56:08 · 492 阅读 · 0 评论 -
JavaScript_动态创建表格(及其所有的知识点)_Unit_9;
Topic :动态创建表格(及其所有的知识点)功能说明: 我们模拟从服务器得到数据来动态生成表格的过程 我们把表格放到指定的位置 在这里我们放到box里面我们可以通过删除键来进行删除相应的数据我们把生成表格的方法封装成一个函数这样我们以后就可以用一句话方便的创建表格了;网页示例: 代码示例 :<!doctype html><html&...原创 2018-08-14 17:44:31 · 491 阅读 · 0 评论 -
JavaScript_动态创建元素的三种方法_节点操作_选水果游戏_注册事件(多个)_移除事件_事件捕获,冒泡,委托,对象_Unit_10;
Topic 1 : 动态创建元素的三种方法 :1 . document.write()2 .innerHTML3 .document.createElement();建议使用第三种方法,因为第三种方法好操作,生成的都是对象; 我们看三种方法的比较:1. 中间的但是跟最快的比较接近点<script> function fn() { ...原创 2018-08-20 17:18:07 · 376 阅读 · 0 评论 -
JavaScript_innerText(innerHTML)_HTML的转义符(和常用的符号)_文本框的操作_Unit_4;
Topic 1 : innerText(innerHTML)_HTML的转义符(和常用的符号):可读可写:innnerText;innerHTML;这两个属性是字符串类型;box.innerText; (属性)他是这样使用的;innerHtml和innerText的区别为:innerText 获取内容的时候会把标签过滤掉 通过浏览器渲染了 不会打印出来;老版本的f...原创 2018-08-04 13:52:35 · 3115 阅读 · 0 评论 -
JavaScript_menu_write_innerHTML_表格的解析_Unit_8;
Topic 1 : menu <!doctype html><html><head><meta charset="utf-8"><title>menu</title> <style type="text/css"> .ul li { list-sty原创 2018-08-13 20:37:31 · 170 阅读 · 0 评论 -
css_解决浏览器显示盒子的实际像素和你设置的像素不一致的问题;
我们在学盒子模型的时候,可能会遇到这样的问题:就是浏览器显示盒子的实际像素和自己设置的像素不一致的问题;自己设置宽高都是100px显示出来却是126px左右(不应该是102px左右吗),我也很绝望啊;<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</..原创 2018-07-16 06:50:34 · 11112 阅读 · 53 评论 -
css高级技术_DW中的代码片段_华为首页_精灵图的制作_写华为首页时的一些感悟_Unit_11;
Topic 1 : DW的代码片段 :代码片段的作用类似于我们的模板,只不过呢,他只是存储的一段代码,这样可以较少我们的工作量 ;我们在这里先定义两个代码片段:1 . 设计网页三步准备工作 ;2 . 实体化一个盒子:(就是他的宽和高还有background :pink;设置一背景色好区分区域);定义代码片段:先复制想要定义代码片段的代码 -- 菜单栏 -- 窗口 -- 代码...原创 2018-07-27 17:18:22 · 1455 阅读 · 0 评论 -
JavaScript_JavaScript的简介(alert)_书写规范_调错_console.log()_prompt_转义符_Unit_1;
Topic 1 . JavaScript的简介 :JavaScript用来制作web页面交互效果,提升用户体验。他可以做什么 :轮播图 ,Tab栏(选项卡) , 地图 ,表单验证;web前端的三层结构 :w3c的规范:行内样式(淘汰)结构层 HTML 从语义的角度,描述页面结构样式层 CSS 从审美的角度,美化页面...原创 2018-07-29 15:23:24 · 503 阅读 · 0 评论 -
DW的快捷键介绍及简单的应用
Topic 1 : 快捷键的介绍1 . F12使用浏览器运行2 . crtl + t标签环绕 需要先选中想要环绕的内容3 . Ctrl + h唤醒代码提示功能4 . Ctrl+U首选参数面板5 . 选中内容shift + 上下左右6 . ctrl + Bstrong标签7 . ctrl + iem 标签8. shift + 回车...原创 2018-07-11 16:08:35 · 9079 阅读 · 3 评论 -
HTML_CSS_属性和标签类型的总结;
文字控制属性:字号 -- font-size字体 -- font-family颜色 -- color对齐 -- text-align加粗 -- font-weight文字风格 -- font-style文本修饰(线段) -- text-decoration行高 -- line-height首行缩进:text-indent:2em区块控制属性:宽度 -- ...转载 2018-07-17 15:56:21 · 557 阅读 · 0 评论 -
FW软件的安装及简单的使用;
1 . FW的安装;我今天在学前端的时候老师要求我们安装FW,然后我就去软件安装管家去找了;结果却是不如人意的,然后我就找呗;结果又让我发现了了一个安装软件的好方法,我们可以在微信搜索那里搜索 你想装的软件名+安装二字,一般都可以搜索到教程加资源;需要的小伙伴可以试一下;百度网盘的地址为:这个是cs6版本的: https://pan.baidu.com/s/...原创 2018-07-17 22:02:16 · 20341 阅读 · 5 评论 -
css案例_尚合网的详细解析_项目编写遇到的问题和解决过程_Unit_8;
Topic 1 .设计前的准备工作:我在设计网页的时候设计师会给我们一张整体的效果图,我们需要把我们的页面设计成效果图的样式,我们需要的图片就是从这个图片里面截取,具体怎么截取怎么设计看你自己的思路;我们在这里使用FW来截取我们所需要的图片(FW的安装破解和简单的应用);我们在这是开始写这个网站首页之前呢我们应该做完一下步骤:我们应该建一个images,css文件夹和ind...原创 2018-07-20 12:11:35 · 2416 阅读 · 0 评论 -
HTML_无序列表_有序列表_项目列表_超链接_表格_细线表格_Unit_2;
Topic 1: 列表1.无序列表:ul 嵌套 li ;Practice:编写下图的一个网页:代码如下:<!doctype html><html><head><meta charset="utf-8"><title>无序列表练习</title></head><bod原创 2018-07-12 14:23:54 · 8532 阅读 · 0 评论 -
HTML_表单_input_非input_表单域_设置领域标志_file_Image(图片按钮)_要点总结_Util_3;
Topic 1 : 表单作用 : 收集和提交用户数据One : intput标签 他是单标记; input标签通过变换不同的type属性取值,从而实现显示样式和功能的变化 可以设置value默认值Two:非input标签 结构:select嵌套option,select表示下拉菜单的整体,option表示下拉菜单的某一项 分组功能:optgroup分组,通过标...原创 2018-07-12 17:19:33 · 365 阅读 · 0 评论 -
CSS_嵌入式书写方式_文字控制三属性_实体化三属性_显示模式_css的三种书写模式_选择器_编写一个百度的主页_Unit_3;
Topic 1 :CSS的第一个书写方式 :CSS不属于标签;css的一个小案例:代码示例:<!doctype html><html><head><meta charset="utf-8"><title>CSS体验</title><!----设置为css的纯文本模式----->&am原创 2018-07-13 17:46:18 · 1437 阅读 · 0 评论 -
css高级技术_css精灵_锚点链接_热点链接_模板_Unit_10;
Topic 1 . css精灵就是图片整合技术,就是将一系列小图整合到一张大图之上又称之为:CSS雪碧、CSS sprite大图称之为精灵图或雪碧图核心技术:背景图定位一般我们看到背景图的定位是负数的话那么一般就是使用的精灵图;背景图的单个属性如下 :背景图定位:background-position背景色:background-color背景图:backgro...原创 2018-07-26 08:39:57 · 602 阅读 · 0 评论 -
css_复合选择器_border_css层叠性与覆盖性_background_多标记构图法_行高_文本修饰属性_超链接的伪类_导航制作_Unit_4;
Topic 1 : 复合选择器:后代选择器:一个空格表示包含(嵌套)关系,不管空格前后是哪种基础选择器,只要有空格就是后代选择器1 /*ul li{ background:green;}*/ 2 .father .son{ background:blue;} 并集选择器:作用:控制页面中样式相同的盒子一个逗号表示合并关系1 div,p,h1...原创 2018-07-14 15:16:30 · 357 阅读 · 0 评论 -
css_盒子模型_Firebug_border_盒子的尺寸问题_外边距的合并_行内标签的垂直外边距_盒子居中_网页设置的三个准备工作_区块控制属性_Unit_5;
topic 1 : 盒子模型外边距margin:作用 -- 拉开两个盒子之间的距离边框线border内边距padding:作用 -- 拉开内容与边框线的距离panda内容width和height -- 实体化范围盒子模型代码:<!doctype html><html><head><meta charset="utf-8"><title&...原创 2018-07-15 17:51:50 · 269 阅读 · 0 评论 -
css高级技术_滑动门_ie6常见的三个兼容性问题_css滤镜_Unit_9;
Topic 1 : 滑动门 :核心技术 : 内部所有盒子都要左浮动;作用 :自适应非直角矩形尺寸;(所以宽度就不用我们写)注意 :滑动门用什么标签都可以制作 我们这里以 ul li来示例:1.基础的滑动门 :代码示例:<!doctype html><html><head><meta charset="utf-8">...原创 2018-07-23 16:53:43 · 187 阅读 · 0 评论 -
JavaScript_跟着鼠标飞的天使_事件冒泡参数_取消默认行为的执行_鼠标在盒子中的位置_键盘事件_Unit_11;
Topic 1 :跟随的天使screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 始终是浏览器最上面的左上角直接把鼠标的坐标给天使...原创 2018-08-27 10:59:04 · 331 阅读 · 0 评论