CSS与JS

最新推荐文章于 2024-08-03 08:45:00 发布
最新推荐文章于 2024-08-03 08:45:00 发布
阅读量257 收藏
点赞数
分类专栏： 前端 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66013742/article/details/133322191
版权

目录

一、定位属性

2.绝对定位

3.固定定位

二、盒子模型

三、扩展属性与网页设计

1.扩展属性

2.网页制作

四、JS概述

1.概述

2.组成部分

3.搭环境

五、JS基础语法

1.变量与数据类型

2.对象与数组

3.运算符

4.字符串操作

六、函数

1.函数应用

2.弹窗函数

3.系统提供的函数

七、事件

一、定位属性

描述：定位就是指定控件的位置，有三种定位方式：相对定位，绝对定位，固定定位

1.相对定位

相对定位：相对于当前位置的定位，移动位置后，原有位置保留

如：

<head>
    <style type="text/css">
        div{
            width: 150px;
            height: 150px;
        }
        #one{
            background-color: red;
        }
        #two{
            background-color: green;
            position: relative; /* 相对定位 */
            left: 50px;  /*左侧间隔50像素 */
            top: 30px;   /* 顶部间隔30像素 */
        }
        #threw{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="threw"></div>
</body>

2.绝对定位

绝对定位：相对于父容器的定位，如果父容器有定位，则基于父容器的定位；如果没有，则最终相对于body定位； 不会保留原有位置

<head>
    <style type="text/css">
        .dd{
            width: 150px;
            height: 150px;
        }
        .one{
            background-color: yellow;
        }
        .two{
            background-color: green;
            position: absolute; /* 绝对定位：基于父容器定位，且不会保留原有位置 */
            left: 50px;  /*左侧间隔50像素 */
            top: 30px;   /* 顶部间隔30像素 */
        }
        .threw{
            background-color: blue;
        }
        #parent{
            outline: dashed 2px gray;
            position: relative; /* 父容器的定位 */
        }
    </style>
</head>
<body>
    <div id="parent">
        <div class="one dd"></div>
        <div class="two dd"></div>
        <div class="threw dd"></div>
    </div>

</body>

3.固定定位

固定定位：和绝对定位类似，都是基于父容器定位；唯一的区别是，固定定位的位置完全固定

<head>
    <style type="text/css">
        .dd{
            width: 150px;
            height: 150px;
        }
        .one{
            background-color: yellow;
            position: fixed; /* 固定定位也是基于父容器定位，只是固定住了，不能移动 */
            left: 0px; /*相对body的left为0 */
            bottom: 50%;
        }
        .two{
            background-color: green;
            position: fixed;
            left: 0px; /*相对body的left为0 */
            bottom: 0;
        }
        .threw{
            background-color: blue;
            position: fixed;
            right: 0px; /*相对body的left为0 */
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div class="one dd"></div>
    <div class="two dd"></div>
    <div class="threw dd"></div>
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
</body>

二、盒子模型

盒子模型，主要讲解边框，内边距，外边距的设计

边框：类似于outline轮廓，都是将控件内容的包裹；（比轮廓更常用）

内边距：在边框与控件内容之间的间距，默认0px

外边距：边框的外面，控件与控件之间的间距，默认0px

<head>
    <style type="text/css">
        .dd{
            width: 100px;
            height: 100px;
        }
        .one{
            border-color: red;  /* 边框颜色 */
            border-width: 4px;  /* 线条宽度 */
            border-style: solid; /* 边框样式-实线 */
            padding-left: 30px; /*左侧内边距，会撑大容器 */
            /*margin-bottom: 50px;*/ /* 底部外边距：和第二个控件间距50px */
        }
        .two{
            border: dashed 4px green; /*边框组合，和轮廓属性类似 */
            margin-top: 50px; /* 顶部外边距：和第一个控件间距50px */
        }
    </style>
</head>
<body>
    <div class="one dd"></div>
    <div class="two dd"></div>
</body>

三、扩展属性与网页设计

1.扩展属性

<head>
    <style type="text/css">
        div{
            width: 250px;
            line-height: 80px;
            background-color: red;
            font-size: 40px;
            color: white;
            text-align: center;
            border-radius: 10px; /*圆角弧度 */
            text-shadow: 20px 10px 10px blue;
            /* 盒子阴影，和文本阴影类似 */
            box-shadow: 10px 15px 15px gray;
        }
        body{
            /* 设置多张图片: 图片和位置使用,拼接 */
            background-image: url(../img/002.png),url(../img/004.png);
            background-repeat: no-repeat;
            background-size: 300px 400px; /* 值为宽和高的值 */
            background-position: 100px 100px,400px 100px; /* x和y轴坐标点位置 */
        }
    </style>
</head>
<body>
    <div>扩展属性</div>
</body>

2.网页制作

<head>
    <style type="text/css">
        #left{
            float: left;
            line-height: 32px;
        }
        #right{
            float: right;	
            line-height: 32px;
        }
        #parent{
            width: 100%;
            height: 32px;
            background-color: gainsboro;
            overflow: hidden; /*清除浮动 */
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="left"><span style="color: red;">亲，请登录&nbsp;&nbsp;</span>免费注册&nbsp;&nbsp;手机逛淘宝</div>
        <div id="right"><span style="color: red;">淘宝网首页&nbsp;&nbsp;</span>我的淘宝&nbsp;&nbsp;购物车&nbsp;&nbsp;收藏夹</div>
    </div>
</body>

四、JS概述

1.概述

概述：解释型的脚本语言，就是依附在浏览器中，用于解释HTML的触发机制；例如，点击控件触发

如果把HTML看成房子结构，CSS看成装修效果，那么JS相当于智能家居

JS也是一种弱类型语言（java是强类型），在定义时都是var类型

2.组成部分

JS中需要学习三部分：

1.ECMASCript：统一脚本语言的标准（基础语法）

2.DOM-文档对象模型，(语法结合HTML使用)

3.BOM-浏览器对象模型，(JS与浏览器的交互)

3.搭环境

有两种脚本方式：

1.直接写脚本标签：<script></script>

2.引入JS文件

<!-- 方式1.直接引入js文件 -->
<script src="../js/hello.js"></script><br />
<!-- 方式2：script标签 -->
<!--		<script>
	alert("hello，world"); //警告提示
</script>-->

五、JS基础语法

1.变量与数据类型

/* 数据类型：表示值的数据类型，定义时都时var类型
			   string，number，boolean，undefined，object 
			 * */
var a = 1;
document.write(a+"<br />");  //页面打印
document.write(typeof a+"<br />");  //number
a = "abc"; 
document.write(a+"<br />");  //页面打印
document.write(typeof a+"<br />");  //string
a = true; 
document.write(a+"<br />");  //页面打印
document.write(typeof a+"<br />");  //boolean

var b;
document.write(b+"<br />");  //页面打印
document.write(typeof b+"<br />");  //undefined

document.write((b+1)+"<br />"); //undefined+1=NaN
document.write(typeof (b+1)+"<br />");  //number

b=3.14;
document.write(b+"<br />");  //页面打印
document.write(typeof b+"<br />");  //undefined

b = null;
document.write(b+"<br />");  //页面打印
document.write(typeof b+"<br />");  //object

2.对象与数组

/* 通过json格式创建对象   格式：{key:value,key2:value2}
			 * */
var student = {id:1001,name:"zs",age:30};
document.write(student.id+"--"+student.name+"<br />");

//数组：
var a = [1,3,5]; //类似java的静态赋值
document.write(a+"<br />");
//数组的增删改查：
a[3] = 8;  //添加
document.write(a+"<br />");
a[3] = 9;  //修改
document.write(a+"<br />");
a[5] = 66;
document.write("------遍历(查找)-------<br />");
for(var i=0;i<a.length;i++){ //和java类似进行遍历和下标操作
    document.write(a[i]+"<br />");
}
delete a[3]; //删除单个元素
document.write(a+"<br />");
document.write("------删除所有-------<br />");
a.length = 0; //删除所有
document.write(a+"<br />");

var arr = new Array(); //动态赋值
arr.push(66,22,88); //存多个元素
document.write(arr+"<br />");

3.运算符

//-------关系运算符-------
var a = 1;
var b = 2;
document.write((a==b)+"<br />"); //false
document.write((a==a)+"<br />"); //true

//== vs  ===
//==：只比较内容   ===:比较内容和类型
document.write((a=="1")+"<br />"); //true
document.write((a==="1")+"<br />"); //false
document.write((a===1)+"<br />"); //true

//--------算数运算符---------
document.write((5/2)+"<br />"); //2.5
//---数字字符串运算符：+是拼接符；其余的会转成number再计算 ---
document.write(("5"+2)+"<br />"); //52 字符串拼接符号
document.write(("5"-2)+"<br />"); //3 

//if分支语句判断，除了6个值为false，其余都为true
if(0){ //false 0 ""   null  undefined NaN 
    document.write("为true<br />");
}else{
    document.write("为false<br />");
}

4.字符串操作

var a = "hello";
document.write(a.concat("666"));  //字符串拼接
document.write(a.startsWith("he"));  //以he开头
document.write(a.toUpperCase()); //转大写
document.write("  aaa  ".trim()); //去除左右空格
document.write("  a,a,a  ".split(",")); //拆分

六、函数

S中的函数和Java中的方法类似，都是用于封装；都有调用和具体实现两部分

1.函数应用

//分类：无参   带参   带返回值
//1.无参数无返回值函数
test();  //函数调用
function test(){ //函数实现
    console.log("打印到控制台--无参无返回值");
}

//2.带参数带返回值函数
var max = getMax(3,5);
console.log(max);

function getMax(a,b){
    return (a>b)?a:b;
}

//问题：JS中是否有重载函数？  案例：求两个输的和，三个输的和，四个输的和
//结论：JS中没有重载，同名方法，后面的会覆盖前面的
//如果需要完成重载的调用，则需要借助 arguments(类似java的可变长参数)
console.log(add(1,2)); //3 
console.log(add(1,2,3));  //6
console.log(add(1,2,3,4)); //10

/*
			function add(a,b){
				return a+b;
			}
			function add(a,b,c){
				return a+b+c;
			}
			function add(a,b,c,d){
				return a+b+c+d;
			}*/
function add(){
    //arguments：专门接收参数的数组
    var sum = 0;
    for(var i=0;i<arguments.length;i++){
        sum += arguments[i];
    }
    return sum; //如果不写return，则接收undefined
}
//扩展：函数实现的另一中写法：把函数名当成变量的写法
aaa = function(){ //注意：这种写法，函数体必须放在函数调用的前面
    console.log("另一种函数实现");
}
aaa();  //函数调用

2.弹窗函数

//1.警告框  alert
//alert("弹出");

//2.确认框   confirm
/*
			if(confirm("你确认接收这个惊喜吗")){
				console.log("你点击了确认");
			}else{
				console.log("你点击了取消");
			}*/

//3.提示框   prompt 点击确认，返回内容   取消，则返回null  
//参数1：提示信息   参数2：默认填充的内容
var a = prompt("欢迎领导来千锋参观！","凤姐"); 
console.log(a);

3.系统提供的函数

//parseInt: 数字字符串转整数
var a = parseInt("3.14");
console.log(a);  //3
console.log(typeof a);

//parseFloat: 数字字符串转小数
a = parseFloat("3.14");
console.log(a);  //3.14
console.log(typeof a);

//isNaN：判断是否为非数字，是非数字则true；不是非数字则false
console.log(isNaN(NaN));  //true
console.log(isNaN(3));    //false
console.log(isNaN("3"));  //false
console.log(isNaN("abc"));  //true

七、事件

述：事件是HTML和JS之间进行数据交互的桥梁

双方的交互需要函数来完成，在HTML中编写函数调用，JS中进行函数的实现

<head>
    <script>
        function change(){
            alert("change事件..");
        }
        function myclick(){
            alert("click事件");
        }
        function myover(){
            alert("鼠标移入事件");
        }
        function myout(){
            alert("鼠标移出事件");
        }
        function myup(){
            console.log("键盘弹起");
        }
        function mydown(){
            console.log("键盘按下");
        }
        function mysub(){
            alert("提交事件");
        }

        //onload:html的标签都加载完成后，系统会自动调用onload方法
        onload=function(){
            alert("页面加载完成后的触发");
        }
    </script>
</head>
<body>
    <select onchange="change()">
        <option>湖南</option>
        <option>湖北</option>
        <option>广东</option>
    </select><br />
    <h2 onclick="myclick()">二级标题</h2>
    <input type="button" value="鼠标移入" onmouseover="myover()" />
    <input type="button" value="鼠标移出" onmouseout="myout()" />
    <br />
    <input type="text" onkeyup="myup()" onkeydown="mydown()" /><br />
    <form onsubmit="mysub()">
        <input type="submit" value="提交" />
    </form>
</body>

春雨燎原
关注
专栏目录
CSS和JS学习
03-15
CSS和JS基础学习，黑马2017前端的css和JS基础课件，文档是比较好的学习CSS和JS 的资源，浅显易懂可用浏览器打开，方便翻阅和学习。
css和js的入门
Dansha的花果山
08-17 446
使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 网站注册案例: form 标签: 表单标签,主要是用来向服务器提交数据 method: 提交方式 get post action : 提交的路径 input 标签: type: password: 密码...
javascript学习 - CSS 教程
paofuluolijiang的博客
08-03 876
CSS），中文译为层叠样式表。它是一种样式表语言，用于美化HTML文档的呈现。一般位于头部，标签下添加标签，CSS代码就放在中。
JS
Kunaly
08-10 327
回顾: css: 层叠样式表 作用: 渲染页面 提供工作效率,将html和样式分离 和html的整合 方式1:内联样式表 通过标签的style属性   方式2:内部样式表 通过head的子标签Style子标签 选择器{ 属性:值; 属性1:值1; } 方式3:外部样式表 有一个独立css文件.后缀名:.css 在html中通过link标签导入 选择器
css和js
weixin_44943389的博客
06-25 1120
需要注意的是，CSS和JavaScript是独立的技术，它们可以单独使用，也可以相互结合，根据具体需求和开发场景来决定如何应用它们。
javascript(js与css交互）
weixin_64549900的博客
03-09 825
<table border="1" cellpadding="0" cellspacing="0" width="60%" > <tr> <td><input id="all" type="checkbox">全选</td> <td><input onclick="myCheck(this,'01',4,6);" type="checkbox">1月</td> <td>.
基于HTML、CSS与JavaScript的简易互动网页设计与实作介绍
最新发布
10-08
本文主要介绍了如何运用HTML、CSS以及JavaScript来构造一款简洁而富有互动性的网页案例。该指南不仅详细解析了各个步骤，还具体提供了代码样例以便快速上手实践。 适合人群：对Web设计感兴趣的开发者或编程爱好者。 ...
HTML+CSS+JS精品网页模板源码153.rar
06-05
图片的命名和格式需要与原图片的名字和格式一致，其他的无需更改。如碰到HTML5+CSS+JS等专业技术问题，以及需要对应行业的模板等相关源码、模板、资料、教程等，随时联系博主咨询。 网页设计和制作、大学生网页课程...
CSS与JS中的相对路径引用简单介绍
09-25
与CSS不同的是，JavaScript文件中的相对路径引用的基准是引用它的HTML页面所在的目录。这在页面中引入JavaScript文件时尤其重要，因为路径错误可能导致文件无法被加载。 继续使用上面的例子，如果我们在`test.js`中...
HTML+CSS+JavaScript网页模板
07-09
【HTML+CSS+JavaScript网页模板】是Web开发中常见的元素，它们构成了网页的基本结构、样式和交互性。HTML（HyperText Markup Language）是用于创建网页内容的标记语言，CSS（Cascading Style Sheets）则负责定义这些...
HTML、CSS与JavaScript之间的区别与联系；HTML与HTML5之间的区别、CSS与CSS3之间的区别
weixin_47863547的博客
11-11 1958
Html与css和JavaScript之间的关系与区别 HTML、CSS、JS(JavaScript)之间是相互依赖，共同构建了网页的展示和交互. HTML(HyperText Markup Language)是超文本标记语言. CSS(Cascading Style Sheets)是级联样式表. JavaScript是一种脚本语言，主要用于前端的DOM处理. Html是网页内容的载体，内容为网页制作放在页面上让用户浏览的信息，可以包含文字，图片，视频等,主要让内容结构化，块状化. Css为表现层，外观
CSS基础和js基础
逼哥很疯狂的博客
05-21 1115
组成： 首先，我们需要了解下web前端由哪些组成： 1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java 2. 页面样式：css（Cascading Style Sheet，层叠样式表） 3. 页面交互：js（javascript）、jQuery、AJAX 一、CSS的优先级和继承： 1.1 CSS的优先级： 行内样式>ID选择器>类选择器>标签选择器。 就近原则。 1.2 CSS继承： 原则： ...
JS与CSS
翱翔天空的专栏
08-09 524
发现最近的学习和工作很累，似乎是每天像梦游一样的再课堂和工作单位之间游走，也许是最近JS的恶补带来的负面效应吧。当然能力的提升带来的是以后更好的发展，哥们儿打电话过来说他们现在做网络安全方面的了，我还是原地踏步走啊走，偶尔和他们交流交流，也算是一种提高吧，今天是深夜写BLOG ，写的很少希望大家见谅。晚安
CSS和JS的学习
weixin_44039136的博客
02-15 803
CSS和JS的学习CSS概述HTML的块标签主要作用简单语法CSS选择器**元素选择器：****ID 选择器****类选择器****属性选择器**后代选择器伪类选择器CSS的引入方式选择器的优先级使用 DIV+CSS 完成页面的优化盒子模型CSS 绝对定位JSJS入门什么是脚本语言JS的组成JS的语法JS 的数据类型JS 的运算符和语句JS 的输出JS的开发步骤 CSS概述 Cascading S...
CSS及javascript
2301_80098154的博客
03-24 1740
javascript是一门跨平台，面向对象的脚本语言（不用编译），可与网页交互。javascript能改变html的内容。JavaScript能改变图像的src属性值。javascript能进行表单验证。var 名={属性名：值，属性名：值，属性名：值...属性名：function（）{
CSS和JS知识点
Yydsaoligei的博客
08-24 552
盒子模型，浮动，溢出，定位，JS
CSS和JavaScript
luosuss的博客
05-09 776
我们需要先在该项目先建立css文件html引入CSS,在中添加标签。
理论知识总结（js和css）
fdbyd的博客
01-28 2106
目录 css 选择器 一：类选择器 class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。 <p class="first done"></p> .first{ background-color: red; } 二：ID选择器 #(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。 <p id="polite"></p> #polite{ ..
Css和JavaScript
Faker_whoop的博客
09-08 332
css简介：层叠样式表 将网页的显示样式和内容分离，提高显示功能 css和html的结合方式四种 在每个html标签上都有一个属性 style <div style ="background-color:red;color:white">天行有常不为尧存 不为桀亡</div> 使用<style> 标签 写在head 里面 3.写在css文件里面 通过@import url直接引用来写这个 使用 头标签 link标签 引入外部css文件 < link re
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值