首頁猿問 ul設(shè)計導(dǎo)航欄

ul設(shè)計導(dǎo)航欄

Html5 JavaScript Node.js

寒青 2016-03-23 02:13:17

如何在js文件header中添加ul導(dǎo)航條，需要實現(xiàn)的效果圖：以下是我寫的代碼，但沒有實現(xiàn)上面的效果，請教如何解決？<ul?class="type"?id="type"> ??????<li?data-type="dot">Dot</li> ??????<li?data-type="column"?class="selected">Column</li> </ul>得到的效果，哪位大俠有興趣解決這個問題？謝謝~

查看完整描述

2 回答

已采納

李曉健

TA貢獻1036條經(jīng)驗獲得超461個贊

<!DOCTYPE??HTML>
<html>
<head>
????<meta?charset="utf-8"/>
????<title>xxxxxx</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????body{
????????????background-color:?#000;
????????????padding:?20px;
????????}
????????.type{
????????????width:?180px;
????????????border-radius:?5px;
????????????border:?1px?solid?#fff;
????????????overflow:?hidden;
????????}
????????.type?li{
????????????list-style:?none;
????????????width:?50%;
????????????float:?left;
????????????text-align:?center;
????????????background-color:?#000;
????????????color:?#fff;
????????}
????????.type?.selected{
????????????background-color:?#fff;
????????????color:?#000;
????????}
????</style>
</head>
<body>
<ul?class="type"?id="type">
????<li?data-type="dot">Dot</li>
????<li?data-type="column"?class="selected">Column</li>
</ul>
</body>
</html>

反對回復(fù) 2016-03-23