Html应该注意的细节学习

最新推荐文章于 2025-11-08 17:58:58 发布

转载最新推荐文章于 2025-11-08 17:58:58 发布 · 149 阅读

CC 4.0 BY-SA版权

原文链接：http://www.ijianweb.com/home/Article/view.html?aid=841&admin_id=2

本文介绍了HTML页面布局的一些实用技巧，包括如何防止盒子内容透出、内联元素的垂直对齐、按钮高度设置以及内容超出处理。此外，还讲解了创建竖线分隔符、添加小三角形的方法，以及二级导航和2D转换的应用。通过这些技巧，可以提升网页设计的精细度和用户体验。

html技巧
1.防止盒子透出的解决办法
overflow：hidden；float不为none；display：inline-block；
position不为static&relative
  给父类加一个border-top：1px solid transparernt；

2.内联块的vertical-align是基于父元素的中线位置
在一个div内有一个span一个input则不对齐
给input设置vertical-align：top；则对齐；

3.button高度设置的是总高度border默认2px；
如果height设置45px；则内容高度为41px；border一共4px
如果要总高度都为45px
那么input高度hight设置43px border 1px solid gray
button则设置height设置45px

4.内容超出覆盖div底边框
.text-line{
   height: 0.5em;text-align: center;
   border-bottom: 1px solid red;}
.text-line>a{margin:0 10px;padding:0 10px;
   background-color: white;}

5.如何在文字之间加一个丨例如：登录丨注册
原理给注册一个border-left:1px solid gary;padding-left:1em;
div>span{border-left:2px solid grey;
      padding-left: 1em; margin-left: -16px;}
<div>
<span>注册</span>
</div>

6.如何加一个小三角形
原理只有border并且所需要的border显示颜色
position: absolute;
content:"";top: 50%;right: -1em;
border:5px solid transparent;
border-top-color: red;

7.二级导航
要用到定位

8.2D转换
  默认情况下所有元素都是以自己的中心点作为参考
来旋转的，我们可以通过形变中心点属性来修改它的
参考点 transform-origin：具体像素/百分比
     第一个参数：水平方向
     第二个参数：垂直方向
   transform-origin:0px 0px；左上角为中心点
   transform-origin：left top；左上角

9.翻转菜单
.two_nav{position:absolute;
width: 6em;left: -10px;}
.two_nav>li{background-color: black;
transform: rotateY(180deg);
transition: all 0.5s;
opacity: 0;}
.triangle:hover .two_nav>li{
transform:none;
opacity: 1;}
.triangle:hover .two_nav>li:nth-child(1){
transition-delay: 200ms;}
.triangle:hover .two_nav>li:nth-child(2){
transition-delay: 300ms;}
.triangle:hover .two_nav>li:nth-child(3){
transition-delay: 400ms}
.triangle:hover .two_nav>li:nth-child(4){
transition-delay: 500ms;}
.triangle .two_nav>li:nth-child(4){
transition-delay: 200ms;}
.triangle .two_nav>li:nth-child(3){
transition-delay: 300ms;}
.triangle .two_nav>li:nth-child(2){
transition-delay: 400ms;}
.triangle .two_nav>li:nth-child(1){
transition-delay: 500ms;}

<span>
<a href="#">游戏中心</a>
<ul>
      <li>直播</li>
      <li>拜年祭</li>
      <li>游戏中心</li>
      <li>玩家中心</li>

达子建站。