요소를 중앙에 배치해야 하는 경우가 많습니다. 1. 텍스트를 수평으로 중앙에 배치합니다. 2. 그림을 수평으로 중앙에 배치합니다. 3. 블록 수준 요소를 수평으로 중앙에 배치합니다. 4. 텍스트 한 줄을 수직으로 중앙에 배치합니다. . 높이가 불확실한 텍스트 조각은 수직 중앙에 배치됩니다. 6. 높이가 결정된 블록 수준 요소는 수직 중앙에 배치됩니다. 이제 별도로 요약해 보겠습니다. (이 글은 imooc에도 게재되었지만 형식 때문에 읽기가 쉽지 않습니다.):
1. 요소를 수평으로 중앙에 배치하려면 text-align: center를 사용하세요.
<span style="color: #800000;"><div class="text-center">水平居中</div>
.text-center </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> center</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 让文本水平居中 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}
2. 이미지를 가로 중앙에 배치하고 상위 요소에 text-align: center;
를 사용합니다.<span style="color: #800000;"><div class="img-center">
<img src="/static/imghwm/default1.png" data-src="fenjing.jpg" class="lazy" alt="CSS의 요소 중심 정렬 요약">
</div>
.img-center </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> center</span>; /* 让图片水平居中 */<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}
지침:
그림은 인라인 요소입니다. 선생님께서 그림이 인라인 블록 수준 요소(inline-block)라고 말씀하신 것 같습니다. ; 중앙에 가로로 표시하고, 너비와 높이도 설정할 수 있다는 사실을 오랫동안 의심하지 않았습니다! 나중에 나는 '원점 추적'에 푹 빠졌고 그것이 사실이 아니라는 것을 깨달았습니다.
edge, chrome, firefox 및 Opera에서 img의 기본 표시 모드는 다음과 같습니다: display: inline;
예:
가장자리:
크롬:
파이어폭스:
오페라:
Img는 인라인이므로 텍스트와 마찬가지로 text-align: center를 통해 가로 가운데로 설정할 수 있습니다.
3. 블록 수준 요소를 수평으로 중앙에 배치하려면 margin-right: auto;를 사용하세요.
<span style="color: #800000;"><div class="parent-box">
<div class="child-box">块级元素水平居中</div>
</div>
.parent-box </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f98</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
margin-left</span>:<span style="color: #0000ff;"> auto</span>;<span style="color: #ff0000;">
margin-right</span>:<span style="color: #0000ff;"> auto</span>;
}
4. 텍스트 한 줄을 수직 중앙에 배치하여 줄 높이와 높이를 동일하게 만듭니다.
<span style="color: #800000;"><div class="text-middle">单行文本竖直居中</div>
.text-middle </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;
}
참고:
여기에 언급된 높이와 줄 높이는 동일합니다. 한 가지 참고 사항이 있습니다.
상자 크기 조정 시: content-box;(기본값이기도 함) box-sizing: border-box;에서 height와 line-height 값을 동일하게 설정하면 line-height 값을 padding-top, padding-bottom, border-top으로 높이에서 빼야 합니다. , border- 4개의 하단 값 은 콘텐츠에 할당된 유효 높이와 같습니다.
5. 높이가 불확실한 텍스트 조각은 여기에 적용할 수 없습니다. padding-top: ...; 같은 값.
<span style="color: #800000;"><div class="text-middle-padding">不确定高度的一段文本竖直居中</div>
.text-middle-padding </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
padding-top</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
padding-bottom</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}
설명: 특정 높이와 불확실한 텍스트 줄 수를 가진 요소의 경우 텍스트를 수직으로 가운데에 배치하는 방법은 무엇입니까? 나중에 언급하겠습니다.
6. 블록 수준 요소의 높이를 결정하려면 position:absolute;top:50%;margin-top:...(margin-top의 값은 해당 값의 절반입니다.) 자신의 키)
<span style="color: #800000;"><div class="parent-box">
<div class="child-box">确定高度的块级元素竖直居中</div>
</div>
.parent-box </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
margin-top</span>:<span style="color: #0000ff;"> -50px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}
说明：对于块儿级元素的垂直居中，推荐这么做，这也是我比较喜欢的方法。
需要注意的地方是，对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。如果只需要垂直居中，right: 0; 和 left: 0; 可以省略不写，margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;；如果只需要水平居中，top: 0; bottom: 0; 可以省略不写,margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。
8. 平移实现水平垂直居中法：通过使用 transform: translate(-50%,-50%); 添加厂商前缀 -webkit- 兼容 Safari 和 Chrome
<span style="color: #800000;"><div class="parent-box">
<div class="child-box">平移实现水平垂直居中法</div>
</div>
.parent-box </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f54</span>;<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;<span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;
}
9. 让浏览器计算子元素的宽高并让其水平垂直居中：通过使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四个方向上的值缺一不可。
<span style="color: #800000;"><div class="parent-box">
<div class="child-box">让浏览器计算子元素的宽高并让其水平垂直居中</div>
</div>
.parent-box </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f00</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
right</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
bottom</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 20%</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #f54</span>;
}
对于子元素，上下左右的定位值可以用 px 作为单位，也可以用 % 作为单位。
10. css3伸缩布局实现元素水平垂直居中，通过使用 display:flex; align-items: center; justify-content: center;
<span style="color: #800000;"><div class="parent-box">
<div class="child-box">我是子元素，这里使用了 css3 的弹性伸缩布局</div>
</div>
.parent-box </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 400px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> flex</span>;<span style="color: #ff0000;">
justify-content</span>:<span style="color: #0000ff;"> center</span>; /* 让子元素水平居中 */<span style="color: #ff0000;">
align-items</span>:<span style="color: #0000ff;"> center</span>; /* 让子元素垂直居中 */<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 1px solid #999</span>;
}<span style="color: #800000;">
.child-box </span>{<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #fe5454</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;
}
说明：
ie 10 及以上版本浏览器支持，chrome, firefox, opera, edge 均支持，不需要添加厂商前缀。
另外：这里也解释了第5点中“对于高度确定的元素，它的文本的行数不确定的情况下，怎么让文本垂直居中呢？”的问题，使用这里提到的 css3 弹性布局方式。对付元素使用 display: flex; justify-content: center; align-items: center; 来解决。
注意：
1. 如果不添加 justify-content: center; 子元素不会水平居中；
2. 如果不添加 align-items: center; 子元素会铺满父元素的高度，而不是我们希望的只有包含住文本的高度！
记忆方法：
我们知道：text-align: justify; 能将文本按照两端对其的方式对文本进行布局，这个处理的是水平方向上的问题。联想记忆，justify-content 也是处理水平方向上的事情，所以 justify-contnet: center; 就是让元素水平居中了。
扩展：
需求：我们经常做分页时，需要将分页的列表项置于水平居中的位置，就像下面的 dom 一样：
<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">«</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">»</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
解决方法：
可以为父元素 ul 添加 text-align: center; 同时给子元素 li 添加 display: inline-block;
完整的代码：
<span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">«</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">»</span><span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #800000;">ul.pagination </span>{<span style="color: #ff0000;">
margin-top</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>; /* 设置 font-size 的大小为 0，目的是让显示方式为 inline-block 的子元素去除外边距(外边距是由于 html 的空格所导致的) */
}<span style="color: #800000;">
ul.pagination li </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>; }<span style="color: #800000;">
ul.pagination li a </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 7px 14px</span>;<span style="color: #ff0000;">
border-width</span>:<span style="color: #0000ff;"> 1px 0 1px 1px</span>;<span style="color: #ff0000;">
border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
border-color</span>:<span style="color: #0000ff;"> #f1f2f3</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 15px</span>; /* 这里一定要设置 font-size，别指望去继承了，因为如果不设置，将会继承 ul 的大小 0 */<span style="color: #ff0000;">
transition</span>:<span style="color: #0000ff;"> all .3s ease 0</span>;
}<span style="color: #800000;">
ul.pagination li:first-child a </span>{<span style="color: #ff0000;">
border-top-left-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
border-bottom-left-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">
ul.pagination li:last-child a </span>{<span style="color: #ff0000;">
border-right</span>:<span style="color: #0000ff;"> 1px solid #f1f2f3</span>;<span style="color: #ff0000;">
border-top-right-radius</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
border-bottom-right-radius</span>:<span style="color: #0000ff;"> 5px</span>;
}<span style="color: #800000;">
ul.pagination li a:hover </span>{<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #fe5454</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
border-color</span>:<span style="color: #0000ff;"> #fe5454</span>;
}
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?Mar 04, 2025 pm 12:32 PM공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?Mar 17, 2025 pm 12:27 PM이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?Mar 04, 2025 pm 02:39 PM이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?Mar 17, 2025 pm 12:20 PM기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:33 PM이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; Progress & Gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:34 PM이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?Mar 12, 2025 pm 04:05 PM이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?Mar 21, 2025 pm 12:35 PM이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전ByDDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전ByDDD
뜨거운 도구
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
Dreamweaver Mac版
시각적 웹 개발 도구
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
