집 >웹 프론트엔드 >HTML 튜토리얼 >웹 페이지 제작을 위한 가장 실용적인 팁 요약

웹 페이지 제작을 위한 가장 실용적인 팁 요약

小云云원래의: 2017-11-30 10:16:032529검색

우리 프로그래머들이 웹 페이지를 만들 때, 물론 아주 아름다운 웹 페이지를 만들기를 바라기 때문에, 이 글에서는 웹 페이지를 만드는 데 매우 유용한 몇 가지 팁을 알려드리겠습니다.

1. 상자 크기: 특정 영역에 맞는 특정 요소를 특정 방식으로 정의할 수 있습니다.

content-box: 상자의 너비와 높이를 지정하는 것 외에도 상자에 패딩과 테두리를 추가합니다.

border-box: (텍스트 영역 및 선택의 기본값) 상자의 지정된 너비와 높이 내에서 상자에 내부 여백과 테두리를 추가합니다.

/*看个人习惯而用，但一般标签默认属性是content-box，除textarea,select*/
   box-sizing: content-box;
   -moz-box-sizing: content-box; 
   -webkit-box-sizing: content-box;

2. 입력 상자를 아름답게 꾸미세요

/*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
  /*去除点击出现轮廓颜色*/
  outline: none;
  /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/    
}

3. 텍스트 영역을 아름답게 꾸미세요

textarea{
    /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/
     /*去除点击出现轮廓颜色*/
      outline: none;    
      /*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/
      resize: none;
      /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/
}

4 자리표시자의 글꼴 색상과 크기를 변경하세요

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #333;
  
  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("小箭头图片路径") no-repeat right center transparent;
  
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
  
  /*去除点击出现轮廓颜色*/
  outline: none;
}

6. 버튼 버튼 미화

button{
    /*本身有2px的边框，一般的button都不需要边框*/
    border: none;
    /*本身有的背景色，可以用其他颜色取代*/
    background: #333;
    /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/
}

7. 라디오 버튼, 다중 선택 상자 또는 파일 업로드 버튼 미화

/*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式，这个时候要用到label标签关联，然后隐藏input标签，直接给label标签样式就好了。选中label就是选中了此标签*/
<label for="sex">男</label>
<input type="radio" id="sex" value="男" />

8. 줄임표를 사용하여 추가 텍스트 표시

white-space: nowrap; /* 强制不换行 */
overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ，需与overflow:hidden;一起使用。*/

9. CSS 페이지의 텍스트를 클릭하면 파란색으로 나타납니다. 배경색을 제거하는 방법

-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit浏览器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 早期浏览器 */
user-select: none;

10. 아이콘의 세로 위치를 조정하기 어려울 때 이 속성을 사용할 수 있습니다.

vertical-align: 30%;
vertical-align: middle;

11. 페이지에서 div 위, 아래, 왼쪽, 오른쪽

div{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
}

10 2. js

// 在js中写的返回键
onclick = &#39;history.go(-1)&#39;;
  
// 强制刷新页面
window.location.reload(true);

13. 줄 바꿈, 줄 바꿈 없음, 문자 간격

웹 페이지 제작을 위한 가장 실용적인 팁 요약

위의 13가지 웹 개발 팁은 다음과 같습니다. 매우 실용적이라고 하는데 모두에게 도움이 되기를 바랍니다.

웹 페이지 제작을 위한 가장 실용적인 팁 요약

관련 기사