22个必须知道的css技巧_html/css_WEB-ITnose

::selection{ /* Safari and Opera */    background:#c3effd;    color:#000;}::-moz-selection{ /* Firefox */    background:#c3effd;    color:#000;}

html{ overflow-y:scroll; }

.page-break{ page-break-before:always; }

.page { background-color:blue !important;   background-color:red;}

.header{    text-indent:-9999px;    background:url('someimage.jpg') no-repeat;    height: 100px; /*dimensions equal to image size*/    width:500px;}

#container{    height:auto !important;/*all browsers except ie6 will respect the !important flag*/    min-height:500px;    height:500px;/*Should have the same value as the min height above*/}

a[target="_blank"]:before,a[target="new"]:before {    margin:0 5px 0 0;    padding:1px;    outline:1px solid #333;    color:#333;    background:#ff9;    font:12px "Zapf Dingbats";    content: "\279C";}

ol {    font: italic 1em Georgia, Times, serif;    color: #999999;}ol p {    font: normal .8em Arial, Helvetica, sans-serif;    color: #000000;}

p:first-letter{display:block;margin:5px 0 0 5px;float:left;color:#FF3366;font-size:3.0em;font-family:Georgia;}

.transparent_class {          filter:alpha(opacity=50);          -moz-opacity:0.5;          -khtml-opacity: 0.5;          opacity: 0.5;      }

line-height:30px;

body{    width:1000px;    margin:0 auto;}

textarea{    overflow:auto;}

a:active, a:focus{ outline:none; }

position:relative;

a[href$='.doc'] {    padding:0 20px 0 0;    background:transparent url(/graphics/icons/doc.gif) no-repeat center right;}

input[type=submit],label,select,.pointer { cursor:pointer; }

text-transform: capitalize;

font-variant:small-caps;

input[type=text]:focus, input[type=password]:focus{    border:2px solid #000;}

a img{ border:none; }

<form method="post" action="#" ><p><label for="username" >Username</label><input type="text" id="username" name="username" /></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><label for="password" >Username</label><input type="password" id="password" name="pass" /></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1370">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680247718312.png" alt="C知道">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1370">C知道</a>
                            <p>CSDN推出的一款AI技术问答工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="C知道">
                                <span>45</span>
                            </div>
                        </div>
                        <a href="/ai/1370" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="C知道">
                        </a>
                    </div>
                <p><input type="submit" value="Submit" /></p></form>

p label{    width:100px;    float:left;    margin-right:10px;    text-align:right;}