あああの背景色は青
いいいの背景色は緑
うううの背景色は黄色
っといった感じにするのはどのようにすればいいのでしょうか?
調べようと思ったのですが、どんなワードで検索すればいいのかわからず困ってます。
html
<ul class="global-nav"> <li><a href="#">あああ</a></li> <li><a href="#">いいい</a></li> <li><a href="#">ううう</a></li> <li><a href="#">えええ</a></li> <li><a href="#">おおお</a></li> </ul>
CSS
.global-nav { margin: 0 0 30px; padding: 0; border-top: 1px solid #aaa; font-size: 13px; list-style-type: none; } /*clearfix*/ .global-nav:after { content: ""; clear: both; display: block; } .global-nav li { float: left; width: 50%; text-align: center; border-bottom: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*奇数のli要素に適応*/ .global-nav li:nth-child(odd) { border-right: 1px solid #aaa; } .global-nav a { display: block; line-height: 44px; color: #000; text-decoration: none; } .global-nav a:hover { color: #000; background: #e6e6e6; } /*横幅1280px以上に適応*/ @media screen and (min-width: 1280px) { .global-nav li:nth-child(odd) { border-right: none; } .global-nav { display: table; table-layout: fixed; width: 100%; border-top: none; border-collapse: collapse; } .global-nav li { float: none; display: table-cell; width: 100%; border-bottom: none; border: 1px solid #aaa; } .global-nav li:nth-child(odd) { border-right: 1px solid #aaa; } .global-nav a { display: block; line-height: 44px; color: #000; text-decoration: none; } .global-nav a:hover { color: #000; background: #e6e6e6; } }
まだ回答がついていません
会員登録して回答してみよう