Css初步认识及使用

xiaoxiao2021-02-28  12

Css案例

<!DOCTYPE html>

<html lang="en"> <head>     <meta charset="UTF-8">     <title>01_CSS样式使用案例</title>

    <!--css样式分离的第一种方法: 写在页面的head标签里面-->    <style>        div {            width: 250px;            height: 250px;            border: 2px solid darkred;            background-color: floralwhite;            text-align: center;        }        span {            font-size: 20px;            color: cornflowerblue;        }    </style></head><body><div>    hello python</div><span>    hello java</span></body>

</html>

Css类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>02-CSS类选择器</title>    <style>        .div-red{            width: 500px;            height: 100px;            border: 2px solid darkred;            background-color: floralwhite;            text-align: center;        }        .div-green{            width: 500px;            height: 100px;            border: 2px solid darkred;            background-color: red;            text-align: center;        }    </style></head><body><h2>案例2:合并列单元</h2><table width="500" cellpadding="8" cellspacing="5"  border="'1">    <caption>主机信息表格</caption>    <tr>        <th>主机名</th>        <th colspan="2">IP地址</th>    </tr><!--<div class="div-red">-->    <tr class="div-red">        <td>主机1</td>        <td>IP1</td>        <td>IP1</td>    </tr><!--</div>--><!--<div class="div-green">-->    <tr class="div-green">        <td>主机2</td>        <td>IP2</td>        <td>IP2</td>    </tr></div>    <tr>        <td>主机3</td>        <td>IP3</td>        <td>IP3</td>    </tr>    <tr>        <td>主机4</td>        <td>IP4</td>        <td>IP4</td>    </tr></table></body>

</html>

属性选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>03-属性选择器</title>    <style>        input[type="text"]{            width: 200px;            background-color: darkgrey;        }        input[name="passwd"]{            width: 200px;            background-color: darkgrey;        }        input[type="submit"]{            width: 100px;            background-color: gainsboro;        }    </style></head><body><div align="center" style="width: 80%">    <h3>用户登陆</h3>    <form action="#" method="get">        户名:<input type="text" name="username"><br/>        密码: <input type="password" name="passwd"><br/>        <input type="submit" value="登陆">    </form></div></body>

</html>

左侧导航栏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>06左侧导航栏</title>    <style>        ul{            list-style-type: none;            margin: 0;            padding: 0;            background-color: dimgrey;            width: 12%;        }        li a{            text-decoration: none;            color: white;            display: block;            padding: 20px 40px;        }        li a:hover{            background-color: red;            color: white;        }    </style></head><body><ul>    <li><a href="#">首页</a> </li>    <li><a href="#">地图</a> </li>    <li><a href="#">新闻</a> </li>    <li><a href="#">贴吧</a> </li>    <li><a href="#">图片</a> </li>    <li><a href="#">更多</a> </li></ul></body>

</html>

水平导航栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-水平导航栏</title> <style> ul{ list-style-type: none; margin: 0; padding: 0; background-color: cadetblue; overflow: hidden; } li { float: left; } li a{ text-decoration: none; color: black; display: block; padding: 18px 40px; } li a:hover{ background-color: blue; color: white; } li a.index{ background-color: red; color: white; font-size: 16px; } </style> </head> <body> <ul> <li><a class="index" href="#">首页</a> </li> <li><a href="#">地图</a> </li> <li><a href="#">新闻</a> </li> <li><a href="#">贴吧</a> </li> <li><a href="#">图片</a> </li> <li><a href="#">学术</a> </li> <li><a href="#">音乐</a> </li> <li><a href="#">视频</a> </li> <li><a href="#">体育</a> </li> <li><a href="#">娱乐</a> </li> <li><a href="#">登陆</a> </li> <li><a href="#">更多</a> </li> </ul> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-2000003.html

最新回复(0)