day15--JavaScript

上节作业回顾

1、CSS重用

<style>

.c1{

}

.c2{

}

2、自适应和改变大小变形

左右滚动条的出现

宽度，百分比（全部使用百分比就会变形）

页面最外层：像素的宽度（改变页面大小，自动出现滚动条）

<form> action="http://www.alex.com" method="GET" enctype="multi图片提交必须">

</form>

GET:http://www.alex.com?q=用户输入

GET：http://www.alex.com?q=用户输入&b=用户输入

图片提交必须有enctype属性

CSS补充

position: 返回顶部，顶部菜单不动

position:

　　fixed固定在某处位置

relative 相对

absolute 绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c{

            width:70px;

            height:50px;

            background-color:black;

            color:white;

            line-height:50px;

            position:fixed;      #固定在某处，下面是设置固定的地方

            bottom:20px;

            right:10px;

        }

    </style>

    <!-- position属性的fixed代表固定在某处，定义position后，有四个属性，top,left,right,bottom，距离屏幕的四个位置 -->

</head>

<body>

    <div class="c">返回顶部</div>

    <div style="height:5000px;background-color:aliceblue;"></div>

    <!-- 两个块级标签，层叠的形式，要想实现放置底部的效果，要实现网页分层的效果 -->

</body>

</html>

首行固定，漂浮在网页顶端，两层网页

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--position属性的fixed是固定网页，margin-top属性是自动让标签距屏幕的距离，fixed固定屏幕，固定了标签，不会动的 -->

    <title>Title</title>

    <style>

        .c1{

            background-color:black;

            height:30px;

            color:white;

            position:fixed;

            left:;

            right:;

            top:;

        }

        .c2{

            background-color:pink;

            height:5000px;

            margin-top:31px;

        }

    </style>

</head>

<body>

    <div class="c1">顶部网页</div>

    <div class="c2">下面网页的信息</div>

    <div>草，怎么看不见华伦</div>

    <div>我擦，真的看不见呀，你妈妈的</div>

</body>

</html>

上面HTML代码中，position属性中的fixed是固定网页，而margin-top是让<div>标签距屏幕的距离，不会固定，是相对屏幕顶部位置。

relative相对,本身单独positive:relative是没有任何效果的

absolute绝对定位

relative + absolute

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            position:relative;

            width:500px;

            height:200px;

            border:1px solid red;

            margin:  auto;

        }

        .c2{

            position:absolute;

            left:;

            bottom:;

            height:50px;

            width:50px;

            background-color:black;

            border: 1px solid pink;

        }

    </style>

</head>

<body>

    <div class="c1">

        <div class="c2"></div>

    </div>

    <div class="c1"></div>

    <div class="c1"></div>

</body>

</html>

在父级标签中添加位置

网页分层，很多网页点开都有三层，如知乎的注册，点开之后有三层显示，最外层让用户注册

CSS中标签中,opacity用来设置透明度，范围是0--1

z-index指定层级，网页可以设置多层，z-index值大的在最外层。

margin-left，相对左边移动，margin-top相对顶端移动，相对框的最左边进行移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 边框的居中是相对左上角，因此要向真正居中，要进行调整，分成一半上下调整 -->

    <style>

        .c1{

            margin: auto;

            background-color:green;

            height:5000px;

            z-index:;

        }

        .c2{

            z-index:;

            position:fixed;

            background-color:white;

            height:400px;width:500px;

            left:%;

            top:%;

            border:1px solid deeppink;

            margin-left:-250px;

            margin-top:-200px;

        }

    </style>

</head>

<body>

    <div class="c2">我们一家亲</div>

    <div style="z-index:9;position:fixed;background-color:black;top:0;left:0;bottom:0;right:0;opacity:0.8"></div>

    <!-- 让网页外层变成透明的，需要一个属性，opacity，范围0-,opacity用来设置透明度-->

    <div class="c1">最里面的一层</div>

</body>

</html>

框架，各种框架的作用，页面上显示内容。

display:none取消显示框，显示框的显示与取消。display:none弹框消失

<div></div>标签里面设置图片的高度和宽度

</div>

上面<div>标签中，<img>标签，<div>设置了高度和宽度，但是图片的高度和宽度比设置的要大，则会撑开，<div>设置的高度和宽度就没有效果。

<div>标签中的overflow设置图片的形式，overflow:hidden超过部分隐藏；overflow:auto，超过部分出现滚动条。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c{

        }

    </style>

</head>

<body>

    <div style="height:300px;width:400px;overflow:auto;">

        <img src="xiaohua.jpg" style="height:200px;width:300px;"/>

    </div>

    <!-- overflow中，hidden是如果图片大小超过设置的大小，则隐藏超过的部分，auto是滚动条，在设置的框架内设置拉向两端的滚动条 -->

    <!-- 如果想完全显示，可以给图片本身定义高度和宽度，这时候跟<div>的高度和宽度无关了，但是尽可能要一致 -->

</body>

</html>

移动变颜色，移动到图片上面，颜色会变化，菜单上变化颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            position:fixed;

            right:;

            left:;

            top:;

            height:48px;

            background-color:#2459a2;

            line-height:48px;

        }

        .pg-body{

            margin-top:50px;

        }

        .w{

            width:980px;

            margin: auto;

        }

        .pg-header .menu{

            display:inline-block;

            padding: 10px;

            color:white;

        }

        .pg-header .menu:hover{

            background-color:blue;

        }

    </style>

    <!-- hover的作用是当标签移动到上面的时候CSS执行hover的里面定义的效果 -->

    <!-- padding代表上下左右边距都要增加10px,padding设置宽度，高度，上下左右,上下左右都增加10个像素(px) 上右下左 -->

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="menu" href="http://www.baidu.com" target="_blank">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu">段子</a>

            <a class="menu"></a>

        </div>

    </div>

    <!-- a标签之间如何设置间距，可以设置宽度和告诉，a标签默认是没有高度和宽度的，行内标签，要进行转换为块级标签 -->

    <!-- a标签默认行内标签，自身定义了高度和宽度，不能设置宽度和高度，除非进行转换，转化为块级标签 -->

    <div class="pg-body">asdfasdf</div>

</body>

</html>

.pg-header .menu:hover{}代表的含义是，只有当鼠标移动到.pg-header .menu指定的样式上，CSS才会执行hover里面定义的CSS样式，display:inline-black用来让块级标签拥有行内标签的属性，行内标签具有块级标签的属性，这个很重要，在改造行内标签（比如<a>标签）的时候很有效，可以定义高度和宽度，拉开<a>标签之间的间距。

背景图片

background-image:url(图片地址)，放置图片

background-repeat:repeat-x,向x方向延伸；repead-y向y方向延伸

background-repeat:no-repeat

background-image与background-repeat结合使用

点赞，私藏，手的图片，如何设置的，使用background-position来进行设置的

如何获取上面图片的一个，很多网站的点赞，评论图标都是一张图片，利用background-position来进行调节，如下：

background-position:

background-position-x

background-position-y #用来对图片抠图

设置图片的移动，背景移动，x,y方向移动，处理图片的移动，背景的移动，背景可以是图片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height:100px;width:20px;"></div>

    <div style="background-image:url(点赞.png);height:20px;background-repeat:no-repeat;border:1px solid red;width:20px;"></div>

</body>

</html>

背景图片的移动，从一张图片的位置来会移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .c1{

            background-image:url(login.png);

            width:40px;

            height:40px;

            background-position-x:5px;

            background-position-y: 80px;

            display:inline-block;

            position:absolute;

            top:5px;

            right:5px;

        }

    </style>

</head>

<body>

    <div style="height:50px;width:400px;position:relative;">

        <input type="text" name="username" style="height:50px;width:390px;padding-right:10px;"/>

        <span class="c1"></span>

    </div>

</body>

</html>

上面HTML代码实现的是输入框分层的情况，在input框里面增加一个图标。

day15--JavaScript的更多相关文章

Python一路走来 DAY15 Javascript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一如何编写 ...
Day15 HTML补充、初识JavaScript
一.上节回顾上节回顾: HTML 头部信息:编码.title.style.link(导入css文件) 身体: 内联块级 --->inline-block(既有内联效果又有块级效果) a标签: ...
python_way day15 HTML-DAY2 HTML-DAY2、JS
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...
python开发学习-day15(前端部分知识、web框架、Django创建项目)
s12-20160430-day15 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
python_way day15 HTML-DAY2、回顾HTML-CSS 标签（css强制生效），JS（数据类型，时间处理，作用域）
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效解决缩小页面混乱 ...
JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

如何使用无线连接来使Android调试手机
进入Android Studio.(我的是2.2版本) File->Setting->Plugins Browse repositories... 搜索 ADB WIFI 并安装重启An ...
Winform程序双向绑定
程序比较简单,一看就明白,主要需要实现INotifyPropertyChanged using System; using System.Collections.Generic; using Syst ...
@ImportResource 导入Spring 的xml配置文件
在配置类尚标注此注解,等同于spring配置文件中的 <import resource="beans.xml"/> Spring Boot里面没有Spring的配置文件 ...
C++中返回值
函数的返回值用于初始化在调用函数是创建的临时对象. 1.返回值为非引用类型: 会将函数的返回值复制给临时对象.跟实参初始化形参的方式一样. 2.返回值为引用类型: 没有复制返回值,返回的是对象本身.返 ...
charCodeAt() 和charAt()
charAt() 方法可返回指定位置的字符. charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. 方法 charCodeAt() ...
Javascript定义变量
在JavaScript中通过var来定义变量,不管是数字还是字符串,都可以通过这种方式来定义:我们既可以在声明变量的同时给变量赋值,也可以先声明变量,再给变量赋值. <script> va ...
cdn.dns,cms
CDN CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各 ...
Protues常用元器件查找对应表
原理图常用库文件:Miscellaneous Devices.ddbDallas Microprocessor.ddbIntel Databooks.ddbProtel DOS Schematic L ...
算法时间复杂度和NP问题简介
这里主要简单说一下算法的时间复杂度和NP问题简介,毕竟分析算法的时间复杂度上界有助于分析算法的好坏,分析算法好坏也有助于分析是否还有更好的算法: 一.时间复杂度: 一般关心的还有递归问题中的时间复杂度 ...
深入解析内存原理：SRAM的基本原理
1. SRAM芯片的引脚定义早期的SRAM 芯片采用了20 线双列直插(DIP:Dual Inline Package)封装技术,它们之所以具有这么多的针脚,是因为它们必须:• 每个地址信号都需要一根 ...

day15--JavaScript

day15--JavaScript的更多相关文章

随机推荐

热门专题