带来一篇CSS3实例教程:盒子模子实例代码

显示全部楼层 · 发表于 2015-1-15 22:57:39

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

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

x

表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
破洛洛文章简介：CSS3实例教程:盒子模子实例代码
@charset"utf-8";
/*CSSDocument*/
body{
margin:0auto;
width:1000px;
height:1000px;
font-size:12px;
}
.div1{
width:400px;
height:450px;
margin-left:10px;
margin-top:100px;
margin-left:250px;
}
font{
font-weight:bold;
font-size:18px;
font-family:"楷体";
}
.span1{
display:block;
height:18px;
}
.span1a{
float:right;
text-decoration:none;
}
.faceul{
margin:0px;
width:350px;
height:120px;
list-style-type:none;
}
.faceulli{
width:90px;
height:90px;
float:left;
margin-right:20px;
margin-top:10px;
}
.faceulimg{
width:80px;
height:70px;
margin:10px;
}
/*链接*/
.faceula{
text-decoration:none;
text-align:center;
}
a:hover{
text-decoration:underline;
font-size:18px;
color:#F00;
}
a:visited{
color:#C9F;
}
<!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>盒子模子1</title>
<linkhref="盒子模子综合一.css"rel="stylesheet"type="text/css"/>
</head><body>
<divclass="div1">
<div>
<spanclass="span1"><font>优酷小新</font><ahref="#">更多..</a></span>
<ulclass="faceul">
<li>小新穿裙子</a></li>
<li>恼怒的小新</a></li>
<li>小新的最爱</a></li>
</ul>
</div>
<div>
<spanclass="span1"><font>搜狐小新</font><ahref="#">更多..</a></span>
<ulclass="faceul">
<li>小新之泡妞</a></li>
<li><imgsrc="../案例二/9.gif"/><ahref="#">小新之相扑</a></li>
</ul>
</div>
</div>
</body>
</html>

登录/注册后可看大图

</p>
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

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

[DIV+CSS] 带来一篇CSS3实例教程:盒子模子实例代码

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

相关帖子