首頁猿問這段代碼如何書寫。

這段代碼如何書寫。

CSS3

李珗殅3215805 2016-05-12 16:12:23

1、制作導(dǎo)航圓角提示：使用border-radius實現(xiàn)圓角2、制作導(dǎo)航立體風(fēng)格提示：使用box-shadow實現(xiàn)立體風(fēng)格3、制作導(dǎo)航分隔線提示：使用漸變與偽元素制作4、刪除第一個和最后一個導(dǎo)航分隔線提示：使用偽元素刪除第一個和最后一個分隔線

查看完整描述

1 回答

七寒谷

TA貢獻(xiàn)6條經(jīng)驗獲得超6個贊

	<style>
		body{
		??background:?#ebebeb;
		}
		.nav{
		??width:560px;
		??height:?50px;
		??font:bold?0/50px?Arial;
		??text-align:center;
		??margin:40px?auto?0;
	??????background:?#f65f57;
		??/*制作圓*/
		??border-radius:10px;
??????????/*制作導(dǎo)航立體風(fēng)格*/
??????????box-shadow:0?5px?0;
		}
		.nav?a{
		??display:?inline-block;
		??-webkit-transition:?all?0.2s?ease-in;
		??-moz-transition:?all?0.2s?ease-in;
		??-o-transition:?all?0.2s?ease-in;
		??-ms-transition:?all?0.2s?ease-in;
		??transition:?all?0.2s?ease-in;
		}
		.nav?a:hover{
		??-webkit-transform:rotate(10deg);
		??-moz-transform:rotate(10deg);
		??-o-transform:rotate(10deg);
		??-ms-transform:rotate(10deg);
		??transform:rotate(10deg);
		}

		.nav?li{
		??position:relative;
		??display:inline-block;
		??padding:0?16px;
		??font-size:?13px;
		??text-shadow:1px?2px?4px?rgba(0,0,0,.5);
		??list-style:?none?outside?none;
		}
		/*使用偽元素制作導(dǎo)航列表項分隔線*/
		li:after{content:"|";position:absolute;right:0;}
????????/*刪除第一項和最后一項導(dǎo)航分隔線*/
		li:last-child:after{display:none;}
		.nav?a,
		.nav?a:hover{
		??color:#fff;
		??text-decoration:?none;
		}

	</style>

反對回復(fù) 2016-05-12