给大家带来css3制造网页实例:点击切换分歧的CSS列表

只看该作者 · 发表于 2015-1-15 22:52:54

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
破洛洛文章简介：CSS3制造网页实例:点击切换分歧的CSS列表.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>css3列表</title>
<styletype="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:0auto;
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:1pxsolid#e0cba0;
cursor:pointer;
vertical-align:bottombottom;
}
.control:hover,input[type=radio]:hover+.control,input[type=radio]:checked+.control{
box-shadow:inset0px0px20px#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_listlip{
width:180px;
display:inline-block;
margin:0;
padding:0;
}
#item_list.title{font-size:20px;font-weight:bold;display:block;margin-bottom:10px;}
#item_list.txt{font-size:12px;display:block;margin-bottom:10px;}
#item_listli{
display:inline-block;/*行内块元素*/
width:300px;
vertical-align:top;
margin:02px20px0;
padding:10px;
background:#f3eada;
border-radius:5px;
box-shadow:inset0px0px20px#e0cba0;
overflow:hidden;
}
#item_listliimg{
display:inline-block;
vertical-align:top;
margin-right:4px;
width:100px;
}
#item-listlip{
display:inline-block;
width:180px;
margin:0;
padding:0;
}
.view_control_1:checked~#item_listliimg{
opacity:1;
width:100px;
visibility:visible;}
.view_control_1:checked~#item_listlip{
opacity:1;
visibility:visible;/*属性可以使元素可见*/
transition:.4sease-out;
}
.view_control_1:checked~#item_listli{
width:300px;
transition:.4sease-out;
}

/*list2*/
.view_control_2:checked~#item_listliimg{
opacity:0;
width:0;
visibility:visible;
transition:.4sease-out;
}
.view_control_2:checked~#item_listlip{
opacity:1;
visibility:visible;
transition:.4sease-out;
}
.view-control_2:checked~#item_listli{
width:900px;
transition:.4s.4sease-out;
}
/*list3*/
.view_control_3:checked~#item_listliimg{
opacity:1;
width:100px;
visibility:visible;
transition:.4sease-out;
}
.view_control_3:checked~#item_listlip{
opacity:1;
visibility:visible;
transition:.4sease-out;
}
.view_control_3:checked~#item_listli{
width:900px;
transition:.4sease-out;
}
/*list4*/
.view_control_4:checked~#item_listliimg{
opacity:1;
width:100px;
visibility:visible;
transition:.4sease-out;
}
.view_control_4:checked~#item_listlip{
opacity:0;
position:absolute;
visibility:hidden;
transition:.4sease-out;
}
.view_control_4:checked~#item_listli{
width:100px;
transiton:.4sease-out;
}
</style>
</head><body>
<divclass="content">
<inputname="view_control"type="radio"class="view_control_1"checked="checked"/>
<spanclass="controlfirst">
<li>DrawSomething<spanclass="txt">猖狂的小喵
</li>
<li>DrawSomething<spanclass="txt">猖狂的小喵
</li>
<li>DrawSomething<spanclass="txt">猖狂的小喵
</li>
<li>DrawSomething<spanclass="txt">猖狂的小喵
</li>
<li>DrawSomething<spanclass="txt">猖狂的小喵
</li>
<li><imgsrc="images/cuttherope.png"/>
<spanclass="title">DrawSomething<spanclass="txt">猖狂的小喵
</li>
</ul>
</div>
</body>
</html>

所有的设计第一步就是构思，构思好了。

只看该作者 · 发表于 2015-1-17 19:21:32

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-1-26 21:52:35

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-2-5 04:04:02

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-11 05:07:29

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-3-1 22:36:37

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-11 02:31:32

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-3-17 20:59:41

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-25 04:34:01

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来css3制造网页实例:点击切换分歧的CSS列表

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子