定位网页元素—第八章

、position 属性

1、static：默认值，没有定位，以标准流方式显示。

2、relative：相对定位，相对于自身原来位置进行偏移。偏移设置：top、left、right、bottom；

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。

设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。

设置相对定位的盒子原来的位置会被保留下来。

3、absolute：绝对定位偏移设置： left、right、top、bottom；

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移

如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

元素位置发生偏移后，它原来的位置不会被保留下来

4、fixed：固定定位偏移设置： left、right、top、bottom；

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；

二、z-index属性：

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

属性说明举例

opacity:xx值为0~1，值越小越透明opacity:0.4;

filter:alpha(opacity=x)x值为0~100，值越小越透明filter:alpha(opacity=40);

三、代码展示：

<!DOCTYPE html>

<head>

<title>花样链接卡</title>

</head>

<style>

padding:0px;

margin:0px;

}

text-decoration: none;

color:#fff;

position: relative;

top:35px;

}

.container{

width:320px;

height: 320px;

margin-top: 10px;

margin-left: 10px;

border: 2px solid red;

}

.container>div{

display: block;

width: 100px;

height: 100px;

background:#fd7dfd;

text-align: center;

}

.container>div:nth-of-type(1){

position: relative;

left: 10px;

top:10px;

}

.container>div:nth-of-type(2){

position: relative;

left: 210px;

bottom: 100px;

top:-90px;

}

.container>div:nth-of-type(3){

position: relative;

left: 10px;

bottom:-10px;

}

.container>div:nth-of-type(4){

position: relative;

left: 210px;

bottom:90px;

}

.container>div:nth-of-type(5){

position: relative;

left: 110px;

bottom: 290px;

}

.container>div:hover{

background-color:blue;

}

</style>

<body>

</div>

</body>

</html>

<html>

<head>

<title>奖多多安全购彩页面</title>

</head>

<style>

.zhu{

width: 1300px;

margin-left: 250px;

}

.fu>.zuo{

position: absolute;

top:150px;

}

.fu .youOne{

position: absolute;

float:right;

top:150px;

right: 0px;

}

.fu .youTwo{

position: fixed;

float:right;

right: 0;

bottom: 220px;

}

.fu .youThree{

position: fixed;

float:right;

right: 0;

bottom: 0px;

}

</style>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlEight/huayanglianjie.html

file:///D:/ruanjian/VS/wenjianxiangmu/htmlEight/caipiao.html

字母索引

A 开头B 开头C 开头D 开头E 开头F 开头G 开头H 开头I 开头J 开头K 开头L 开头M 开头N 开头O 开头P 开头Q 开头R 开头S 开头T 开头U 开头V 开头W 开头X 开头Y 开头Z 开头专业名词

英文译法 1译法 2译法 3a block of pointers一块指针一组指针abbreviation缩略语abstract抽象的abstract syntax tree, AST抽象语法树abstraction抽象abstraction barrier抽象屏障抽象阻碍abstraction of function calls函数调用抽象access访问存取access function访问函数存取函数accumulator累加器activate激活ad hoc专设adapter适配器address地址algebraic data type代数数据类型algorithm算法alias别名allocate分配配置alternative备选amortized analysis平摊分析anaphoric指代annotation注解anonymous function匿名函数antecedent前提前件先决条件append追加拼接application应用应用程序application framework应用框架application program interface, API应用程序编程接口application service provider, ASP应用程序服务提供商applicative应用序argument参数自变量实际参数/实参arithmetic算术array数组artificial intelligence, AI人工智能assemble组合assembly汇编assignment赋值assignment operator赋值操作符associated关联的association list, alist关联列表atom原子atomic原子的atomic value原子型值attribute属性特性augmented扩充automatic memory management自动内存管理automatically infer自动推导autometa theory自动机理论auxiliary辅助

英文译法 1译法 2译法 3backquote反引用backtrace回溯backward compatible向下兼容bandwidth带宽base case基本情形base class基类Bayes' theorem贝叶斯定理best viable function最佳可行函式最佳可行函数Bezier curve贝塞尔曲线bignum大数binary operator二元操作符binary search二分查找二分搜索二叉搜索binary search tree二叉搜索树binary tree二叉树binding绑定binding vector绑定向量bit位比特bit manipulation位操作black box abstraction黑箱抽象block块区块block structure块结构区块结构block name代码块名字Blub paradoxBlub 困境body体主体boilerplate公式化样板bookkeeping簿记boolean布尔border边框bottom-up design自底向上的设计bottom-up programming自底向上编程bound边界bounds checking边界检查box notation箱子表示法brace花括弧花括号bracket方括弧方括号branch分支跳转breadth-first广度优先breadth-first search, BFS广度优先搜索breakpoint断点brevity简洁buffer缓冲区buffer overflow attack缓冲区溢出攻击bug臭虫building创建built-in内置byte字节bytecode字节码

英文译法 1译法 2译法 3cache缓存call调用callback回调CamelCase驼峰式大小写candidate function候选函数capture捕捉case分支character字符checksum校验和child class子类choke point滞塞点chunk块circular definition循环定义clarity清晰class类类别class declaration类声明class library类库client客户客户端clipboard剪贴板clone克隆closed world assumption封闭世界假定closure闭包clutter杂乱code代码code bloat代码膨胀collection收集器复合类型column行栏column-major order行主序comma逗号command-line命令行command-line interface, CLI命令行界面Common Lisp Object System, CLOSCommon Lisp 对象系统Common Gateway Interface, CGI通用网关接口compatible兼容compilation编译compilation parameter编译参数compile编译compile inline内联编译compile time编译期compiled form编译后的形式compiler编译器complex复杂complexity复杂度compliment补集component组件composability可组合性composition组合组合函数compound value复合数据复合值compression压缩computation计算computer计算机concatenation串接concept概念concrete具体concurrency并发concurrent并发conditional条件式conditional variable条件变量configuration配置connection连接cons构造cons cell构元cons 单元consequent结果推论consistent一致性constant常量constraint约束constraint programming约束式编程container容器content-based filtering基于内容的过滤context上下文语境环境continuation延续性continuous integration, CI持续集成control控件cooperative multitasking协作式多任务copy拷贝corollary推论coroutine协程corruption程序崩溃crash崩溃create创建crystallize固化curly括弧状的curried柯里的currying柯里化cursor光标curvy卷曲的cycle周期

英文译法 1译法 2译法 3dangling pointer迷途指针野指针Defense Advanced Research Projects Agency, DARPA美国国防部高级研究计划局data数据data structure数据结构data type数据类型data-driven数据驱动database数据库database schema数据库模式datagram数据报文dead lock死锁debug调试debugger调试器debugging调试declaration声明declaration forms声明形式declarative声明式说明式declarative knowledge声明式知识说明式知识declarative programming声明式编程说明式编程declarativeness可声明性declaring声明deconstruction解构deduction推导推断default缺省默认defer推迟deficiency缺陷不足define定义definition定义delegate委托delegationdellocate释放demarshal散集deprecated废弃depth-first深度优先depth-first search, BFS深度优先搜索derived派生derived class派生类design pattern设计模式designator指示符destructive破坏性的destructive function破坏性函数destructuring解构device driver硬件驱动程序dimensions维度directive指令directive指示符directory目录disk盘dispatch分派派发distributed computing分布式计算DLL hellDLL 地狱document文档dotted list点状列表dotted-pair notation带点尾部表示法带点尾部记法duplicate复本dynamic binding动态绑定dynamic extent动态范围dynamic languages动态语言dynamic scope动态作用域dynamic type动态类型

英文译法 1译法 2译法 3effect效果efficiency效率efficient高效elaborateelucidatingembedded language嵌入式语言emulate仿真encapsulation封装enum枚举enumeration type枚举类型enumrators枚举器environment环境equal相等equality相等性equation方程equivalence等价性error message错误信息error-checking错误检查escaped逃脱溢出escape character转义字符evaluate求值评估evaluation求值event事件event driven事件驱动exception异常exception handling异常处理exception specification异常规范exit退出expendable可扩展的explicit显式exploratory programming探索式编程export导出引出expression表达式expressive power表达能力extensibility可扩展性extent范围程度external representation外部表示法extreme programming极限编程

英文译法 1译法 2译法 3factorial阶乘family（类型的）系feasible可行的feature特色field字段栏位file文件file handle文件句柄fill pointer填充指针fineo-grained细粒度firmware固件first-class第一类的第一级的一等的first-class function第一级函数第一类函数一等函数first-class object第一类的对象第一级的对象一等公民fixed-point不动点fixnum定长数定点数flag标记flash闪存flexibility灵活性floating-point浮点数floating-point notation浮点数表示法flush刷新fold折叠font字体force迫使form形式form表单formal parameter形参formal relation形式关系forward转发forward referencesfractal分形fractions派系framework框架freeware自由软件function函数function literal函数字面常量function object函数对象functional arguments函数型参数functional programming函数式编程functionality功能性

英文译法 1译法 2译法 3game游戏garbage垃圾garbage collection垃圾回收garbage collector垃圾回收器generalized泛化generalized variable广义变量generate生成generator生成器generic通用的泛化的generic algorithm通用算法泛型算法generic function通用函数generic programming通用编程泛型编程genrative programming生产式编程global全局的global declaration全局声明glue program胶水程序goto跳转graphical user interface, GUI图形用户界面greatest common divisor最大公因数Greenspun's tenth rule格林斯潘第十定律

英文译法 1译法 2译法 3hack破解hacker黑客handle处理器处理程序句柄hard disk硬盘hard-wirehardware硬件hash tables哈希表散列表header头部header file头文件heap堆helper辅助函数辅助方法heuristic启发式high-order高阶higher-order function高阶函数higher-order procedure高阶过程hyperlink超链接HyperText Markup Language, HTML超文本标记语言HyperText Transfer Protocol, HTTP超文本传输协议

英文译法 1译法 2译法 3identical一致identifier标识符identity同一性ill type类型不正确illusion错觉imperative命令式imperative programming命令式编程implement实现implementation实现implicit隐式import导入incremental testing增量测试indent缩排缩进indentation缩排缩进indented缩排缩进indention缩排缩进infer推导infinite loop无限循环infinite recursion无限递归infinite precision无限精度infix中序information信息information technology, IT信息技术inheritance继承initialization初始化initialize初始化inline内联inline expansion内联展开inner class内嵌类inner loop内层循环input输入instances实例instantiate实例化instructive教学性的instrument记录仪integer整数integrate集成interactive language交互式语言interactive programming environment交互式编程环境interactive testing交互式测试interacts交互interface接口intermediate form过渡形式中间形式internal内部internet互联网因特网interpolation插值interpret解释interpreter解释器interrupt中止中断intersection交集inter-process communication, IPC进程间通信invariants约束条件invoke调用item项iterate迭代iteration迭代的iterative迭代的iterator迭代器

英文译法 1译法 2译法 3jagged锯齿状的job control language, JCL作业控制语言judicious明智的

英文译法 1译法 2译法 3kernel核心kernel language核心语言keyword argument关键字参数keywords关键字kludge蹩脚

英文译法 1译法 2译法 3lambda calculuslambda 演算larval startup雏形创业公司laser激光latitudelayout版型lazy惰性lazy evaluation惰性求值legacy software历史遗留软件leverage杠杆(动词)利用lexical词法的lexical analysis词法分析lexical closure词法闭包lexical scope词法作用域Language For Smart People, LFSP聪明人的语言library库函数库函式库lifetime生命期linear iteration线性迭代linear recursion线性递归link链接连接linker连接器list列表list operation列表操作literal字面literal constant字面常量literal representation字面量load装载加载loader装载器加载器local局部的局域的local declarations局部声明local function局部函数局域函数local variable局部变量局域变量locality局部性loop循环lvalue左值

英文译法 1译法 2译法 3machine instruction机器指令machine language机器语言machine language code机器语言代码machine learning机器学习macro宏mailing list邮件列表mainframes大型机maintain维护manifest typing显式类型manipulator操纵器mapping映射mapping functions映射函数marshal列集math envy对数学家的妒忌member成员memorizing记忆化memory内存memory allocation内存分配memory leaks内存泄漏menu菜单message消息message-passing消息传递meta-元-meta-programming元编程metacircular元循环method方法method combination方法组合方法组合机制micro微middleware中间件migration（数据库）迁移minimal network最小网络mirror镜射mismatch type类型不匹配model模型modem调制解调器modifier修饰符modularity模块性module模块monad单子monkey patch猴子补丁monomorphic type language单型语言Moore's law摩尔定律mouse鼠标multi-task多任务multiple values多值mutable可变的mutex互斥锁Multiple Virtual Storage, MVS多重虚拟存储

英文译法 1译法 2译法 3namespace命名空间native本地的native code本地码natural language自然语言natural language processing自然语言处理nested嵌套nested class嵌套类network网络newline换行新行non-deterministic choice非确定性选择non-strict非严格non-strict evaluation非严格求值nondeclarativenondestructive version非破坏性的版本number crunching数字密集运算

英文译法 1译法 2译法 3object对象object code目标代码object-oriented面向对象object-oriented programming面向对象编程Occam's razor奥卡姆剃刀原则on the fly运行中执行时online在线open source开放源码operand操作对象operating system, OS操作系统operation操作operator操作符optimization优化optimization of tail calls尾调用优化option选项optional可选的选择性的optional argument选择性参数ordinary常规的orthogonality正交性overflow溢出overhead额外开销overload重载override覆写

英文译法 1译法 2译法 3package包pair点对palindrome回文paradigm范式parallel并行parallel computer并行计算机param参数parameter参数形式参数/形参paren-matching括号匹配parent class父类parentheses括号Parkinson's law帕金森法则parse解析parse tree解析树分析树parser解析器partial application部分应用partial applied分步代入的partial function application部分函数应用particular ordering部分有序pass by adress按址传递传址pass by reference按引用传递传引用pass by value按值传递传值path路径pattern模式pattern match模式匹配perform执行performance性能performance-criticalpersistence持久性phrenology相面physical物理的pipe管道pixel像素placeholder占位符planning计画platform平台pointer指针pointer arithmetic指针运算poll轮询polymorphic多态polymorphism多态polynomial多项式的pool池port端口portable可移植性portal门户positional parameters位置参数postfix后序precedence优先级precedence list优先级列表preceding前述的predicate判断式谓词preemptive multitasking抢占式多任务premature design过早设计preprocessor预处理器prescribe规定prime素数primitive原语primitive recursive主递归primitive type原生类型principal type主要类型print打印printed representation打印表示法printer打印机priority优先级procedure过程procedurual过程化的procedurual knowledge过程式知识process进程process priority进程优先级productivity生产力profile评测profiler评测器性能分析器programmer程序员programming编程programming language编程语言project项目prompt提示符proper list正规列表property属性property list属性列表protocol协议prototype原型pseudo code伪码pseudo instruction伪指令purely functional language纯函数式语言pushdown stack下推栈

英文译法 1译法 2译法 3qualified修饰的带前缀的qualifier修饰符quality质量quality assurance, QA质量保证query查询query language查询语言queue队列quote引用quoted form引用形式

英文译法 1译法 2译法 3race condition条件竞争竞态条件radian弧度Redundant Array of Independent Disks, RAID冗余独立磁盘阵列raise引起random number随机数range范围区间rank（矩阵）秩排名rapid prototyping快速原型开发rational database关系数据库raw未经处理的read读取read-evaluate-print loop, REPL读取-求值-打印循环read-macro读取宏record记录recursion递归recursive递归的recursive case递归情形refactor重构refer参考reference引用参考referential transparency引用透明refine精化reflection反射映像register寄存器registry creep注册表蠕变regular expression正则表达式represent表现request请求resolution解析度resolve解析rest parameter剩余参数return返回回车return value返回值reuse of software代码重用right associative右结合Reduced Instruction Set Computer, RISC精简指令系统计算机robust健壮robustness健壮性鲁棒性routine例程routing路由row-major order列主序remote procedure call, RPC远程过程调用run-length encoding游程编码run-time typing运行期类型runtime运行期rvalue右值

英文译法 1译法 2译法 3S-expressionS-表达式save储存Secure Sockets Layer, SSL安全套接字层scaffold脚手架鹰架scalar type标量scan扫描schedule调度scheduler调度程序scope作用域SCREAMING_SNAKE_CASE尖叫式蛇底大写screen屏幕scripting language脚本语言search查找搜寻segment of instructions指令片段semantics语义semaphore信号量semicolon分号sequence序列sequential循序的顺序的sequential collection literalsserial串行serialization序列化series串行级数server服务器shadowing隐蔽了sharp犀利的sharp-quote升引号shortest path最短路径SICP《计算机程序的构造与解释》side effect副作用signature签名simple vector简单向量simulate模拟Single Point of Truth, SPOT真理的单点性single-segment单段的sketch草图初步框架slash斜线slot槽smart pointer智能指针snake_case蛇底式小写snapshot屏幕截图socket套接字software软件solution方案source code源代码space leak内存泄漏spaghetti面条式代码意面式代码spaghetti stack意面式栈面条式栈spam垃圾邮件spec规格special form特殊形式special variable特殊变量specialization特化specialize特化specialized array特化数组specification规格说明规范splitter切分窗口sprite精灵图square平方square root平方根squash碰撞stack栈stack frame栈帧stakeholderstandard library标准函式库state machine状态机statement陈述语句static type静态类型static type system静态类型系统status状态store保存stream流strict严格strict evaluation严格求值string字串字符串string template字串模版strong type强类型structural recursion结构递归structured values结构型值subroutine子程序subset子集substitution代换substitution model代换模型subtype子类型superclass基类superfluous多余的supertype超集support支持suspend挂起swapping values交换变量的值symbol符号symbolic computation符号计算syntax语法system administrator系统管理员system administrator disease系统管理员综合症System Network Architecture, SNA系统网络体系

英文译法 1译法 2译法 3(database)table数据表table表格tag标签标记tail-recursion尾递归tail-recursive尾递归的TAOCP《计算机程序设计艺术》target目标taxable operators需节制使用的操作符taxonomy分类法template模版temporary object临时对象testing测试text文本text file文本文件thread线程thread safe线程安全three-valued logic三值逻辑throw抛出丢掷引发throwaway program一次性程序timestamp时间戳token词法记号语义单位语元top-down design自顶向下的设计top-level顶层trace追踪trailing space行尾空白transaction事务transition network转移网络transparent透明的traverse遍历tree树tree recursion树形递归trigger触发器tuple元组Turing machine图灵机Turing complete图灵完备typable类型合法type类型type constructor类构造器type declaration类型声明type hierarchy类型层级type inference类型推导type name类型名type safe类型安全type signature类型签名type synonym类型别名type variable类型变量typing类型指派输入

英文译法 1译法 2译法 3user interface, UI用户界面unary一元的underflow下溢unification合一统一union并集universally quantify全局量化unqualfied未修饰的unwindinguptime运行时间Uniform Resource Locator, URL统一资源定位符user用户utilities实用函数

英文译法 1译法 2译法 3validate验证validator验证器value constructor值构造器vaporware朦胧件variable变量variable capture变量捕捉variadic input可变输入variant变种venture capitalist, VC风险投资商vector向量viable function可行函数video视频view视图virtual function虚函数virtual machine虚拟机virtual memory虚内存volatile挥发vowel元音

英文译法 1译法 2译法 3warning message警告信息web server网络服务器weight权值权重well type类型正确wildcard通配符window窗口word单词字wrapper包装器包装What You See Is What You Get, WYSIWYG所见即所得What You See Is What You Want, WYSIWYW所见即所想

英文译法 1译法 2译法 3Y combinatorY组合子

英文译法 1译法 2译法 3Z-expressionZ-表达式zero-indexed零索引的

专业名词

英文译法 1译法 2译法 3The Paradox of Choice选择谬论

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：JavaScript Input File对象
下一篇：servlet和jsp的区别

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

定位网页元素—第八章

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求