53页面的搭建与js简介
Posted 千岁兰
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了53页面的搭建与js简介相关的知识,希望对你有一定的参考价值。
一、解决浮动带来的影响
1.1、问题点
浮动会导致父标签(上一级的边框)塌陷问题
1.2、解决方案
往边框里面添加一个标签,使其撑起来
1.利用clear属性
#d1 {clear:left;} 标签的左边不能有浮动元素
2.利用clearfix属性
在clearfix这个类后面建立一个空的内容,使其具有块级的特性,并且两边都不能有浮动元素
这是面对浮动塌陷问题最常用的方法,在编写html时直接写入,当遇到塌陷问题时,给标签添加一个clearfix的属性即可
.clearfix:after {content:" ";
display:block;
clear:both:}
二、溢出问题
当块级标签的大小,小于内容的大小时,会造成溢出现象
2.1、文本溢出
overflow:visible 默认溢出可见
overflow:hidden 溢出部分隐藏
overflow:scroll 溢出部分,通过上下滑动可见
overflow:auto 溢出部分,用过上下以及左右滑动可见
2.2、图片溢出
将图片设置成溢出部分隐藏,并且宽度为标签宽度的100%
#d1{overflow:hidden;}
#d1>img{width:100%}
三、定位
3.1、静态定位 static
所有标签都会默认为静态的static,不可改变位置,即position:static
3.2、相对定位 relative
相对于原标签移动relative
在使用相对定位时,需要先将静态定位改为相对定位,否则无法移动。position:relative;之后添加移动的数据
3.3、绝对定位 absolute
在知道父类定位的情况下,进行移动absolute
在使用绝对定位时,如果父类是默认定位的情况下,需要先将父类改成相对定位position:relative,在将子类进行绝对定位position:absolute,之后进行移动
3.4、固定定位 fixed
固定在浏览器的某个位置,例如小广告
默认固定定位在右下角,直接输入固定定位position:fixed,之后移动,设置边框的大小以及样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } #d1 { height: 100px; width: 100px; background-color: red; left: 50px; /*从左往右 如果是负数 方向则相反*/ top: 50px; /*从上往下 如果是负数 方向则相反*/ /*position: static; !*默认是static无法修改位置*!*/ position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了 */ } #d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; top: 100px; } #d4 { position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black; } </style> </head> <body> <!-- <div id="d1"></div>--> <!--<div id="d2">--> <!-- <div id="d3"></div>--> <!--</div>--> <div style="height: 500px;background-color: red"></div> <div style="height: 500px;background-color: greenyellow"></div> <div style="height: 500px;background-color: blue"></div> <div id="d4">回到顶部</div> </body> </html>
四、验证浮动和定位是否脱离文本流(是否还保留原本位置)
不脱离文本流:相对定位
脱离文本流:浮动、绝对定位、固定定位
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
五、z-index模态框
如百度登录页面,设置三层结构,使用z-index:99,数值越高,层级越高
eg:百度登陆页面 其实是三层结构 1.最底部是正常内容(z=0) 最远的 2.黑色的透明区(z=99) 中间层 3.白色的注册区域(z=100) 离用户最近 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style> </head> <body> <div>这是最底层的页面内容</div> <div class="cover"></div> <div class="modal"> <h1>登陆页面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>点我点我~</button> </div> </body> </html>
六、透明度的设置
opacity:0.9;同时修改颜色以及字体
background-color:rgba(0,0,0,0.5);只能修改字体的透明度
七、页面的搭建
7.1、书写顺序
1.先试用div进行站位,在填写基本内容,最后调整样式
2.在编写HTML时,id和class要求见名知意
7.2、页面的搭建
https://www.cnblogs.com/jingpeng/p/12892183.html
八、javascript简介
JavaScript和Java没有任何的关系,也是一种语言,可以写后端
是一种脚本语言,可以插入HTML页面的代码,并且可以使用浏览器执行
JavaScript是ecmascript的一种体现,后者是前者的规格
8.1、注释
单行注释:/单行/
多行注释:/*多行*/
8.2、引入方式
1.直接在script标签里面编写js代码
2.通过script标签src属性属性引入外部js代码
8.3、js语法结构
以分号为结束语句
8.4、变量
需要使用关键字声明
1.es6前:var
var name=‘a’; 局部和全部由分隔开
2.es6之后:var和let
let name=‘b’; 局部和全局未分隔
8.5、常量
python中:未明确的定义常量,默认大写为常量
js中:使用const声明是常量,const pi=3.14
以上是关于53页面的搭建与js简介的主要内容,如果未能解决你的问题,请参考以下文章