0

私はウェブデザインの初心者です。右側にナビゲーションバーがあります。liのクラスを定義しました。すべてのliをアニメートして、右側から表示したいと思います。

私はそれをすることができません。助けが要る。私のhtmlとcssのコードはそうです。

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="jquery.js"> </script>
<script>
$(function(){
    $(".content-box-blue").animate({width:'350px'},1200);
    $(".content-box-gray").animate({width:'250px'},1200);
    $(".content-box-green").animate({width:'300px'},1200);
    $(".content-box-purple").animate({width:'400px'},1200);
    $(".content-box-red").animate({width:'200px'},1200);
    $(".content-box-yellow").animate({width:'250px'},1200);
});
</script>
<title>Demo</title>
</head>
<body>
<header>
</header>

<nav>
    <ul>
        <li class="content-box-blue"> </li>
        <li class="content-box-gray"> </li>
        <li class="content-box-green"> </li>
        <li class="content-box-purple"> </li>
        <li class="content-box-red"> </li>
        <li class="content-box-yellow"> </li>
    </ul>
</nav>

<footer>
</footer>

liのcssコードは

ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
li {
margin: 0; 
padding: 0;
margin-bottom: 20px;
}
nav {
float: right;
width: 400px;
height: 500px;
margin-top: 35px;
margin-right: 10px;
background-color: #ffffff;
}
.content-box-blue {
background-color: #00bfff;
border: 1px solid #afcde3;
height: 50px;
width: 0px;
margin-left: 50px;
border-top-left-radius: 8% 50%;
border-bottom-left-radius: 8% 50%;
}
.content-box-gray {
background-color: #FF69B4;
border: 1px solid #bdbdbd;
height: 50px;
width: 0px;
margin-left: 150px;
border-top-left-radius: 12% 50%;
border-bottom-left-radius: 12% 50%;
}
.content-box-green {
background-color: #3CB371;
border: 1px solid #b2ce96;
height: 50px;
width: 0px;
margin-left: 100px;
border-top-left-radius: 9% 50%;
border-bottom-left-radius: 9% 50%;
}
.content-box-purple {
background-color:#9370DB;
border: 1px solid #bebde9;
height: 50px;
width: 0px;
margin-left: 0px;
border-top-left-radius: 6% 50%;
border-bottom-left-radius: 6% 50%;
}
.content-box-red {
background-color: #FF0000;
border: 1px solid #e9b3b3;
height: 50px;
width: 0px;
margin-left: 200px;
border-top-left-radius: 13% 50%;
border-bottom-left-radius: 13% 50%;
}
.content-box-yellow {
background-color: #FFA500;
border: 1px solid #fadf98;
height: 50px;
width: 0px;
margin-left: 150px;
border-top-left-radius: 12% 50%;
border-bottom-left-radius: 12% 50%;
}
4

3 に答える 3

0

<li>のすぐ上でフロートを実行できます

ここにデモがあります

于 2013-03-18T06:33:19.777 に答える
0

スタイルシートに次の css を追加します。

li{ clear:right; float: right; }

于 2013-03-18T06:54:27.183 に答える
0

すべてborder-left-radiusをright半径に変更float:leftし、right

ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
margin: 0; 
padding: 0;
margin-bottom: 20px;
}
nav {
float: left;
width: 400px;
height: 500px;
margin-top: 35px;
margin-right: 10px;
background-color: #ffffff;
}
.content-box-blue {
background-color: #00bfff;
border: 1px solid #afcde3;
height: 50px;
width: 0px;
margin-right: 50px;
border-top-right-radius: 8% 50%;
border-bottom-right-radius: 8% 50%;
}
.content-box-gray {
background-color: #FF69B4;
border: 1px solid #bdbdbd;
height: 50px;
width: 0px;
margin-right: 150px;
border-top-right-radius: 12% 50%;
border-bottom-right-radius: 12% 50%;
}
.content-box-green {
background-color: #3CB371;
border: 1px solid #b2ce96;
height: 50px;
width: 0px;
margin-right: 100px;
border-top-right-radius: 9% 50%;
border-bottom-right-radius: 9% 50%;
}
.content-box-purple {
background-color:#9370DB;
border: 1px solid #bebde9;
height: 50px;
width: 0px;
margin-left: 0px;
border-top-right-radius: 6% 50%;
border-bottom-right-radius: 6% 50%;
}
.content-box-red {
background-color: #FF0000;
border: 1px solid #e9b3b3;
height: 50px;
width: 0px;
margin-right: 200px;
border-top-right-radius: 13% 50%;
border-bottom-right-radius: 13% 50%;
}
.content-box-yellow {
background-color: #FFA500;
border: 1px solid #fadf98;
height: 50px;
width: 0px;
margin-right: 150px;
border-top-right-radius: 12% 50%;
border-bottom-right-radius: 12% 50%;
}

デモ

于 2013-03-18T06:44:02.713 に答える