                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

效果一樣，不知道這樣好不好

ConsoleDot

2015-02-24

源自：企業(yè)網(wǎng)站綜合布局實戰(zhàn) 3-7

關(guān)注問題我要回答

912

操作

收起

1 回答

honpery
2015-02-24

其實我也是自學的，有很多的地方也不知道好不好，前段時間自己研究了下，遇到有分割線的導(dǎo)航欄或者橫向的列表，貼出來了，互相學習哈，求指點~

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title></title>
????<style?type="text/css">
????????/*?reset?*/
????????body,ul,li?{?margin:0;?padding:0;?list-style:none;?}
????????a?{?text-decoration:none;?}
????????/*?reset?end?*/

????????/*?common?*/
????????.clear?{
????????????clear:both;
????????}
????????.clear:after?{
????????????content:"";
????????????display:block;
????????????zoom:1;
????????}
????????/*?common?end?*/

????????/*?nav?*/
????????.nav?{
????????????/*?便于觀察?*/
????????????border:1px?solid?#eee;
????????????float:left;
????????}
????????.nav?li?{
????????????float:left;
????????????width:100px;
????????????height:50px;
????????????text-align:center;
????????}
????????.nav?a?{
????????????display:block;
????????????height:16px;
????????????border-left:1px?solid?#000;
????????????color:#000;
????????????font-size:16px;
????????????margin-top:17px;
????????}
????????.nav?.first?a?{
????????????border:0;
????????}
????????.nav?a:hover?{
????????????color:#aca;
????????}
????????/*?nav?end?*/
????</style>
</head>
<body>
????<!--?nav?-->
????<ul?class="nav?clear">
????????<li?class="first"><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>
????<!--?nav?end?-->
</body>
</html>