,它们同时具有 块元素
和 行内元素
的特点,有些资料称它们为 行内块元素
。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
默认宽度就是它本身内容的宽度(行内元素特点)
高度,行高、外边距以及内边距都可以控制(块级元素特点)
元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性 比如:想要增加链接
的触发范围。
转换为块元素:display: block;
(由于经常需要设置宽高,所以通常会将行内元素转换为块元素)
转换为行内元素:display: inline;
转换为行内块:display: inline-block;
(常用)
侧边栏案例
简洁版小米侧边栏案例
手机 电话卡
电视 盒子
笔记本 平板
出行 穿戴
智能 路由器
健康 儿童
耳机 音响
单行文字垂直居中
解决方案:让 文字的行高
等于 盒子的高度
就可以让文字在当前盒子内垂直居中。
a {
height: 40px;
line-height: 40px;
}
注意点:块级元素不会自动换行
当块级元素的宽度超过其父元素宽度时,其不会发生换行。
块级元素不会自动换行
块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素
行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素
CSS 的背景
通过 CSS 背景属性,可以给页面元素添加背景样式。 背景属性可以设置 背景颜色
、背景图片
、背景平铺
、背景图片位置
、背景图像固定
等。
背景颜色
background-color: 颜色值;
一般情况下元素背景颜色默认值是 transparent
(透明),我们也可以手动指定背景颜色为透明色。
background-color: transparent;
目前 CSS 还支持丰富的渐变色,但是某些浏览器不支持
/* 浏览器不支持时显示 */
background-color: red;
/* 线性渐变 - 从上到下(默认情况下)*/
background-image: linear-gradient(#e66465, #9198e5);
背景图片
background-image
属性描述了元素的背景图像,实际开发常用于 logo 或者一些装饰性的小图片 或者是超大的背景图片 , 优点是非常便于控制位置(精灵图也是一种运用场景)。
background-image : none | url(url)
参数值
作用
none
无背景图(默认的)
url
使用绝对或相对地址指定背景图像
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。
background-color: pink;
background-image: url(../images/logo.png);
/* 1、背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2、默认情况下,背景图片是平铺的 */
/* background-repeat: repeat; */ /* 页面元素既可以添加背景颜色也可以添加背景图片,只不过背景图片区域会覆盖背景颜色 */
背景平铺
如果需要在 HTML 页面上对背景图像进行平铺,可以使用 background-repeat
属性。
注:平铺可以简单的理解为“重复”。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值
作用
repeat
背景图像在纵向和横向上平铺(默认的)
no-repeat
背景图像不平铺
repeat-x
背景图像在横向上平铺
repeat-y
背景图像在纵向上平铺
背景图片位置
利用 background-position
属性可以改变图片在背景中的位置。
background-position: x坐标 y坐标;
参数代表的意思是:x 坐标 和 y 坐标,可以使用 方位名词
或者 精确单位
。
参数值
说明
length
百分数 \
由浮点数字和单位标识符组成的长度值
position
top \
center \
bottom \
left \
rigth 方位名词
参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
背景图像固定(背景附着)
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment
后期可以制作 视差滚动
的效果。
background-attachment : scroll | fixed
参数
作用
scroll
背景图像是随对象内容滚动的(可见区域取决于背景图像的高度)
fixed
背景图像固定
超大背景图片
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
天王盖地虎, pink老师一米五
背景复合写法
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background
中,从而节约代码量。 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为: background
: 背景颜色
背景图片地址
背景平铺
背景图像滚动
背景图片位置
background: transparent url(image.jpg) no-repeat fixed top;
这是实际开发中,我们更提倡的写法。
背景色半透明
CSS3 为我们提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3);
最后一个参数是 alpha
透明度,取值范围在 0~1
之间
习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3 新增属性,是 IE9+ 版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
背景总结
属性
作用
值
backgroud-color
背景颜色
预定义的颜色值 / 十六进制 / RGB代码
backgroud-image
背景图片
url(图片路径)
backgroud-repeat
是否平铺
repeat / no-repeat / repeat-x / repeat-y
backgroud-position
背景位置
length / position 分别是 x 和 y 坐标
backgroud-attachment
背景附着
scroll(背景滚动)/ fixed(背景固定)
背景简写
书写更简单
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明
背景颜色半透明
background: rgba(0, 0, 0, 0.3); 后面必须是4个值
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)。
CSS三大特性
CSS 有三个非常重要的特性:层叠性
、继承性
、优先级
。
层叠性
给同一个选择器设置相同的样式,此时一个样式就会覆盖 (层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题 。
层叠性原则:
样式冲突,遵循的原则是 就近原则
,哪个样式距离结构近,就执行哪个样式
样式不冲突,不会层叠
注:就近的标准是:后 > 前
div {
color: red;
}
div {
color: pink; /* 有效 */
}
继承性
现实中的继承:我们继承了父亲的姓。
CSS 中的继承:子标签会继承父标签的某些样式 ,如:文本颜色和字号,简单的理解就是:子承父业。
恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
子元素可以继承父元素的样式( text-
、font-
、line-
、color
) 文本、字体、段落、颜色
CSS三大特性之继承性
行高的继承
body {
font: 12px/1.5 'Microsoft YaHei';
}
行高可以跟单位也可以不跟单位
如果子元素没有设置行高,则会继承父元素的行高为 1.5
此时子元素的行高是:当前元素 的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高
CSS三大特性之继承性——行高的继承
周吉瑞
JERRY
优先级
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
选择器权重如下表所示:
规则: 比较位级别,位级别相同时比较位大小。
选择器
选择器权重
继承 或 *
0,0,0,0
元素选择器
0,0,0,1
类选择器、伪类选择器
0,0,1,0
ID 选择器
0,1,0,0
行内样式 style=""
1,0,0,0
!important 重要的
∞
无穷大
CSS三大特性之优先级
你笑起来真好看
你笑起来真好看
你笑起来真好看
优先级注意问题:
权重是由 4 组数字组成的,但是不会有进位!
可以理解为:类选择器
永远大于 元素选择器
,ID 选择器
永远大于 类选择器
,以此类推!
等级判断 从左到右
,如果某一位数值相同,则判断下一位数值
可以简单的记忆:通配符
和 继承
权重为 0,标签选择器
为 1,类
(伪类
)选择器为 10,ID
选择器为 100,行内样式表
为 1000,!important
无穷大
继承的权重是 0,不管父元素权重多高,子元素得到的权重都是 0 !
a
链接浏览器默认指定了一个样式,所以它不参与继承,所以设置样式需要选中单独设置
CSS三大特性之优先级——注意问题
我是单独的样式
权重的叠加:
如果是复合选择器,则会有权重叠加,需要计算权重。
注意:再次强调!权重虽然会叠加,但一定不会进位!(1万个元素选择器也比不过一个类选择器)。
从左到右逐位比较,只有左一位同样大,才比较右边一位!
例如:
div ul li
——> 0,0,0,3
.nav ul li
——> 0,0,1,2
a:hover
——> 0,0,1,1
.nav a
——> 0,0,1,1
如果要对某一元素设置样式,那么就必须给它足够高的权重(注意:是给他,而不是他的父亲!)。
提高选择器权重的技巧之一:多写几层类选择器
CSS三大特性之优先级——权重叠加
CSS盒子模型
页面布局要学习三大核心 :盒子模型 、浮动 和定位 。
网页布局的核心 本质: 就是利用 CSS 摆盒子!
盒子模型(Box Model)
所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 。 CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框
、外边距
、内边距
、和 内容
。
边框(border)
border
可以设置元素的边框。
边框有三部分组成:边框宽度(粗细)
、边框样式
、边框颜色
。
语法:
border: border-width || border-style || border-color
属性
作用
border-width
定义边框粗细,单位是 px
border-style
边框的样式
border-color
边框颜色
边框样式 border-style 可以设置如下值:
none
:没有边框,即忽略所有边框的宽度(默认值)
solid
:边框为单实线(最为常用的)
dashed
:边框为虚线
dotted
:边框为点线
边框简写:
border: 1px solid red; /* 没有顺序 */
边框分开写法:
border-top: 1px solid red; /* 只设定上边框,其余同理 */
表格的细线边框
表格中两个单元格相邻的边框会重叠在一起,呈现出加粗的效果。
border-collapse
属性控制浏览器绘制表格边框的方式。
语法:
border-collapse: collapse;
collapse
单词是合并的意思
border-collapse: collapse;
表示相邻边框合并在一起
table,
td,
th {
border: 1px solid black;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
边框会影响盒子实际大小
边框会额外增加盒子的实际区域大小。盒子实际区域大小 = 内容区大小 + 内边距大小 + 边框大小 + 外边距大小。
解决方案:
测量盒子大小的时候,不量边框
如果测量的时候包含了边框,则需要 width、height 减去边框宽度(注意减单边还是双边)
边框会影响盒子的实际大小
内边距(padding)
padding 属性用于设置内边距 ,即边框与内容之间的距离 。
如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子区域!
属性
作用
padding-left
左内边距
padding-rigth
右内边距
padding-top
上内边距
padding-bottom
下内边距
padding 属性(简写属性)可以有一到四个值。
值的个数
表达意思
padding: 5px;
1 个值,代表上下左右都有 5 像素内边距
padding: 5px 10px;
2 个值,代表上下内边距是 5 像素,左右内边距是 10 像素
padding: 5px 10px 20px;
3 个值,代码上内边距 5 像素,左右内边距 10 像素,下内边距 20 像素
padding: 5px 10px 20px 30px;
4 个值,上是 5 像素,右 10 像素,下 20 像素,左是 30 像素(顺时针)
如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子区域!
解决方案:
如果保证盒子跟效果图大小保持一致,则让 width、height 减去多出来的内边距大小即可
如果盒子本身没有指定 width、height 属性,则此时 padding 不会撑开盒子区域大小
padding 撑大盒子
使用技巧
新浪导航案例-padding影响盒子的好处
外边距(margin)
margin
属性用于设置外边距 ,即控制盒子和盒子之间的距离 。
属性
作用
margin-left
左外边距
margin-right
右外边距
margin-top
上外边距
margin-bottom
下外边距
margin
简写方式代表的意义跟 padding
完全一致。
外边距典型应用:
外边距可以让块级盒子水平居中 ,但是必须满足两个条件:
盒子必须指定了宽度 width
盒子左右的外边距都设置为 auto
.header { width: 960px; margin: 0 auto;}
常见的写法,以下三种都可以:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align: center
即可。
案例:
盒子模型之外边距margin
1
2
块级盒子水平居中对齐
行内元素、行内块元素水平居中对齐
外边距合并
使用 margin
定义块元素的垂直外边距时,可能会出现外边距的合并。
注意:内边距没有合并一说!浮动的盒子不会发生外边距合并!
主要有两种情况:
相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom
,下面的元素有上外边距 margin-top
,则他们之间的垂直间距不是 margin-bottom
与 margin-top
之和。而是取两个值中的较大者 ,这种现象被称为相邻块元素垂直外边距的合并(准确的描述应该是:大的外边距覆盖小的 )。
解决方案: 尽量只给一个盒子添加 margin
值。
相邻块元素垂直外边距的合并
one
two
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,当子元素有上外边距,此时父元素会塌陷较大的外边距值(外边距效果显示在父元素之上 )。
解决方案:
可以为父元素定义上边框(比如:可以给一个透明 transparent 边框)
可以为父元素定义上内边距
可以为父元素添加 overflow: hidden
其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题
案例:
外边距合并-嵌套块级元素垂直外边距塌陷
外边距合并-嵌套块级元素垂直外边距塌陷
注意:外边距的合并在利用盒子布局页面的时候是经常发生的!
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(某些时候,行内元素对上下内外边距不生效)。但是转换为块级和行内块元素就可以了。
案例
综合案例-MI产品模块
快递牛,整体不错蓝牙可以说秒连。红米给力
来自于 117384232 的评价
综合案例-快报模板
总结
a、布局为啥用不同盒子,我只想用 div?
标签都是有语义的,合理的地方用合理的标签。比如产品标题就用 h
,大量文字段落就用 p
。
b、为啥用辣么多类名?
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也更方便。
c、到底用 margin 还是 padding?
大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。
一般来说,盒子与盒子之间统一用 margin,内容与边框之间用 padding。
d、自己做没有思路?
布局有很多种实现方式,可以开始先模仿大牛的写法,然后再做出自己的风格。
最后一定多运用辅助工具,比如屏幕画笔,PS 等等。
边框和阴影
圆角边框
CSS 3 新增了圆角边框样式。border-radius 属性用于设置元素的外边框圆角。
圆角边框
注意:
参数值可以为数值或百分比的形式
该属性是一个简写属性,可以跟多个值
四个值:左上角、右上角、右下角、左下角(从左上开始顺时针)
三个值:左上、右上+左下、右下(对角为一组)
两个值:左上+右下、右上+左下(对角为一组)
同时可以对特定角单独设置
左上角:border-top-left-radius
右上角:border-top-right-radius
右下角:border-bottom-right-radius
左下角:border-bottom-left-radius
案例:
圆角边框常用写法
1. 圆形的做法:
2. 圆角矩形的做法:
3. 可以设置不同的圆角:
## 盒子阴影
CSS 3 新增了盒子阴影。box-shadow 属性用于为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
值
描述
h-shadow
必须。水平阴影的位置,允许负值。
v-shadow
必须。垂直阴影的位置,允许负值。
blur
可选。模糊距离(虚实程度)。
spread
可选。阴影的尺寸(大小)。
color
可选。阴影的颜色,请参阅 CSS 颜色值(阴影多为半透明颜色)。
inset
可选。将外部阴影(outset)改为内部阴影(outset 不能指定,默认为空即可)。
盒子阴影
三边阴影、双边阴影、单边阴影
盒子阴影 三边阴影、双边阴影、单边阴影
四边阴影
三边阴影
一边阴影
文字阴影
CSS 3 新增了文字阴影。text-shadow 属性用于为文本添加阴影。
语法:
text-shadow: h-shadow v-shadow blur color;
值
描述
h-shadow
必须。水平阴影的位置。允许负值。
v-shadow
必须。垂直阴影的位置。允许负值。
blur
可选。模糊的距离(虚实程度)。
color
可选。阴影的颜色。参阅 CSS 颜色值。
文字阴影
你是阴影,我是火影
参考
黑马程序员pink老师前端入门教程
HTML CSS
你可能感兴趣的:(css前端)
JavaScript窗口大小变化事件:window.resize
星际编程喵
探索Spring的奇妙世界 javascript 前端 html vue.js react.js 前端框架 html5
1.前言在Web开发中,JavaScript是一种强大的脚本语言,它可以与HTML和CSS一起使用,为用户提供交互性和动态性的体验。其中,window.addEventListener("resize")事件是一个常用的事件之一,用于在浏览器窗口大小发生变化时触发相应的操作。本文将深入介绍这个事件的相关内容。2.简介window.resize事件是浏览器提供的一种事件,用于监听窗口大小的改变。这意
解决Java使用SSE乱码问题
四季夏目天下第一
java 开发语言
我在使用Java中的SSE时出现下面这种情况:这是因为SSE返回给前端的默认编码格式为ISO_8859_1为了避免此类问题的出现,可以修改SSE的默认编码格式为UTF-8@Slf4jpublicclassSseEmitterUTF8extendsSseEmitter{ @Override protectedvoidextendResponse(ServerHttpResponseoutputM
【Vite】前端构建工具详解
Peter-Lu
# Vite 前端 javascript npm node.js webpack
文章目录一、构建工具概述1.什么是构建工具?2.常见的构建工具二、Vite的优势1.极速的开发服务器2.极速的冷启动3.高效的HMR(热模块替换)4.生产环境中的优化三、Vite的基本用法1.安装Vite2.项目结构3.启动开发服务器4.构建生产版本四、Vite的核心概念1.按需加载2.ESBuild3.Rollup打包五、Vite的扩展与定制1.插件系统2.环境变量六、Vite的应用场景1.适合
Web前端面试题(持续更新中)
Bearin
前端 web
一、闭包是什么JS中内层函数可以访问外层函数的变量,使内部私有变量不受外界干扰,起到保护和保存的作用,我们把这个特性称作闭包。好处:1.隔离作用域,保护私有变量;有了闭包才有局部变量,要不然都是全局变量了。2.让我们可以使用回调,操作其他函数内部;3.变量长期驻扎在内存中,不会被内存回收机制回收,即延长变量的生命周期;坏处:内层函数引用外层函数变量,内层函数占用内存。如果不释放内存,过多时,易引起
2024年最新入门基于Node的Web框架——Koa(2),2024年最新前端开发面试题及答案
2301_82243626
程序员 前端 面试 学习
最后文章到这里就结束了,如果觉得对你有帮助可以点个赞哦开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},“querystring”:“search=koa&keyword=context”}responseresponse对象是用于设置一些响应信息给客户端,这些和http请求的响应字段是一样的。比如说可以设置状态码、响应格式等相关信息。app.use(async(c
前端构建工具
arguments_zd
杂谈 前端 前端框架
一、什么是前端构建工具?前端构建工具就是在项目开发及编译阶段帮助我们完成那些需要反复重复的任务,比如代码压缩、编译等工作,构建工具能够大大提高我们的开发效率。常用构建工具:grunt(JavaScript世界的构建工具)、gulp(用自动化构建工具增强你的工作流程)、webpack(专注于构建模块化项目)、yeoman(强健的工具,库,及工作流程的组合)二、为什么需要构建工具?模块规范化产生,不同
前端vue引入特殊字体不生效
昵称不能为空吧
vue.js 前端 javascript
引入特殊字体ttf,TTF等发现开发环境中生效,项目部署后不生效何解?1.本地生效的原因本地使用的是本地的资源,控制台可以看到对ttf文件的请求与加载。2.部署后不生效的原因与解决控制台可以看到对ttf资源文件的请求加载失败,code可能是200不代表返回成功了哦,注意仔细看响应(1)检查引用的文件名是否大小写正确。比如文件后缀ttf和TTF(2)检查项目是用什么构建的①vite:默认情况下,使用
js考核第三题
2401_88560642
javascript 前端 java
题三:随机点名要求:分为上下两个部分,上方为显示区域,下方为控制区域。显示区域显示五十位群成员的学号和姓名,控制区域由开始和结束两个按钮组成。点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的学号和姓名。html部分开始结束css部分body{margin:0;padding:0;display:flex;flex-direction:column;height
npm, yarn, pnpm之间的区别
夕阳_醉了
npm 前端 node.js yarn
前言在现代化的开发中,一个人可能同时开发多个项目,安装的项目越来越多,所随之安装的依赖包也越来越臃肿,而且有时候所安装的速度也很慢,甚至会安装失败。因此我们就需要去了解一下,我们的包管理器,在前端比较主流的包管理器主要有三个(当然还有其他优秀的包管理器,本文主要介绍这三个),分别是:npm,yarn,pnpm幽灵嵌套(PhantomDependency)在了解包管理器之前,我们先了解一下包管理的一
网页设计与制作成品——蛋糕甜品店铺(HTML+CSS+JavaScript)
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript HTML学生个人网页设计 课程设计 网页设计与制作成品
静态网站的编写主要是用HTMLDIV+CSSJS等来完成页面的排版设计,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。精彩专栏推荐❤
【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)
二挡起步
web前端期末大作业 web设计网页规划与设计 html html5 css 课程设计 HTML学生个人网页设计 javascript 网页设计作业
文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、网站题目学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计,采用DIV+C
✨《微前端落地实战:qiankun从入门到精通!3小时搞定Vue+React多应用架构》
庸俗今天不摸鱼
前端 vue.js react.js 学习 前端框架
微前端落地实践指南(qiankun框架)微前端核心架构图graphTDA[主应用]-->B[vue子应用]A-->C[react子应用]A-->D[angular子应用]B-->E{通信机制}C-->ED-->E主应用配置详解1.主应用注册流程//main.jsimport{registerMicroApps,start}from'qiankun';constapps=[{name:'vueApp
HTML+CSS+JSP的不同注释
宁酱醇
JSP基础(尚学堂_笔记) html css javascript 前端
1.HTML注释2.CSS注释/**/3.JSP注释1)单行://2)多行:/**/4.打印1)1.1页面打印:CSSh3{font-size:30px;color:red;}被css控制显示在界面上1.2主页打印:JSdocument.write("显示在主界面")2)控制台打印:JS里varnum=10;console.log(num);3)弹窗打印:JSalert("弹窗");5.注释快捷键
localStorage实现本地信息存储
半旧夜夏
前端 javascript
基于HTML,CSS,JS代码,利用localStorage本地存储实现学生信息添加的综合小案列效果图:本地存储格式:HTML代码:学生信息管理新增学员姓名:年龄:性别:男女薪资:就业城市:北京上海广州深圳曹县录入学生就业统计表共有数据0条学号姓名年龄性别薪资就业城市录入时间操作CSS代码:*{/*外边距*/margin:0;/*内边距*/padding:0;}h1{/*使元素内的文本居中对齐*/
本地生活服务平台(源码+文档+部署+讲解)
亥时科技
生活 源代码管理 数据库 java 开源
引言随着城市化进程的加速,本地生活服务的需求日益多样化和个性化。本地生活服务平台通过数字化手段,为社区居民提供了一个全面、便捷的服务体验,从而提升社区服务体验和生活质量。系统概述本地生活服务平台采用前后端分离的架构设计,服务端基于MySQL5.7+、JDK1.8+和Redis,前端则采用VUE2.6.14和element-ui2.15.6,并在NODE14.21.3(>=8.9)环境下运行,NPM
React Hooks 与 Vue Composition API 的区别
阿珊和她的猫
react.js vue.js 前端
前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录1.设计哲学ReactHooksVueCompositionAPI2.使用方式ReactHoo
SSE实现消息实时推送,前端渐进式学习、实践,真香
code_源源
人工智能 前端 人工智能
一、SSE概念SSE(ServerSentEvent),直译为服务器发送事件,顾名思义,也就是客户端可以获取到服务器发送的事件。我们常见的http交互方式是客户端发起请求,服务端响应,然后一次请求完毕;但是在sse的场景下,客户端发起请求,连接一直保持,服务端有数据就可以返回数据给客户端,这个返回可以是多次间隔的方式二、SSE应用场景在web端消息推送功能中,由于传统的HTTP协议是由客户端主动发
京东(京喜)前端自动化测试之路
程序员张无忌
软件测试 程序员 软件测试 python java js web
前言京喜(原京东拼购)项目,作为京东战略级业务,拥有千万级别的流量入口。为了保障线上业务的稳定运行,每月例行开展前端容灾演习,主要包含小程序及H5版本,要求各页面各模块在异常情况下进行适当的降级处理,不能出现空窗、样式错乱、不合理的错误提示等体验问题。原来的容灾演习过程:小程序(通信方式改成Https)和H5通过Whistle对接口返回进行修改来模拟异常情况,验证各页面各模块的降级处理符合预期。容
在springboot加vue项目中加入图形验证码
小山曲奇
spring boot vue.js 后端
后端首先先要创建一个CaptchaController的类,可以在下面的代码中看到在getCaptcha的方法里面写好了生成随机的4位小写字母或数字的验证码,然后通过BufferedImage类变为图片,顺便加上了干扰线。之后把图片转为Base64编码方便传给前端为了安全我写了encrypt方法把4位验证码加密了一下,和图片放在了Mapli传给了前端,后面的verifyCaptcha是对前端输入的
一款好看的UI美化赞赏单页HTML源码
CSDN专家-微编程
HTML项目 ui html 前端
源码介绍一款好看的UI美化赞赏单页HTML源码,可以当成组件放到网站项目里,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果效果预览源码获取一款好看的UI美化赞赏单页HTML源码
Amaze UI web mobile 前端框架
iteye_20240
ui 前端框架 移动开发
目录结构index.html-空白HTML模板;blog.html-博客页面模板(预览);landing.html-LandingPage模板(预览);login.html-登录界面模板(预览);sidebar.html-带边栏的文章模板(预览);在app.css中编写CSS;在app.js中编写JavaScript;移动端首选Zepto,桌面端选jQuery,这应该是大多数开发者的共识。那对于跨
腾讯26届实习生招聘火热开启~可内推
飞300
算法 业界资讯 javascript php
腾讯2025实习基地专项启动啦!报名自即日起至2月25日面向毕业时间在2025年9月1日-2026年12月31日期间在校大学生求职辅导、简历直推、专场面试⭐7大岗位,提前投、优先面、简历直推、快人一步⭐软件开发-后台开发方向软件开发-移动客户端开发方向软件开发-PC客户端开发方向软件开发-游戏客户端开发方向软件开发-前端开发方向软件开发-测试开发方向技术运营简历内推链接:https://join.
Java中Long类型处理精度丢失问题
原冰洋
java bug
Long类型处理精度丢失问题描述后端给前端传一个long类型的数据,如果数据过大,前端js接收就会精度丢失,如果再传过来给后端,后端接收到的数据也是精度丢失的数据解决方案只需要将后端从传给前端的long类型的数据变成string类型就好了。1.提供对象转换器jacksonObjectMapper,基于jackson进行java对象到json数据的转换2.在webMvcConfig配置类中扩展Spr
后端Long类型19位返回前端丢失精度问题
19940719
JAVA
后端Long类型19位返回前端丢失精度问题问题原因:由于Long类型最大19位而JavaScript最大接收数字为16位,固存在精度丢失问题解决方案1.导入Maven依赖com.fasterxml.jackson.corejackson
按钮的“禁用”样式
wangbinXMU
前端 DOM css
有时由于需要,需要将自己写的按钮禁用如:保存css:.save{display:block;width:50px;height:50px;line-height:50px;border-radius:100%;background:blue;color:#fff;text-align:center;}显示为:要是input和button做的按钮,当然采用disabled属性即可解决;要是自定义的按
a标签(普通标签如span)没有disabled属性 ,怎样利用js实现该属性
weixin_30252709
前端 javascript ViewUI
a标签以及其她普通标签没有disabled属性,要想实现类似input框属性disabled可以通过css样式设置pointer-events的值来设定:aonclickdisabledaAlertspanAlert$(document).ready(function(){$('.page-next').click(function(e){e.preventDefault();alert('aaa
go 语言设置 商城首页
Go的神秘男朋友
golang 开发语言 后端
1:前端传递的数据结构:{"page_type":10,"page_name":"商城首页","page_data":{"page":{"params":{"name":"商城首页","title":"萤火商城2.0","shareTitle":"分享标题"},"style":{"titleTextColor":"black","titleBackgroundColor":"#ffffff"},"
Long类型数据传到前端精度丢失问题
山风岚岚丶
debug
Long类型数据传到前端精度丢失问题原因JS内置有32位整数,而number类型的安全整数是53位。如果超过53位,则精度会丢失。正如现在后台传来一个64位的Long型整数,因为超过了53位,所以后端返回的值和前端获取的值会不一样。出现场景网上有很多改序列化方式让Long类型数据变成String类型的方法,试了都没什么用,后来仔细看了下发现,即视不加这些序列化方法,常规的后端Long类型数据传到前
react-contexify的右键菜单属性disabled不起作用
qq_35769971
源码问题修复 reactjs
目录react-contexify的右键菜单属性disabled不起作用代码展示问题原因解决方案react-contexify的右键菜单属性disabled不起作用使用场景:使用react做前端项目时,有一个需求是根据table的行数据不同,点击鼠标右键展示不同的菜单,但是真实情况是,只有第一次渲染的时候会根据代码逻辑渲染,之后点击鼠标右键,出来的菜单始终和第一次相同,除非先点击鼠标左键,再点击右
web第二次作业
mbx0715
tensorflow 人工智能 python
一、小鹅通首页开发二、代码:index.html:小鹅通-首页style.css:*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;font-family:"微软雅黑";font-size:16px;}index.css:.bg{width:100%;}.header{background-im
Nginx负载均衡
510888780
nginx 应用服务器
Nginx负载均衡一些基础知识:
nginx 的 upstream目前支持 4 种方式的分配
1)、轮询(默认)
每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除。
2)、weight
指定轮询几率,weight和访问比率成正比
RedHat 6.4 安装 rabbitmq
bylijinnan
erlang rabbitmq redhat
在 linux 下安装软件就是折腾,首先是测试机不能上外网要找运维开通,开通后发现测试机的 yum 不能使用于是又要配置 yum 源,最后安装 rabbitmq 时也尝试了两种方法最后才安装成功
机器版本:
[root@redhat1 rabbitmq]# lsb_release
LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类
eksliang
FilenameUtils common-io
转载请出自出处:http://eksliang.iteye.com/blog/2217081 一、概述
这是一个Java操作文件的常用库,是Apache对java的IO包的封装,这里面有两个非常核心的类FilenameUtils跟FileUtils,其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装,开发中对文件的操作,几乎都可以在这个框架里面找到。 非常的好用。
xml文件解析SAX
不懂事的小屁孩
xml
xml文件解析:xml文件解析有四种方式,
1.DOM生成和解析XML文档(SAX是基于事件流的解析)
2.SAX生成和解析XML文档(基于XML文档树结构的解析)
3.DOM4J生成和解析XML文档
4.JDOM生成和解析XML
本文章用第一种方法进行解析,使用android常用的DefaultHandler
import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区,此处是按日分区
酷的飞上天空
mysql
使用python脚本作为命令脚本,linux的定时任务来每天定时执行
#!/usr/bin/python
# -*- coding: utf8 -*-
import pymysql
import datetime
import calendar
#要分区的表
table_name = 'my_table'
#连接数据库的信息
host,user,passwd,db =
如何搭建数据湖架构?听听专家的意见
蓝儿唯美
架构
Edo Interactive在几年前遇到一个大问题:公司使用交易数据来帮助零售商和餐馆进行个性化促销,但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据
“我们要花费27小时来处理每日的数据量,”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道:“所以在2013年,我们放弃了现有的基于PostgreSQL的关系型数据库系统,使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入
a-john
spring
控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心。 控制反转一般分为两种类型,依赖注入(Dependency Injection,简称DI)和依赖查找(Dependency Lookup)。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法
aijuans
xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下:
set pages 50000;
set lines 200;
set trims on;
set heading off;
spool /oracle_backup/log/test/dept.lst;
select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP)
asia007
学习基础知识
OOA:Object-Oriented Analysis(面向对象分析方法)
是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上,针对OO方法所需要的素材进行的归类分析和整理,而不是对管理业务现状和方法的分析。
OOA(面向对象的分析)模型由5个层次(主题层、对象类层、结构层、属性层和服务层)
浅谈java转成json编码格式技术
百合不是茶
json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言
在java中需要引入json相关的包,引包方式在工程的lib下就可以了
JSON与JAVA数据的转换(JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非
常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis)
bijian1013
java web.xml SSI spring配置
指定Spring配置文件位置
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml,
/WEB-INF/
Installing SonarQube(Fail to download libraries from server)
sunjing
Install Sonar
1. Download and unzip the SonarQube distribution
2. Starting the Web Server
The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查
bit1129
mongodb
一、创建复本集
假设mongod,mongo已经配置在系统路径变量上,启动三个命令行窗口,分别执行如下命令:
mongod --port 27017 --dbpath data1 --replSet rs0
mongod --port 27018 --dbpath data2 --replSet rs0
mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染
白糖_
Flash
今天介绍Anychart的Flash和HTML5渲染功能
HTML5
Anychart从6.0第一个版本起,已经逐渐开始支持各种图的HTML5渲染效果了,也就是说即使你没有安装Flash插件,只要浏览器支持HTML5,也能看到Anychart的图形(不过这些是需要做一些配置的)。
这里要提醒下大家,Anychart6.0版本对HTML5的支持还不算很成熟,目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa
bozch
laravel
昨天在为了把laravel升级到最新的版本,突然之间就出现了如下错误:
ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜
bylijinnan
编程之美
import java.util.Arrays;
import java.util.Random;
public class Nim {
/**编程之美 NIM游戏分析
问题:
有N块石头和两个玩家A和B,玩家A先将石头随机分成若干堆,然后按照BABA...的顺序不断轮流取石头,
能将剩下的石头一次取光的玩家获胜,每次取石头时,每个玩家只能从若干堆石头中任选一堆,
lunce创建索引及简单查询
chengxuyuancsdn
查询 创建索引 lunce
import java.io.File;
import java.io.IOException;
import org.apache.lucene.analysis.Analyzer;
import org.apache.lucene.analysis.standard.StandardAnalyzer;
import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术
comsci
it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....
所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询
daizj
oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个:
(1)其正常工作不但需要利用撤销数据,还需要事先启用最小补充日志。
(2)返回的结果不是以前的“旧”数据,而是能够将当前数据修改为以前的样子的撤销SQL(Undo SQL)语句。
(3)集中地在名为flashback_transaction_query表上查询,而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件
游其是你
FilenameFilter
这是一个FilenameFilter类用法的例子,实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数,函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题
dcj3sjt126com
c
# include <stdio.h>
int f(void) //括号中的void表示该函数不能接受数据,int表示返回的类型为int类型
{
return 10; //向主调函数返回10
}
void g(void) //函数名前面的void表示该函数没有返回值
{
//return 10; //error 与第8行行首的void相矛盾
}
in
今天在测试环境使用yum安装,遇到一个问题: Error: Cannot retrieve metalink for repository: epel. Pl
dcj3sjt126com
centos
今天在测试环境使用yum安装,遇到一个问题:
Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again
处理很简单,修改文件“/etc/yum.repos.d/epel.repo”, 将baseurl的注释取消, mirrorlist注释掉。即可。
&n
单例模式
shuizhaosi888
单例模式
单例模式 懒汉式
public class RunMain {
/**
* 私有构造
*/
private RunMain() {
}
/**
* 内部类,用于占位,只有
*/
private static class SingletonRunMain {
priv
Spring Security(09)——Filter
234390216
Spring Security
Filter
目录
1.1 Filter顺序
1.2 添加Filter到FilterChain
1.3 DelegatingFilterProxy
1.4 FilterChainProxy
1.5
公司项目NODEJS实践0.1
逐行分析JS源代码
mongodb nginx ubuntu nodejs
一、前言
前端如何独立用nodeJs实现一个简单的注册、登录功能,是不是只用nodejs+sql就可以了?其实是可以实现,但离实际应用还有距离,那要怎么做才是实际可用的。
网上有很多nod
java.lang.Math
liuhaibo_ljf
java Math lang
System.out.println(Math.PI);
System.out.println(Math.abs(1.2));
System.out.println(Math.abs(1.2));
System.out.println(Math.abs(1));
System.out.println(Math.abs(111111111));
System.out.println(Mat
linux下时间同步
nonobaba
ntp
今天在linux下做hbase集群的时候,发现hmaster启动成功了,但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing,查看了日志,大致意思是说master和slave时间不同步,没办法,只好找一种手动同步一下,后来发现一共部署了10来台机器,手动同步偏差又比较大,所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署
roadrunners
zookeeper 集群 部署
ZooKeeper是Apache的一个开源项目,在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。
1、准备工作
我们准备3台机器做ZooKeeper集群,分别在3台机器上创建ZooKeeper需要的目录。
数据存储目录
Java高效读取大文件
tomcat_oracle
java
读取文件行的标准方式是在内存中读取,Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法: Files.readLines(new File(path), Charsets.UTF_8); FileUtils.readLines(new File(path)); 这种方法带来的问题是文件的所有行都被存放在内存中,当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法
xu3508620
xml map 微信api
举例如下:
<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
<appid><