入职必备技能（三）HTML、CSS、JAVASCRIPT

其他 2018-08-10 03:04:41 阅读次数: 0

浮动

文字环绕图片

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            <!-- 图片向右浮动 -->
            img{
                float: right;
            }
        </style>
    </head>
    <body>
    <img src="logo.png" alt="">
    夫君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能冶性。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！
    </body>
</html>

浮动副作用：因为浮动的元素脱离了标准流，不占有原空间，所以使得父元素塌陷及其他元素异位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .per{
            width:500px;
            height: auto;
            border: 1px solid #000;
        }

        .test{
            width: 80px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }

        .bro{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>

浮动副作用的解决

手动给父元素添加高度，弊端：父元素高度不会自适应的变化
通过clear清除内外浮动，清除附近浮动元素带来的影响，推荐做法。
给父元素添加overflow属性并结合zoom:1使用，弊端：overflow会截断超出父元素的子元素的部分
给父元素添加浮动，弊端：影响附近兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: 32px;
            border: 1px solid #000;

        }

        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
        }

        .test{
            width: 100px;
            height: 30px;
            float: left;
            background: red;
            border: 1px solid #FFF;
        }

        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
       <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>                
        <div class="clear"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            overflow: hidden;
            zoom:1;
        }

        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .per{
            width: 500px;
            height: auto;
            border: 1px solid #000;
            float: left;
        }
        .test{
            width: 100px;
            height: 30px;
            background: red;
            border: 1px solid #FFF;
            float: left;
        }

        .bro{
            width: 100px;
            height: 100px;
            background: blue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </div>
    <div class="bro"></div>
</body>
</html>

position属性

static特征：

1、忽略top、bottom、left、right、z-index的申明
2、两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
3、具有固定width和height值得元素，如果把左右外边距都设置为auto，则左右外边距会自动扩大占满剩余宽度。效果就好像这个块水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .block {
            position: relative;
            top:10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 2px solid blue;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
        }
        .block:nth-child(2){
            position: static;
            border-color:red;
        }
    </style>
</head>
<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>
</html>

relative特征：

可以使用top/bottom/left/right/z-index进行相对定位
相对定位的元素不会离开常规流
任何元素都可以设置为relative，他的绝对定位的后代都可以想对他进行绝对定位
可以使浮动元素发生偏移，并控制他们的堆叠顺序
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-relative</title>
    <style>
       /*padding:10px;*/
        html,body {
            background: #f5f5f5;
        }

        html,body,div,p,img {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .flex-container {
            background: purple;
            /*padding:10px;*/
        }
        .flex-item {
            color:purple;
            text-align: center;
        }

        .red {
            background: red;
        }

        .blue {
            background: lightblue;
        }

        .orange {
            background: darkorange;
        }

        .green {
            background: darkslategray;
        }
        .parent {
            width:300px;
            height:300px;
            background: blue;
        }
        .parent div {
            width: 80px;
            height: 80px;
        }
        .sub-1 {
            position:relative;
            background: red;
            top:20px;
            left: 50px;
        }
        .sub-2 {
            background: green;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="sub-1"></div>
        <div class="sub-2"></div>
    </div>
    <div class=""></div>
</body>
</html>

absolute特征（使得元素脱离常规流）

设置尺寸要注意：百分比比的是最近定位元素，如果没有最近定位元素，会认做爹爹
lrtb如果设置为0，他将对齐到最近定位元素的各边——然生出一个居中的妙计
lrtb如果设置为auto，他将被打回原形，恢复到常规流
z-index可以控制堆叠顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-absolute</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .parent {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }
        .sub {
            position: absolute;
            width: 50px;
            height: 50px;
        }
        .tl {
            top:0;
            left: 0;
            background: green;
        }
        .tr {
            top:0;
            right: 0;
            background: yellow;
        }
        .br {
            bottom:0;
            right: 0;
            background: black;
        }
        .bl {
            bottom:0;
            left: 0;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="sub tl"></div>
        <div class="sub tr"></div>
        <div class="sub br"></div>
        <div class="sub bl"></div>
    </div>
</body>
</html>

fixed（我跟绝对定位是同根生）

跟absolute只有一个区别，就是相对谁去定位，固定定位不会随着视口滚动而滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position-fixed</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .ad-right-float {
            position: fixed;
            bottom: 50px;
            right: 0;
            width: 80px;
            height: 80px;
            background: gray;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="ad-right-float">
        悬停广告
    </div>
</body>
</html>

Javascript

js输出：测试中常用的四种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js输出</title>
</head>
<body>
    <p id="one"></p>
    <script type="text/javascript">
        /**
        window.alert() 警告框
        document.write() 写到 HTML 文档中
        innerHTML 写到 HTML 元素
        console.log() 写到浏览器的控制台
        **/

        // alert('helloworld');

        // document.write('helloworld');

        // document.getElementById('one').innerHTML = "this is p";

        console.log(123)
    </script>
</body>
</html>

JS数据类型：String, Number, Boolean, Array, Object, Null, Undefined

Undefined表示变量不含有值
Null用来清空变量的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js数据类型</title>
</head>
<body>
    <script type="text/javascript">
        /**
         * 字符串 (String)
         * 数字 (Number)
         * 布尔 (Boolean)
         * 数组 (Array)
         * 对象 (Object)
         * 空 (Null)
         * 未定义 (Undefined)
         */


        // var可以声明各种类型
        var x;               // x 为 undefined
        var y = 5;           // y 为数字
        var z = "John";      // z 为字符串




        // 字符串
        var carname="Volvo XC60";
        var carname='Volvo XC60';





        // 数字
        var x1=34.00;      //使用小数点来写
        var x2=34;         //不使用小数点来写





        // 布尔
        var x=true;
        var y=false;





        // 数组
        var cars=new Array();
        cars[0]="Saab";
        cars[1]="Volvo";

        var cars=new Array("Saab","Volvo","BMW");

        var cars=["Saab","Volvo","BMW"];





        // JavaScript 对象   键值对
        var person={
            firstname:"John", 
            lastname:"Doe", 
            id:5566
        };

        console.log(person.firstname)
        console.log(person["firstname"])






        // Undefined 和 Null
        // Undefined 这个值表示变量不含有值。
        // 可以通过将变量的值设置为 null 来清空变量
        var persons;
        var car="Volvo";
        car=null
    </script>
</body>
</html>

文档对象模型

找到元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom简介</title>
</head>
<body>
    <!-- 
        <div id="intro"></div>
        <div id="main">
            <p>The DOM is very useful.</p>
        </div>
        <div class="content"></div>

        var x=document.getElementById("intro");
        var x=document.getElementById("main");
        var y=x.getElementsByTagName("p");
        var content = document.getElementsByClassName("content");
     -->
    <div id="intro">helloworld</div>


    <div id="main">
        <p>The DOM is very useful.</p>
    </div>

    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>

    <script type="text/javascript">
        // 通过js获取html标签
        var intro = document.getElementById("intro");  // 通过id找html，唯一的


        var main = document.getElementById("main");
        var p = main.getElementsByTagName("p")[0];

        var content1 = document.getElementsByClassName("content")[0];
    </script>
</body>
</html>

修改HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom html</title>
</head>
<body>
    <div id="main" data="nihao">123</div>

    <img src="1.jpg" id="image" />

    <a id="goUrl" href="">调到百度</a>
    <script type="text/javascript">
        var main = document.getElementById("main");
        main.innerHTML= 'helloWorld';

        /**
         *      element.getAttribute()
                element.setAttribute()   // 添加或者修改
                element.src
                element.href 

         * 
         */

        // alert(main.getAttribute("data"));

        main.setAttribute("data", "buhao");
        main.setAttribute("dd", "ddname");

        var image = document.getElementById("image");
        image.src = "2.jpg";

        var goUrl = document.getElementById("goUrl");
        goUrl.href = "http://www.baidu.com"
    </script>
</body>
</html>

修改CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom css</title>
</head>
<body>
    <div id="main">helloworld</div>
    <script type="text/javascript">
        var main = document.getElementById("main");
        main.style.color = "blue";
        main.style.fontSize = "100px";
    </script>
</body>
</html>

添加、监听事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom 事件</title>
</head>
<body>
    <!-- 
        1、元素
        2、动作
        3、触发的结果


        1）事件内嵌元素中 

        2）Element.onclick=function(){displayDate()};

        3）Element.addEventListener("click", function(){

              });
     -->
    <div onclick="alert('helloworld')">按钮</div>


    <div id="main">我是main</div>


    <div id="btn">我是btn</div>

    <script type="text/javascript">
        var main = document.getElementById("main");
        main.onclick = function(){
            alert("main被触发了");
        }



        var btn = document.getElementById("btn");
        btn.addEventListener("click", function(){
            alert("btn被触发了");
        });
    </script>
</body>
</html>

操作节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom 节点</title>
</head>
<body>
    <div id="div1">
        <p id="p1">我是第一个p</p>
        <p id="p2">我是第二个p</p>
    </div>
    <script type="text/javascript">
        /**
         *      document.createElement("p")  
                document.createTextNode("新增")
                parent.appendChild(child);
                parent.removeChild(child);
         * 
         */

        var p = document.createElement("p"); // <p></p>  
        var word = document.createTextNode("我是新增的p标签");  // 我是新增的p标签

        p.appendChild(word);  //<p>我是新增的p标签</p>


        var div1 = document.getElementById("div1");
        div1.appendChild(p);  


        var p1 = document.getElementById("p1");
        div1.removeChild(p1);
    </script>
</body>
</html>

浏览器对象

window

所有浏览器都支持 window 对象， 他表示浏览器窗口。
所有 JavaScript 全局对象、全局函数以及全局变量均自动成为 windows 对象的成员。
全局变量是 windows 对象的属性。
全局函数是 windows 对象的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js window</title>
</head>
<body>
    <button onclick="openwindow()">创建窗口</button>
    <button onclick="myFunction()">调整窗口</button>
    <button onclick="moveFunction()">移动窗口</button>
    <button onclick="closeFunction()">关闭窗口</button>

    <script type="text/javascript">
        var w;

        function openwindow(){
            w=window.open('http://www.baidu.com','CurrentWindowName', 'width=300,height=300');
        }


        function myFunction(){
            w.resizeTo(500,500);
            w.focus();
        }


        function moveFunction(){
            w.moveTo(700,500);
            w.focus();
        }


        function closeFunction(){
            w.close(700,500);
            w.focus();
        }
    </script>
</body>
</html>

window.screen

window.screen 对象在编写时可以不使用 window 这个前缀
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window screen</title>
</head>
<body>
    <script type="text/javascript">
        /**
         *  screen.availWidth - 可用的屏幕宽度
            screen.availHeight - 可用的屏幕高度
            1920 * 1080
         * 
         */

        alert(screen.availWidth);

        alert(screen.availHeight);

    </script>
</body>
</html>

location

location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.protocol 返回所使用的 web 协议
location.href 返回当前页面整个 URL

history

history.back 浏览器后退按钮
history.forward 浏览器前进按钮
history.go 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window history</title>
</head>
<body>
    <script type="text/javascript">
        /**
         *  window.history 对象在编写时可不使用 window 这个前缀
            history.back() - 与在浏览器点击后退按钮相同
            history.forward() - 与在浏览器中点击按钮向前相同
            history.go()
         */

        history    
        1、前端开发
        2、后端开发     
        3、移动开发    当前页面

        history.go(-2)
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_20330063/article/details/80394656
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022