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>