本文通过一个具体的实例展示了如何使用CSS进行网页布局，并添加动画效果。主要包括：设置元素的宽度、高度、内边距等样式属性，利用相对定位和绝对定位实现元素的精确布局，以及使用:hover伪类为元素添加鼠标悬停时的动画效果。
<head>
<style type="text/css">
*{margin:0;padding:0;}
#flash{
width:1178px;
height:305px;
margin:50px auto 0;
box-shadow:0 0 10px #000;/*盒子阴影属性box-shadow:水平偏移 垂直偏移 阴影半径 阴影颜色*/
padding:10px; /*设内边距盒子变大*/
}
#flash .Con{
width:1178px;
height:305px;
background:#ff33cc;
}
#flash .Con ul li{border:2px solid #0033;
width:46px;
height:305px;
list-style-type:none;
float:left;
position:relative;
overflow:hide;}
#flash .Con ul li .Course{height:895px;width:280px;background:red;position:absolute;top:0;left:0;top:40px;left:70px;}
#flash .Con ul li .Course dl{width:200px;
height:180px;
float:left;
margin:50px 10px
}
#flash .Con ul li .Course dl dt{width:300px;height:150px;background:red;}
#flash .Con ul li .Course dl dd{font-size:14px;font-family:"微软雅黑"；text-align:center;/*文字居中*/;line-height:30px;}
#flash .Con ul li h3{width:18px;height:305px;font-size:18px;color:#fff;font-size:"微软雅黑；padding:21px;}/*使从上往下排列*/
#flash .Con ul li tit1{background:#00cc33;}
#flash .Con ul li tit2{background:#ff6633;}
#flash .Con ul li tit3{background:#cc6666;}
#flash .Con ul li tit4{background:#999900;}
</style>
</head>
<body>
<div id="flash">
<div class="Con"></div>
<ul>
<li style="width:990px;" class="tit1">
<h4>IT培训</h4>
<div class="Course">
<dl>
<dt><img src="imges/x1.png"></dt>
<dd></dd>
</dl>
<dl>
<dt><img src="imges/x2.png"></dt>
<dd></dd>
</dl>
<dl>
<dt><img src="imges/x3.png"></dt>
<dd></dd>
</dl>
<dl>
<dt><img src="imges/x4.png"></dt>
<dd></dd>
</dl>
</div>
</li>
<li class="tit2"><h4>职业技能</h4></li>
<li class="tit3"><h4>兴趣爱好</h4></li>
<li class="tit4"><h4>语言学习</h4></li>
</ul>
内边距的兼容性padding:0;float:left；
是字体从上往下排
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(".Con ul li").mouseover(dunction(){/*鼠标划过*/
$(this).animate(("width:990px"),200).siblings("li")animate("width:200px",200);
});
</script>
</body>/
扫一扫
1714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
