JavaWEB学习笔记 2024-1-8 --CSS

已于 2024-01-12 19:48:45 修改
阅读量1.6k 收藏 47
点赞数 26
分类专栏： WebFront 文章标签： 学习 笔记 css 前端
于 2024-01-12 19:47:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHiN_951/article/details/135560373
版权

« 上一篇

文章目录

2.CSS

层叠样式表
 用于美化页面,修饰页面
CSS分为两个版本
 CSS2.x
 CSS3.x(伴随着HTML5一起发布的)

2.1CSS的引入方式

为了配合CSS的使用,所有的标签都添加了style,id,class等属性
CSS的引入分为三种方式
和HTML不同的是,HTML中的长宽是没有单位的,而CSS必须写单位(px,%,rem等)

行内式,和HTML编写在一起

<body>
    <div style="width: 200px;height: 200px;background: #0cc;"></div>
    <input type="text" style="outline: none;width: 200px;height: 200px;border:none;border-bottom: 1px solid pink;">
</body>

内联式/内嵌式,使用style标签在head中引入css

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 内嵌式,CSS代码通过style标签嵌入到html中,课上举例使用较多 -->
    <style>
        /* 
        选择器,用于对指定内容添加样式使用 
        标签选择器:所有的标签都可以作为选择器的名字
        */
        div {
            width: 200px;
            height: 200px;
            background: #0cc;
        }
    </style>
</head>
<body>
    <div></div>
</body>

外联式(开发时使用较多)
 两个文件:.html 和 .css
  在html文件中使用link标签,将两个文件进行连接

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css.css" />
</head>
<body>
    <div></div>
</body>

div {
	width: 200px;
	height: 200px;
	background: #0cc;
}

2.2选择器

CSS中语法都是使用选择器

语法
 选择器 {
  css样式:样式值;
  …
  …
 }

2.2.1基本选择器

标签选择器
 所有标签名都可以作为选择器
id选择器
 为标签添加id属性,使用#id值作为选择器,唯一的
class选择器
 为标签添加class属性,使用.class值作为选择器,一组的

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 标签选择器 */
        p {
            color:red;
        }
        /* id选择器,唯一的 */
        #p1 {
            background-color: aquamarine;
        }
        /* class选择器,一组 */
        .p-1 {
            font-size: 28px;
        }
    </style>
</head>
<body>
    <p>ppppp</p>
    <p>ppppp</p>
    <p id="p1">ppppp</p>
    <p class="p-1">ppppp</p>
    <p class="p-1">ppppp</p>
    <h2 class="p-1">h2222222222222</h2>
</body>
2.2.2选择器的权重

其他选择器(0) element(1) class(10) id(100) 行内样式(1000)
同等样式使用多种选择器的优先级
可以使用!important去改变选择器样式的优先级

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 权重100 */
        #p1 {
            color:hotpink;
        }
        /* 权重10 */
        .p-1 {
            color:yellowgreen;
        }
        /* 权重1 */
        p {
            color:red !important;/*!important权重最高*/
        }
        /* 其他选择器权重0 */
    </style>
</head>
<body>
    <!-- 权重1000 -->
    <p class="p-1" id="p1" style="color:cyan;">ppppppppppppppp</p>
</body>
2.2.3其他选择器

高级选择器,组合选择器
 可以将基本选择器组合在一起使用,更加针对某一个位置的样式

2.2.3.1群组选择器

同时为多个标签添加样式,使用逗号

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div,p,span,a,b{
            color:red;
        }
        /* 通用选择器,可以匹配所有的选择器,很少使用 */
        /* * {
        color:red;
        } */
    </style>
</head>
<body>
    <div>div...</div>
    <p>pppppp</p>
    <span>span....</span>
    <a href="">aaaaa</a>
    <b>bbbbb</b>
</body>
2.2.3.2后代选择器和父子选择器

用于标签嵌套
 后代选择器:使用空格,可以是隔代使用(直接或者间接嵌套) 使用很多
 父子选择器:使用>,必须为父子关系(直接嵌套)

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 后代选择器:间接的嵌套关系 */
        #div1 .span1 {
            background: #0cc;
        }
        /* 父子选择器:直接的嵌套关系 */
        #div2>.span1{
            background: orange;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div>
            <span class="span1">内容....</span>
            <span class="span2">内容....</span>
        </div>
    </div>

    <div id="div2">
        <div>
            <span class="span1">内容....</span>
            <span class="span2">内容....</span>
        </div>
    </div>
</body>
2.2.3.3兄弟选择器和相邻选择器

平级标签
 兄弟:平级的俩个标签,使用~
 相邻:紧紧挨着的两个标签,使用+

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 兄弟:只要是平级的可以 */
        p ~ p {
            color:red;
        }
        p ~ span {
            color:pink;
        }

        /* 相邻:紧紧相邻 */
        p + p {
            background: #0cc;
        }
        p + span {
            background: #0cc;
        }
    </style>
</head>
<body>
    <p>ppppp</p>
    <span>span</span>
    <span>span</span>
    <p>ppppp</p>
    <span>span</span>
    <p>pppp</p>
    <span>span</span>
</body>
2.2.3.4属性选择器
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 有type属性 */
        [type] {
            background: #0cc;
        }
        /* type=text */
        [type=text] {
            width: 200px;
            height: 200px;
        }
        /* input标签type=text */
        input[type=text] {
            background: none;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <div type="text">div...</div>
</body>
2.2.3.5伪类选择器

针对对标签状态的选择器
:link 超链接未被访问过的状态
:visited超链接访问后的状态
:hover 鼠标悬停状态
:active 鼠标按下状态
若编写样式时,只能按照上述的顺序编写(:link和:visited可以交换的)

对于其他标签可以使用
:hover 鼠标悬停状态
:active 鼠标按下状态

针对于表单标签使用
:focus 获取焦点时

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        a:link {
            text-decoration: none;/*文本修饰*/
            color:black;
        }
        /* 访问过的a不能添加背景色 */
        a:visited {
            color:red;
            /* background: orangered; */
        }
        /* 鼠标移入 */
        a:hover {
            background: #0cc;
        }
        a:active {
            color:yellowgreen;
            background: orange;
        }

        td:hover {
            background: #0cc;
        }
        td:active {
            color:red;
        }
        input:focus {
            background: #0cc;
        }
    </style>
</head>
<body>
    <!-- #表示空连接 -->
    <a href="#">跳转</a>
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <input type="text">
</body>

2.3CSS常见的样式

CSS可以设置样式,用于修饰HTML

2.3.1CSS盒子模型

所有标签都可以被看做一个盒子
盒子=margin+border+padding+content
 所有的盒子都是由外边距，边框，内边距，内容区组成

2.3.1.1margin
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 块级标签模式占一整行,被称为通栏 -->
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: #0cc;
				/* 
				margin是外边距,有上下左右四个方位
					margin-top:
					margin-left:可以直接设置的
				可以将整个盒子在页面上移动,不是改变盒子的大小
				 */
				margin-top: 100px;
				margin-left: 100px;
			}
			
			#div2 {
				width: 1124px;
				height: 90px;
				background: gray;
				/* 使用margin去完成盒子的居中效果 */
				/* margin-left: auto;
				margin-right: auto; */
				/* 
					margin:
						1个值:表示上下左右
						2个值:表示 上下 左右 
						3个值:表示 上 左右 下
						4个值:表示 上 右 下 左(顺时针的方向)
				 */
				/* margin: 10px auto; */
				/* margin: 10px auto 100px; */
				margin:10px 20px 30px 40px;
			}
			
			#div3 {
				width: 200px;
				height: 200px;
				background: #0cc;
				/* margin的垂直失效:
						margin在垂直方向上的值是合并的,而不是相加的,取的是最大值
				*/
			   margin-top: 40px;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2">
			<span>欢迎使用xxx系统</span>
		</div>
		<div id="div3"></div>
	</body>
</html>
2.3.1.2border

边框,可以改变我们盒子的大小

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: #0cc;
            margin: 100px;

            /* border
            简化写法
            border: 宽度 样式 颜色
            正常情况下是四个方位+三个属性
            */
            /* border:10px solid pink; */
            /* border-top:10px solid pink; */
            /* border-left:10px solid pink; */
            /* border-bottom:10px solid pink; */
            /* border-right:10px solid pink; */
            border-color:pink;
            border-width: 10px;
            border-style: dotted;/*边框样式是必备的属性*/
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
2.3.1.3padding

内边距,内容和border的距离

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: #0cc;
            padding:100px;
            /* 四个方位:

            1个值:上右下左
            2个值:上下 左右
            3个值:上 左右 下
            4个值:上 右 下 左*/

            /* 一个盒子的真实大小=border+padding+内容 */
            border:2px solid pink;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
2.3.1.4标签的默认的margin和padding
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 对于布局而言,默认的html的样式是不要的 */
			/* body,p,ul,li {
				margin: 0;
				padding:0;
			} */
			/* 统一设置 */
			* {
				padding:0;
				margin: 0;
			}
			a {
				text-decoration: none;
			}
			.div1 {
				width: 200px;
				height: 200px;
				background: #0cc;
			}
			
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
		<p>pppp</p>
		<ul>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ul>
	</body>
</html>
2.3.2尺寸样式

width:宽度
height:高度
html标签是没有单位的,css样式有单位可以为px

width: 200px;
height: 200px;
2.3.3边框圆角

CSS3属性,对边框的修饰,有四个方位,可是设置像素和百分比
 若像素/百分比超过对应的宽高50%就圆

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div {
            width: 200px;
            height: 200px;
            border:1px solid red;
            /* border-radius: 100px; */
            /* border-radius: 50%; */
            border-bottom-left-radius: 100px;
            border-top-right-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="div"></div>
</body>
2.3.4盒子阴影

CSS3属性

<style>
    /* div的统一设置 */
    div {
        width: 200px;
        height: 200px;
        background: #0cc;
        margin: 100px;
    }
    #div1 {
        /* 阴影 */
        /* x轴偏移量 y轴偏移量 */
        box-shadow: -10px -10px;
    }
    #div2 {
        /* 右上 */
        box-shadow: 10px -10px;
    }
    #div3 {
        /* 左下 */
        box-shadow: -10px 10px;
    }
    #div4 {
        /* 右下 */
        box-shadow: 10px 10px;
    }
    #div5 {
        /* 模糊度 */
        box-shadow: 10px 10px 10px;
    }
    #div6 {
        /* 延展度 */
        box-shadow: 10px 10px 10px 10px;
    }
    #div7 {
        /* 颜色 */
        box-shadow: 10px 10px 10px red;
    }
</style>
2.3.5背景样式
2.3.5.1背景颜色

background-color
 值:
  颜色的英文单词
  十六进制的值,#000000 白色 #ffffff 黑色 #ff0000 红色 #00ff00 绿色 #0000ff蓝色
  rgb()颜色显示,每个位置是0~255的
  rgb,a是透明度

background-color: aqua;
background-color: #55aa00;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0,.1);
2.3.5.2背景图片

background-image:url(图片路径)

background-image: url(img/3.jpg);
2.3.5.3背景平铺

background-repeat:背景平铺

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
2.3.5.4背景合并写法

background:颜色 图片 平铺

background: #0cc url(img/3.jpg) no-repeat;
2.3.5.5背景大小

background-size:CSS3属性,不能使用合并写法
 可以是px 可以是% 可以auto

<style>
div {
    width: 400px;
    height: 200px;
    border-radius: 50%;
    background: #0cc url(img/1.jpg) no-repeat;
    /* 将背景图按照比例进行缩放 */
    /* background-size: 200px 200px; */
    /*background-size: 50% 50%;/*容器的百分比*/
    background-size: cover;/*将整张图片按照容器等比例缩放,图片若太大可能会超出,最符合做头像效果*/
    /*background-size: contain;/*图片按照容器,容器会有超过,会将图片全部填充到容器中,可能会导致容器留白*/
}
</style>
2.3.6文本样式
p {
    /* 字体大小 */
    font-size: 28px;
    /* 加粗 */
    font-weight: bolder;
    /* 斜体 */
    font-style: italic;
    /* 文本修饰 */
    text-decoration: overline;
    text-decoration: underline;
    text-decoration: none;
    text-decoration: line-through;
    /* 颜色 */
    color:red;
    /* 字体 */
    font-family: '黑体';
}
2.3.7float浮动

可以移动当前的div盒子,有两种移动方式(left/right)
脱离文档输出流

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div {
            width: 200px;
            height: 200px;
            background: #0cc;
            border:1px solid red;
            /* 左浮动 */
            /* float: left; */
            float:right;
            /* 内容居中 */
            text-align: center;
        }
        #banner {
            width: 1200px;
            height: 90px;
            background: orange;
            margin: 0 auto;
        }
        #banner #div1 {
            float: left;
        }
        #banner #div2 {
            float: right;
        }
    </style>
</head>
<body>
    <!-- <div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div> -->
    <div id="banner">
        <div id="div1"><h2>欢迎使用xxx平台</h2></div>
        <div id="div2">欢迎:lhy[<a href="#">退出</a>]</div>
    </div>
</body>
2.3.8position定位

static:默认值,正常文档输出流的

absolute:绝对定位,脱离文档输出流
 相对于网页原点定位:
  没有父容器,或者父容器没有设置position:absolute/relative/fixed
 相对于父容器原点定位:
  有父容器且设置position:absolute/relative/fixed

<!--网页原点-->
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: #0cc;
            /* 相对于网页原点定位 */
            position: absolute;
            top:100px;
            left:100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <p>pppp1</p>
    <p>pppp2</p>
    <p>pppp3</p>
    <p>pppp4</p>
    <p>pppp5</p>
    <p>pppp6</p>
    <p>pppp7</p>
<!--父容器-->
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background: #0cc;
                /* 相对于网页原点定位 */
                position: absolute;
                top:100px;
                left:100px;
            }
            #div2 {
                width: 100px;
                height: 100px;
                background:orange;
                /* 相对于父容器的位置 */
                position: absolute;
                top:100px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">

            </div>
        </div>

    </body>

relative:相对定位
 正常文档输出流,在原本的位置上进行偏移

position: relative;
top: 150px;
left: 150px;

fixed:固定
 脱离文档输出流,针对视口原点

position: fixed;
bottom: 0px;
right: 0px;
2.3.9弹性盒布局

父容器设置display:flex;
子容器设置flex:数值;
 可以将父容器进行等分

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #content {
            width: 1200px;
            height: 300px;
            background: #0cc;
            margin: 0 auto;

            display: flex;
        }
        /* 所有的div统一设置 */
        #content div {
            height: 280px;
            background: orange;
            margin: 5px;
        }
        #content .div1 {
            flex: 1;
        }
        #content .div2 {
            flex: 3;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div2"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </div>
</body>

2.4变换

transform:变换
 变换形状

2.4.1平移
#div1 {
    width: 200px;
    height: 200px;
    background-color: #0cc;
    /* transform: translate(200px,200px); */
    /* 过渡 */
    transition: all 1s;
}
#div1:hover {
    /* transform: translate(200px,200px); */
    transform: translateX(200px);
    transform: translateY(200px);
}
2.4.2旋转
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: #0cc;
            margin: 100px;
            border-radius: 10px;
            /* 过渡 */
            transition: all 1s;
        }
        #div1:hover {
            transform: rotate(15deg);

            box-shadow: 0px 0px 10px gray;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
2.4.3缩放
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: #0cc;
            margin: 100px;
            border-radius: 10px;
            /* 过渡 */
            transition: all 1s;
        }
        #div1:hover {
            /* scale(x,y) x轴缩放的倍数 y轴缩放的倍数 */
            /* transform: scale(1.5,1.5); */
            transform: scale(.5,.5);

            box-shadow: 0px 0px 10px gray;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
2.4.4变换的原点
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1 {
            background-image: url(../03-CSS常见样式/img/3.jpg);
            background-size: 100%;
            width: 200px;
            height: 200px;
            background-color: #0cc;
            margin: 100px;
            border-radius: 10px;

            /* 变换的原点 */
            /* transform-origin: 0 0; */
            transform-origin: left top;

            /* 过渡 */
            transition: all .5s;
        }
        #div1:hover {

            /* transform: scale(.5,.5); */
            transform: rotate(3deg);

            box-shadow: 0px 0px 10px gray;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
2.4.5 3D旋转
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 3D旋转发生在父子容器上 */
        .div {
            width: 300px;
            height: 300px;
            background: #0cc;
            border: 1px solid red;
            margin: 100px;

            /* 在父容器上添加远近度的属性 不能为0,数值越小,视觉感觉越明显*/
            perspective: 400px;
        }

        .div img {
            /* inherit继承属性值(父子容器) */
            width: inherit;
            height: inherit;
            /* 过渡 */
            transition: all 1s;
            /* 背面不可见 */
            backface-visibility: hidden;
        }
        /* 鼠标移入到div上时,img状态发生改变 */
        .div:hover img {
            /* 按照Y轴旋转 */
            transform: rotateY(180deg);
            /* transform: rotateX(180deg); */
        }
    </style>
</head>
<body>
    <div class="div">
        <img src="img/3.jpg" alt="">
    </div>
</body>

2.5过渡

transform:过渡样式 过渡时间 过渡效果 延迟时间
 过渡样式:从一个状态到另一个状态可以使用过渡,但是从无到有不行;若所有的样式都参与过渡使用all
 过渡时间:秒为单位
 过渡动画:ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) linear(匀速)
 延迟时间:开始过渡的时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: #0cc;
				/* 所有样式同步执行 */
				/* transition: all 1s; */
				/* transition: width 1s,background 5s; */
				/* transition: all 1s linear; */
				/* transition: all 1s linear 3s; */
				/* width在2s内完成,background是延迟2s的 效果就是宽度先变化,然后背景颜色变化 */
				/* transition: width 2s,background 5s 2s; */
				transition: all 2s;
				
				position: relative;
				top: 0px;
				left: 0px;
			}
			
			#div1:hover {
				width:800px;
				background: orange;
				/* 没有默认值 */
				top:100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			helloworld
		</div>
	</body>
</html>

2.6动画

以帧为单位进行连续播放

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 自定义动画 */
        @keyframes donghua {
            /* 设置时间节点 */
            0% {
                top:0px;
                left:0px;
            }
            25% {
                top:0px;
                left:200px;
                transform: scale(1.5,1.5);
            }
            50% {
                top:200px;
                left:200px;
                background: orchid;
            }
            75% {
                top:200px;
                left:0px;
            }
            100% {
                top:0px;
                left:0px;
            }
        }

        #div1 {
            margin: 100px;
            width: 50px;
            height: 50px;
            background: #0cc;
            position: relative;
            top: 0px;
            left: 0px;
            border-radius: 50%;
            /* 动画名 完成动画的时间 过渡效果 循环动画的次数(infinite无穷) */
            animation: donghua 10s linear infinite;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
白斑马不是斑马
关注
  • 26
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb学习笔记01--HTML和CSS基础
sfwefqe的博客
12-04 787
1.B/S软件的结构 即浏览器Browser/服务器Server结构 2.前端开发流程 网页设计师根据需求设计网页–前端工程师将设计做成静态网页–后台工程师将静态网页修改成动态网页（java程序员） 3.网页的组成部分 内容（结构），表现，行为 4.HTML简介 超文本标记语言，HTML通过标签来显示网页的各个部分。 5.创建HTML文件 （1）创建一个web工程（静态工程） （2）在工程下创建HTML页面 html的代码注释 6.HTML标签介绍 (1)<标签名>封装的数据/标签名>
Javaweb最新全套项目实战视频教程-CSS课堂笔记
12-18
是否还在默默的看着学习路线图，寻找适合自己的学习资源，现在不需要如此麻烦了，动力节点全新整理Javaweb阶段全套教程已经上线，内涵网络通信、HTML、CSS、JavaScript、MySQL、JDBC、JSP、Servlet等技术，Javaweb从...
JavaWEB学习笔记 2024-1-5 --HTML
CHiN_951的博客
01-11 1061
HTML笔记
javaWeb学习笔记 --- CSS
weixin_39281866的博客
12-19 113
CSS css概述 css：层叠样式表，可以用来美化html页面，就比如html是盖房子，而css则是装修。可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力 在html页面中引入css样式的方式 通过标签上的style属性引入css样式 大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式 这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展 <div style= "border: 2px solid re
javaWeb学习笔记 --- Html
weixin_39281866的博客
12-16 296
HTML html是超文本标记语言，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片、表格、链接等。目前互联网上的绝大部分网页都是使用HTML编写的。 html的结构 <!DOCTYPE HTML> <!--文档声明--> <html> <!--标签、元素、标记--> <!--有开始和结束标签，必须结束--> <head> <!--如果标签中没有标签体，可以自闭--> <!--标签中可以有一个或者
javaWeb学习笔记 --- jQuery
weixin_39281866的博客
12-24 523
jQuery jQuery概述 什么是jQuery jQuery 是一个"写的更少，但做的更多"的轻量级 JavaScript 函数库。 jQuery的优势 可以简化JavaScript代码 可以像css那样获取元素 可以修改css来控制页面效果 可以兼容常用的浏览器 jQuery版本支持 jQuery分为很多版本，还分为未压缩版和压缩版，根据需要选择对应的版本进行下载 1.x 支持常用的浏览器和IE6+ 2.x 支持常用的浏览器和IE9+ 3.x 支持常用的浏览器和IE9+
javaWeb学习笔记 --- JavaScript
weixin_39281866的博客
12-20 519
javascript
JavaWeb学习笔记-JavaEE概述
qq_44653420的博客
12-11 741
JavaEE规范 JavaEE简介 JavaEE：Java企业版 它是由SUN公司领导、各个厂家共同制定的并得到广泛认可的工业标准。 JavaEE早期叫做J2EE，但是没有继续采用其命名规则，J2EE的版本从1.0开始到1.4结束，而JavaEE版本是从JavaEE 5版本开始，目前最新的版本是JavaEE 8 JavaEE 规范是很多Java技术的总称，这些技术都是沿用自J2EE的。一共包括了13个技术规范 包括：JDBC JNDI EJB RMI IDL/CORBA JSP XML JMS JTA J
JavaWeb学习笔记 ---- HTML
qq_36590338的博客
03-18 193
web概念概述 软件架构： 1. C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 优点：用户体验好 缺点： 开发、安装、部署、维护 麻烦 2. B/S： Browser/Server 浏览器/服务器端 只需一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序 优点：开发、安装、部署、维护 简...
JavaWeb学习笔记
yjnlovepy的博客
06-25 912
学习笔记
Javaweb最新全套项目实战视频教程-JDBC课堂笔记
12-18
是否还在默默的看着学习路线图，寻找适合自己的学习资源，现在不需要如此麻烦了，动力节点全新整理Javaweb阶段全套教程已经上线，内涵网络通信、HTML、CSS、JavaScript、MySQL、JDBC、JSP、Servlet等技术，Javaweb从...
Javaweb最新全套项目实战视频教程-MVC课堂笔记
12-18
是否还在默默的看着学习路线图，寻找适合自己的学习资源，现在不需要如此麻烦了，动力节点全新整理Javaweb阶段全套教程已经上线，内涵网络通信、HTML、CSS、JavaScript、MySQL、JDBC、JSP、Servlet等技术，Javaweb从...
Javaweb最新全套项目实战视频教程-EL课堂笔记
12-18
是否还在默默的看着学习路线图，寻找适合自己的学习资源，现在不需要如此麻烦了，动力节点全新整理Javaweb阶段全套教程已经上线，内涵网络通信、HTML、CSS、JavaScript、MySQL、JDBC、JSP、Servlet等技术，Javaweb从...
Javaweb最新全套项目实战视频教程-HTML课堂笔记
12-18
是否还在默默的看着学习路线图，寻找适合自己的学习资源，现在不需要如此麻烦了，动力节点全新整理Javaweb阶段全套教程已经上线，内涵网络通信、HTML、CSS、JavaScript、MySQL、JDBC、JSP、Servlet等技术，Javaweb从...
FME学习之旅---day27
最新发布
summer_corner的博客
05-17 195
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1096
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
微信小程序学习（第八章作业）
weixin_74181724的博客
05-13 575
留言板是一款能实现浏览留言、发表留言、删除留言和编辑留言的小程序，用户能够浏览当前的已留言内容，并且能按照时间的升序来查看最新的留言内容;能够发表自己的留言内容，在留言发表页填写相关项后即可发表，并能查看到新留言内容;能够删除不需要的留言;能够修改留言内容。因此，简单留言板的功能主要为显示留言、发表留言删除留言和编辑留言。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
javaweb学习笔记
06-10
好的，我可以和你分享一下关于javaweb学习的笔记。 1. JavaWeb的概念 JavaWeb是指利用Java语言开发Web应用程序的一种技术。它包括了Java Servlet、Java Server Pages（JSP）、JavaBean、Enterprise JavaBeans（EJB...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值