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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
