Web前端知识(三)

软件小生活

发布于 2021-09-10 17:09:11

1.8K0

文章被收录于专栏：软件小生活软件小生活

2.6.2.修改标签类型

CSS中有个display属性，能修改标签的显示类型

none：隐藏标签

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

2.7.CSS中的属性

2.7.1.常见基本属性介绍

文本属性:

font-size、font-family、font-style、font-weight

color

文本控制属性:

text-indent、text-align、text-decoration、line-height

背景属性:

background-color、background-image、background-repeat、background

列表属性:

list-style

其它属性介绍

visibility、cursor、outline、overflow

2.7.2.CSS3.0新增属性

RGBA透明度

RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值

代码:

.test1
        {
            width: 100px;
            height: 50px;
            /*background-color: red;*/
            /*background-color: rgb(255,0,255);*/
            background-color:rgba(0,0,0,1.0);
        }
        .test2
        {
            width: 100px;
            height: 50px;
            background-color:rgba(0,0,0,0.8);
        }
        .test3
        {
            width: 100px;
            height: 50px;
            background-color:rgba(0,0,0,0.4);
        }
        .test4
        {
            width: 100px;
            height: 50px;
            background-color:rgba(0,0,0,0.2);
        }

    style>
head>
<< span="">body>
<< span="">div class="test1">我是div标签div>
<< span="">div class="test2">我是div标签div>
<< span="">div class="test3">我是div标签div>
<< span="">div class="test4">我是div标签div>
body>

阴影

box-shadow text-shadow

box-shadow:向框添加一个或多个阴影。

代码:


<< span="">head>
    << span="">meta charset="UTF-8">
    << span="">title>Titletitle>
    << span="">style>
        #box
        {
            width: 100px;
            height: 100px;
            background: red;
            box-shadow: 10px 5px 10px yellow;
        }
    style>
head>
<< span="">body>
<< span="">div id="box">div>
body>

效果:

text-shadow 属性:向文本设置阴影。

代码:



        p
        {
            font-size: 100px;
            color: red;
            text-shadow: 10px 5px 10px yellow;
        }
    style>
head>
<< span="">body>
<< span="">div id="box">div>

<< span="">hr>

<< span="">p>我是段落p>
body>

效果:

圆角

border-radius

代码:


#box2
{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 10px;
}

效果:

使用圆角属性设置一个圆形

border-radius 分开设置:

-设置右上圆角

-设置左上圆角

………………………….

代码:

效果:

代码2:

效果:

2.8.盒子模型(***)

2.8.1.盒子模型介绍

网页上的每一个标签都是一个盒子

每个盒子都有四个属性

内容（content）

盒子里装的东西

网页中通常是指文字和图片

填充（padding，内边距）

怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料

边框（border）：盒子本身

边界（margin，外边距）

盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

2.8.2.盒模型分类

2.8.2.1.标准盒模型 - 重点掌握

2.8.2.2.IE盒模型(非标准) - 了解

2.8.3.盒模型深入

2.8.3.1.内容(content)属性

2.8.3.2.填充(padding)内边距 -属性

【基本认识】

【内边距属性写法】

2.8.3.边框(border)属性

设置圆角边框属性

border-radius

2.8.4.边界(margin) 外边距 –属性

【基本认识】

【写法】

2.9.HTML网页布局(***)

2.9.1.网页布局概述

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

2.9.2.脱离标准流

2.9.2.1.方式介绍

float属性

position属性和 left、right、top、bottom属性

2.9.2.2.方式一详解-float

float属性的常用取值有

left：脱离标准流，浮动在父标签的最左边

right：脱离标准流，浮动在父标签的最右边

代码1:

效果:

代码2：

效果2:

代码3：

效果:

【思考】:经过我们的学习，我们能够让一个标签停留在父标签的左边或者右边，但是如果我想停留在父标签的任意一个位置，浮动是不ok的，那又该怎么呢?

【案例】:

1)菜单效果

2）网页小布局

2.9.2.3.方式二详解-position

2.9.2.3.1.定位的基本使用

定位原则:子绝父相

在网页的开发中，定位一般需要结合：top bottom left right 四个属性一起使用

2.9.2.3.2.定位中-固定定位

Position:fixed + top bottom left right 四个属性一起使用

3.0.作业练习

使用div+css再写一遍:惠多多首页

3.JavaScript

3.1.JavaScript基础

3.1.1.为什么要学习JavaScript

3.1.2.JavaScript概述

JavaScript是一门广泛用于浏览器客户端的脚本语言

由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java

业内一般简称JS

脚本语言: 缩短传统的编写-编译-链接-运行过程,解释运行而非编译运行

JS的常见用途

lHTML DOM操作（节点操作，比如添加、修改、删除节点）

l给HTML网页增加动态功能，比如动画

l事件处理：比如监听鼠标点击、鼠标滑动、键盘输入

3.1.3.JavaScript基础实战

【语法实战】

3.1.3.1.入门程序-helloWorld

<< span="">html lang="en"> << span="">head> << span="">meta charset="UTF-8"> << span="">title>Titletitle> head> << span="">body> body> << span="">script> alert("hello world"); script> html>

演示:弹出框、输出控制台

3.1.3.2.JS基本语法

JavaScript的语法和Java非常类似，所有编程开发语言的语法都非常类似！所以我们应该掌握的学习编程的思想，这样学了一门语言就够了！！！

变量定义(声明)

If switch for

………

3.1.3.3.JS中函数用法

3.1.3.4.JS中创建对象

我们经过前面的学习，已经对JavaScript有了一个基本的了解，也大概会使用了，但是我们发现，貌似并没有发现js在网页中运用场景对吗?

3.1.3.5.JavaScript组成部分

ECMAScript:它是JS语言的标准,规定了JS的编程语法和基础核心知识

DOM: document object model 文档对象模型,提供给JS很多操作页面中元素的属性和方法

BOM: browser object model 浏览器对象模型 ,提供了很多操作浏览器的属性方法,而这些方法都存放在window浏览器对象上

【DOM实战】

3.1.3.6.DOM简介

DOM文档对象模型(Document Object Model)

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM树打印

//获取整个网页的document对象

console.log(document);

//获取网页中document的所有子节点

console.log(document.childNodes);

3.1.3.7.JS操作DOM

【介绍】：

其实我们要操作DOM非常简单，直接使用document对象即可！！

Document内置对象的作用:

1)往网页中写入一些标签

2)可以动态获取网页中所有的标签(节点)

3)可以对获取到的标签进行CRUD

3.1.3.8.写入内容

3.1.3.9.dom动态获取标签

函数名	含义
document.getElementById	根据id获取一个标签(元素)
document.getElementsByTagName	根据标签名称获取多个标签
document.getElementsByClassName	根据class名称获取多个标签

3.1.4.0.js中的常见事件

系统内置事件

²Window.onload 网页加载完毕事件

²Window.onscroll 网页滚动加载事件

²Window.onresize 网页尺寸切换事件

dom标签中的常用事件

Ø鼠标点击事件 onclick事件

Ø鼠标移入事件 onmouseover

Ø鼠标离开事件 onmouseout

Ø鼠标移动事件 onmousemove

Js在编写时候的三种方式：

1）直接在html标签中添加js

2）在script标签里面写

3）?????????

3.1.4.1dom案例实战

案例1:点击按钮切换图片

案例2:鼠标移入移出效果

案例3：网页换肤效果


<< span="">html lang="en">
<< span="">head>
    << span="">meta charset="UTF-8">
    << span="">title>Titletitle>
    << span="">style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body
        {
            background: url("images/1.jpg") no-repeat;
        }
        #box ul li
        {
           float: left;
        }
        #box ul li img
        {
            width: 200px;
        }
    style>
head>
<< span="">body>
<< span="">div id="box">
    << span="">ul>
        << span="">li><< span="">a href="#"><< span="">img src="images/1.jpg" alt="">a>li>
        << span="">li><< span="">a href="#"><< span="">img src="images/2.jpg" alt="">a>li>
        << span="">li><< span="">a href="#"><< span="">img src="images/3.jpg" alt="">a>li>
        << span="">li><< span="">a href="#"><< span="">img src="images/4.jpg" alt="">a>li>
        << span="">li><< span="">a href="#"><< span="">img src="images/5.jpg" alt="">a>li>
    ul>
div>
<< span="">script>
     var li1 = document.getElementsByTagName('li')[0];
     var li2 = document.getElementsByTagName('li')[1];
     var li3 = document.getElementsByTagName('li')[2];
     var li4 = document.getElementsByTagName('li')[3];
     var li5 = document.getElementsByTagName('li')[4];
    li1.onclick = function () {
         document.body.style.backgroundImage = "url('images/1.jpg')";
    }
     li2.onclick = function () {
         document.body.style.backgroundImage = 'url("images/2.jpg")';
     }
     li3.onclick = function () {
         document.body.style.backgroundImage = 'url("images/3.jpg")';
     }
     li4.onclick = function () {
         document.body.style.backgroundImage = 'url("images/4.jpg")';
     }
     li5.onclick = function () {
         document.body.style.backgroundImage = 'url("images/5.jpg")';
     }
script>
body>
html>

案例4：全选、反选、不选+隔行变色

案例5:tab选项卡

Html+css代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #tab
        {
            width: 498px;
            height: 160px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        #tab-header
        {
            width: 498px;
            height: 44px;
            background-color: gray;
            position: relative;
        }
        #tab-header ul
        {
            width: 501px;
            position: absolute;
            left: -1px;

        }
        #tab-header ul li
        {
            float: left;
            width: 98px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            /*background-color: red;*/
            padding: 0 1px;
            border-bottom:1px solid red;

        }
        #tab-header ul li.selected
        {
            border-bottom:none;
            background-color: white;
            border-left:1px solid green;
            border-right:1px solid green;
            padding: 0px;
        }
        .dom
        {
            display: none;
        }
        .dom ul li a
        {
            width: 220px;
            /*background-color: red;*/
            margin: 10px;
            float: left;
        }
    </style>
</head>
<body>
<div id="tab">
    <div id="tab-header">
        <ul>
            <li class="selected"><a href="#">招生</a></li>
            <li><a href="#">招生2</a></li>
            <li><a href="#">招生3</a></li>
            <li><a href="#">招生4</a></li>
            <li><a href="#">招生5</a></li>
        </ul>
    </div>
    <div id="tab_content">
        <div class="dom" style="display: block">
            <ul>
                <li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
                <li><a href="#">阿里打造"互联网监管"</a></li>
                <li><a href="#">10万家店60万新品</a></li>
                <li><a href="#">全球最大网上时装周</a></li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">“全额返现”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘宝新规发布汇总(7月)</a>
                </li>
                <li>
                    <a href="#">炒信规则调整意见反馈</a>
                </li>
                <li>
                    <a href="#">质量相关规则近期变更</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">“全额返现”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘宝新规发布汇总(7月)</a>
                </li>
                <li>
                    <a href="#">炒信规则调整意见反馈</a>
                </li>
                <li>
                    <a href="#">质量相关规则近期变更</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">阿里建商家全链路服务</a>
                </li>
                <li>
                    <a href="#">个性化的消费时代来临</a>
                </li>
                <li>
                    <a href="#">跨境贸易是中小企业机</a>
                </li>
                <li>
                    <a href="#">美妆行业虚假信息管控</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">接次文件，毁了一家店</a>
                </li>
                <li>
                    <a href="#">账号安全神器阿里钱盾</a>
                </li>
                <li>
                    <a href="#">新版阿里110上线了</a>
                </li>
                <li>
                    <a href="#">卖家学违禁避免被处罚</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Js代码：

<< span="">script>
    var alllis = document.getElementById("tab-header").getElementsByTagName("li");
    var doms = document.getElementsByClassName("dom");

    for(var i=0;i<< span="">alllis.length;i++)
    {
        var li = alllis[i];
         li.id = i;
        li.onmouseover = function () {
            for(var j=0;j<< span="">alllis.length;j++)
            {
                alllis[j].className = "";
                doms[j].style.display = 'none';
            }
            this.className = "selected";
            doms[this.id].style.display = "block";
        }

    }
script>

案例6:轮播图

6.1.定时器简介介绍

6.2.电商广告倒计时展示

6.3.鲜花表白案例

<< span="">html lang="en">
<< span="">head>
    << span="">meta charset="UTF-8">
    << span="">title>Titletitle>
    << span="">style>
        *{
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: black;
            text-align: center;
            margin-top: 100px;
        }
        img
        {
            display: none;
        }
        p
        {
            color: red;
            font-size: 50px;
            text-shadow: 3px 4px 4px purple;
             display: none;
        }
        div
        {
            color: red;
            font-size: 200px;
        }
    style>
head>
<< span="">body>
<< span="">img src="flower.gif" alt="">
<< span="">p id="word">我对你的爱，如滔滔江水~~~~~p>
<< span="">div id="times">5div>
<< span="">script>
  // 获取所有的标签
    var img1 = document.getElementsByTagName("img")[0];
    var p1 = document.getElementById('word');
    var times = document.getElementById('times');

    var timer = setInterval(function () {
          times.innerHTML--;
       // console.log(times.innerHTML);
        if(times.innerHTML=='0')
        {
            // 清除定时器
            clearInterval(timer);

            // 隐藏div
            times.style.display = "none";

            // 显示图片和文字
            img1.style.display = "inline-block";
            p1.style.display = "block";
        }
    },1000);
script>
body>
html>

6.4.简易轮播图

<< span="">html lang="en">
<< span="">head>
    << span="">meta charset="UTF-8">
    << span="">title>Titletitle>
    << span="">style>
        *{
            margin: 0;
            padding: 0;
        }
        #lunbo
        {
            width: 760px;
            height: 330px;
            border: 1px solid #000;
            margin: 0 auto;
        }
    style>
head>
<< span="">body>
<< span="">div id="lunbo">
    << span="">img src="imgs/pic01.jpg" alt="">
div>
<< span="">script>
    var index = 1;
    //1.获取标签
    var img = document.getElementsByTagName("img")[0];
    setInterval(changeImg,1000);
    function changeImg() {
        index++;
      //  console.log(1);
        img.src = "imgs/pic0"+index+".jpg";

        // 当index》5 重置
        if(index>=5)
        {
            index = 0;
        }
    }
script>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-06，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

html

本文分享自软件小生活微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

html

登录后参与评论

0 条评论

热度