|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性 |
|