-
CSS3-Transition：過渡屬性
查看全部 -
transform:動畫2D、3D效果
查看全部 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a {
? ? display: inline-block;
? ? height: 27px;
? ? line-height: 27px;
? ? text-decoration: none;
? ? margin-right: 8px;
? ? color: #000;
}
.ac {
? ? background: url('http://img1.sycdn.imooc.com//538588030001c52300090027.jpg') no-repeat;
? ? padding-left: 8px;
}
.ac span {
? ? display: inline-block;
? ? background: url('http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg') right top no-repeat;
? ? color: #fff;
? ? background-color: #21530C;
? ? padding-right: 8px;
}
.ac:hover{
? ? opacity: 0.9;
}
</style>
</head>
<body>
<ul>
? ? <li><a href="#" class="ac"><span>首頁</span></a></li>
? ? <li><a href="#"><span>最新產(chǎn)品</span></a></li>
? ? <li><a href="#"><span>內(nèi)部新聞</span></a></li>
? ? <li><a href="#"><span>聯(lián)系我們</span></a></li>
</ul>
</body>
</html>
查看全部 -
慢慢放大查看全部
-
transform參數(shù)（實現(xiàn)旋轉(zhuǎn)）查看全部
-
css3-box-sizing: content-box | border-box | inherit 值描述查看全部
-
css:box-sizing查看全部
-
css-transition查看全部
-
css3-transform參數(shù)查看全部
-
背景：顏色值 背景圖片 圖片樣式 水平 垂直 background：#fff url() no-repeat center center;查看全部
-
三角形的寫法： span{diplay:block; width:0; height:0; overflw:hidden; border:7px solid transparent;（transparent透明） border-top-color:#2DCB70;（朝下，上，左，右） }查看全部
-
box-sizing查看全部
-
box-sizing查看全部
-
Transition查看全部
舉報