《
css3制作网页实例 点击切换不同的CSS列表》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332142013.htm
--> [
网站建设之]css3制造网页实例:点击切换不同的CSS列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xmlns=" 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 + ,
CSS3入门教程：target伪类简介.control, input[type=radio]:checked + .control {box-shadow:inset 0px 0px 20px #d3b67a;}.first {border-top-left-radius:3px;border-bottom-left-radius:3px;}.last {border-top-right-radius:3px;border-bottom-right-radius:3px;}#item_list {margin-top:30px;}#item_list li p{width:180px;display:inline-block;margin:0;padding:0;}#item_list ,
CSS3入门教程(9)：RGBA声明.title{ font-size:20px; font-weight:bold;display:block; margin-bottom:10px; }#item_list .txt{ font-size:12px; display:block; margin-bottom:10px; }#item_list li {display:inline-block;/*行内块元素*/width:300px;vertical-align:top;margin:0 2px 20px 0;padding:10px;background:#f3eada;border-radius:5px;box-shadow:inset 0px 0px 20px #e0cba0;overflow:hidden;}#item_list li img{display:inline-block;vertical-align:top;margin-right:4px;width:100px;}#item-list li p {display: inline-block;width: 180px;margin: 0;padding: 0;}.view_control_1:checked ~ #item_list li img {opacity:1;width:100px;visibility:visible; }.view_control_1:checked ~ #item_list li p {opacity:1;visibility:visible;/*属性可使元素可见*/transition:.4s ease-out;}.view_control_1:checked ~ #item_list li {width:300px;transition: .4s ease-out;}/*list2*/.view_control_2:checked ~ #item_list li img {opacity:0;width:0;visibility:visible;transition:.4s ease-out;},
CSS3入门教程(8)：关于透明度.view_control_2:checked ~ #item_list li p {opacity:1;visibility:visible;transition:.4s ease-out;}.view-control_2:checked ~ #item_list li {width:900px;transition:.4s .4s ease-out;}/*list3*/.view_control_3:checked ~ #item_list li img {opacity:1;width:100px;visibility:visible;transition:.4s ease-out;}.view_control_3:checked ~ #item_list li p {opacity:1;visibility:visible;transition:.4s ease-out;}.view_control_3:checked ~ #item_list li {width:900px;transition:.4s ease-out;}/*list4*/.view_control_4:checked ~ #item_list li img {opacity:1;width:100px;visibility:visible;transition:.4s ease-out;}.view_control_4:checked ~ #item_list li p {opacity:0;position:absolute;visibility:hidden;transition:,
CSS3入门教程(7)：嵌入字体.4s ease-out;}.view_control_4:checked ~ #item_list li {width:100px;transiton:.4s ease-out;}</style></head> <body><div class="content"><input name="view_control" type="radio" class="view_control_1" checked="checked"/><span class="control first"><img src="images/blockinline.png" /></span><input name="view_control" type="radio" class="view_control_2"/><span class="control"><img src="images/plainlist.png" /></span><input name="view_control" type="radio" class="view_control_3" /><span class="control"><img src="images/blocklist.png" /></span><input name=",
CSS3入门教程(6)：多列 多卷;view_control" type="radio" class="view_control_4" /><span class="control last"><img src="images/block.png" /></span><ul id="item_list"><li> <img src="images/angrybird.png" /><p> <span class="title">疯狂的小喵</span> <span class="txt">疯狂的小喵</span> </p></li><li><img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" />,
CSS3入门教程(5)：背景图片(背景大小和多背景图);<p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span><,
CSS3入门教程(4)：关于阴影;/p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p>,
CSS3入门教程(3)：边框颜色;</li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p><span class="title">Draw Something</span><span class="txt">疯狂的小喵</span></p></li><li> <img src="images/cuttherope.png" /><p>,
CSS3入门教程(2)：边框半径和圆角;<span class="title">Draw Something</span><,
CSS3入门教程(10)：HSL和HSLA;span class="txt">猖狂的小喵</span></p></li></ul></div></body></html> Tag：不同 切换 点击 制作 网页 实例
(责任编辑：网站建设)
css3制作网页实例 点击切换不同的CSS列表相关文章