JS 개발 확인서 튜토리얼 스타일(2)

이전 섹션의 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .pwd{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;}
        .txt{width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;}
        .sub{width:100px;height:30px;padding-left:0px;}

        .sub:hover{background:#ffaad5;}
        .div{width:200px;height:30px;margin:0 auto;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;
            border:1px solid red;}
    </style>
    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

먼저 입력 상자의 기본 스타일을 제거하겠습니다.

개요 속성

전체 코드는 다음과 같습니다.

input{outline:none;}

입력에 커서를 놓았을 때 상자 내부에서는 너무 왼쪽으로 멀어져 보기 좋지 않으므로 일반적으로 커서 위치를 왼쪽에서 일정 거리 유지해야 합니다. 왼쪽인데 사용하고 나면 텍스트 상자도 바뀌는 문제가 있습니다. 너무 길면 원하는 효과가 아닙니다

그래서 텍스트 상자의 커서에 padding-left 속성을 추가해야 합니다. box-sizing: border-box;

box-sizing: border-box; 요소의 내부 여백과 외부 테두리는 너비를 늘리지 않습니다.

따라서 텍스트 상자 스타일의 전체 코드는 다음과 같습니다.

input{

개요: 없음;/*텍스트 상자 테두리 제거*

border-box; padding-left:15px;

}

물론 텍스트 필드도 사용할 수 있습니다

다음으로 둥근 모서리를 만듭니다. 텍스트 필드에 대한 함수

border-radius:8px;

기본값은 텍스트 필드입니다. 하단 모서리에 두 개의 슬래시가 있습니다. 또한 resize: none을 사용하여 텍스트 필드에서 슬래시를 제거할 수도 있습니다. . 아래의 전체 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        input{
            outline:none;
            box-sizing:border-box;padding-left:15px;}
        textarea{
            outline:none;resize : none;
            box-sizing:border-box;padding-left:15px;padding-top:5px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .pwd{width:200px;height:30px;
            margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .txt{
            width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .sub{width:100px;height:30px;padding-left:0px;
            border:none;
            border-radius:5px;background:#ffd0ff;}
        .sub:hover{background:#ffaad5;}
        .div{
            width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密 码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮 箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱 好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding:0;} #div{width:410px;height:400px;background:#46a3ff;padding-left:16px; padding-top:20px;} input{ outline:none; box-sizing:border-box;padding-left:15px;} textarea{ outline:none;resize : none; box-sizing:border-box;padding-left:15px;padding-top:5px;} .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .pwd{width:200px;height:30px; margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .txt{ width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;} .sub{width:100px;height:30px;padding-left:0px; border:none; border-radius:5px;background:#ffd0ff;} .sub:hover{background:#ffaad5;} .div{ width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;} </style> </head> <body> <div id="div"> <form> <label>用户名:</label> <input type="text" class="name" id="name"> <div id="sp" class="div"></div> <label>密码:</label> <input type="password" class="pwd" id="pwd"> <div id="sp1" class="div"></div> <label>邮箱:</label> <input type="text" class="email" id="email"> <div id="sp2" class="div"></div> <label>爱好:</label> <textarea rows="5" cols="40" class="txt" id="txt"></textarea> <div id="sp3" class="div"></div> <input type="button" class="sub" value="注册" id="sub"> </form> </div> </body> </html>

제출하다 코드 재설정

자동운전