萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css3制作網頁實例:點擊切換不同的CSS列表
css3制作網頁實例:點擊切換不同的CSS列表
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3列表</title>
<style type="text/css">
li, ul, dd, dl, dt {
list-style:none;
list-style-type:none;
padding:0;
margin:0;
text-align:left;
}
body {
font-family:"微軟雅黑",Verdana, Geneva, sans-serif;
background:url(images/background.jpg) repeat;
height:100%;
width:100%;
}
.content {
margin:0 auto;
width:1000px;
text-align:center;
}
input[type=radio] {
position:absolute;
z-index:100;
opacity:0;
cursor:pointer;
height:30px;
width:40px;
}
.control {
display:inline-block;
margin:0 -5px;
width:40px;
background:#eddfc7;
padding:5px;
border:1px solid #e0cba0;
cursor:pointer;
vertical-align:bottom bottom;
}
.control:hover, input[type=radio]:hover + .control, input[type=radio]:checked + .control {
box-shadow:inset 0px 0px 20px #d3b67a;
}
.first {
border-top-left-radius:3px;
- 上一頁:css
- 下一頁:CSS網頁制作技巧:圖片的自適應居中和兼容處理
