CSS実例練習
26304 ワード
青色ナビゲーションは画像でbackground-imageで実現します.
レイアウトはul,liラベル,下線はborder-bottomのdashed,右文字はCSSフローティングfloatを用いた.
例:
コード:
レイアウトはul,liラベル,下線はborder-bottomのdashed,右文字はCSSフローティングfloatを用いた.
例:
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
body,div,a,span,ul,li{margin:0px;padding:0px;}
body{
background-color:#cccccc;
}
div{
background-color:#FFFFFF;
}
ul,li{list-style:none;}
a:link,a:visited{color:#0066CC;text-decoration:none;}
.red{color:red}
.green{color:green}
h4{
color:#333;
}
.kaiban{
width:295px;
margin:100px auto;
font-family:"Microsoft Yahei";
font-size:14px;
}
.kaiban .title{
height:35px;
line-height:35px;
padding-left:35px;
color:#fff;
backgroudn-repeat:no-repeat;
background-image:url(righttitle.gif);
}
.conten h4{
margin:5px;
}
.conten{
margin:0px;
padding:10px;
}
.conten li{
height:23px;
line-height:23px;
color:#333;
font-size:12px;
border-bottom:1px dashed #cccccc;
}
.conten li span{
font-weight:bold;
float:right;
}
</style>
</head>
<body>
<div class="kaiban">
<div class="title">PHP </div>
<div class="conten">
<ul><h4>PHP </h4>
<li><a href="#"> --27 (3 30 )</a><span class="red"> </span></li>
<li><a href="#"> --28 (4 30 </a>)<span class="green"> </span></li>
<li><a href="#"> --27 (6 30 )</a><span class="green"> </span></li>
<li><a href="#"> --27 (8 30 )</a><span class="green"> </span></li>
</ul>
<ul><h4>PHP </h4>
<li><a href="#"> --27 (3 30 )</a><span class="red"> </span></li>
<li><a href="#"> --28 (5 30 )</a><span class="green"> </span></li>
<li><a href="#"> --27 (6 30 )</a><span class="green"> </span></li>
<li><a href="#"> --27 (6 30 )</a><span class="green"> </span></li>
</ul>
<ul><h4> UI </h4>
<li><a href="#"> --27 (5 30 )</a><span class="red"> </span></li>
<li><a href="#"> --28 (6 30 )</a><span class="green"> </span></li>
<li><a href="#"> --27 (7 30 )</a><span class="green"> </span></li>
<li><a href="#"> --27 (8 30 )</a><span class="green"> </span></li>
</ul>
</div>
</div>
</body>
</html>