首页 > 代码库 > CSS样式

CSS样式

2024-08-19 07:33:08   224人阅读

内部样式

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <style type="text/css">
    body{ background-color: silver; }  //内部样式
    input{background-color: yellow; font-size: 12px; } //设置input的内部样式
    #div1{background: green;width: 90%;height: 20%;}  //id为div1的，前面加#
    .xm{ background-color: red; font-size: 16px; }  //class为xm,前面加.
    input.xh{background-color: blue; } //是input且class 是xh的
    }
    }
    </style>
</head>
<body>
    Welcome <br>

    <input type="text" class="xm">
    <br>
    <input type="text" style="width: 100px; font-size: 1.2em" name="">
    <p class="xh"> Hello world </p>
</body>
</html>
View Code

内部样式层次结构

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <style type="text/css">
        #main input {background-color: yellow; font-size: 12px; }
        .extend input { background-color: cyan; font-size: 12px; }
    </style>
</head>
<body>
    Welcome <br>
    <div id="main">
        学号: <input type="text"> <br>
    </div>
    <div class="extend">
        姓名: <input type="text"> <br>
    </div>
</body>
</html>
View Code

布局样例

技术分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyGod</title>
    <style type="text/css">
        div#container{ width:500px }
        div#header { background-color:cyan; }
        div#menu { background-color:#ff9; height:200px; width:100px; float:left; }
        div#content { background-color:#eee; height:200px; width:400px; float:left; }
        div#footer { background-color:#9bb; clear:both; text-align:center; }
        h1 { margin-bottom:0; }
        h2 { margin-bottom:10; font-size:14px; }
        ul { margin:1; }
        li { list-style:none; }

    </style>
</head>
<body>
    <div id="container">
    <div id="header">
    <h1>Main Title of Web Page</h1>
    </div>
    <div id="menu">
        <h2>Menu</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div id="content">Content goes here</div>
    <div id="footer">Copyright 2000-2014</div>
</div>

</body>
</html>
View Code

 

CSS样式


联系
我们