課程
/前端開發
/HTML/CSS
/十天精通CSS3
這種效果是通過什么設計的?
2017-03-19
源自:十天精通CSS3 1-1
正在回答
我隨便寫來練手的 不難哦? 只要你HTML+CSS學會了就很簡單的
<style>?? ??? ??? ?*{?? ??? ??? ??? ?margin: 0;?? ??? ??? ?}?? ??? ??? ??? ??? ??? ?.nav{?? ??? ??? ??? ??? ??? ??? ??? ?list-style: none;?? ??? ??? ??? ?width: 700px;?? ??? ??? ??? ?height: 50px;?? ??? ??? ??? ?margin: 20px auto;?? ??? ??? ??? ?background: pink;?? ??? ??? ??? ?border-radius: 10px;?? ??? ??? ??? ?box-shadow: 0 5px 5px #4D555D;?? ??? ??? ??? ??? ??? ??? ?}?? ??? ??? ?.nav li{?? ??? ??? ??? ?position: relative;?? ??? ??? ??? ?top: 15px;?? ??? ??? ??? ?left: 2px;?? ??? ??? ??? ?padding:0 20px;?? ??? ??? ??? ?float: left;?? ??? ??? ??? ?text-align: center;?? ??? ??? ??? ?border-right: 1px solid #AAAE83;?? ??? ??? ?}?? ??? ??? ?.nav a{?? ??? ??? ??? ?text-decoration: none;?? ??? ??? ??? ?font: 16px/16px "微軟雅黑";?? ??? ??? ??? ?color: #fff;?? ??? ??? ??? ?font-weight: 800;?? ??? ??? ??? ?text-shadow: 1px 1px 1px #00C8C8;?? ??? ??? ?}?? ??? ??? ?.nav li:nth-of-type(6){?? ??? ??? ??? ?border: none;?? ??? ??? ?}?? ??? ?</style>?? ?</head>?? ?<body>?? ??? ?<ul class="nav">?? ??? ??? ?<li><a href="">Home</a></li>?? ??? ??? ?<li><a href="">About Me</a></li>?? ??? ??? ?<li><a href="">Portfolio</a></li>?? ??? ??? ?<li><a href="">Blog</a></li>?? ??? ??? ?<li><a href="">Resources</a></li>?? ??? ??? ?<li><a href="">Contact Me</a></li>?? ??? ?</ul>?? ?</body>
好,謝謝幫忙,我試試。
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答?我想知道為什么設置line-height為100px?
3 回答我想知道這堆代碼是怎么想出來的啊,從psd測量嗎
1 回答不知道怎樣做出導航分割線
3 回答字體的路徑怎麼知道的?
2 回答Responsive設計
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-03-19
我隨便寫來練手的 不難哦? 只要你HTML+CSS學會了就很簡單的
<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.nav{
?? ??? ??? ??? ?
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?width: 700px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?margin: 20px auto;
?? ??? ??? ??? ?background: pink;
?? ??? ??? ??? ?border-radius: 10px;
?? ??? ??? ??? ?box-shadow: 0 5px 5px #4D555D;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.nav li{
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?top: 15px;
?? ??? ??? ??? ?left: 2px;
?? ??? ??? ??? ?padding:0 20px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?border-right: 1px solid #AAAE83;
?? ??? ??? ?}
?? ??? ??? ?.nav a{
?? ??? ??? ??? ?text-decoration: none;
?? ??? ??? ??? ?font: 16px/16px "微軟雅黑";
?? ??? ??? ??? ?color: #fff;
?? ??? ??? ??? ?font-weight: 800;
?? ??? ??? ??? ?text-shadow: 1px 1px 1px #00C8C8;
?? ??? ??? ?}
?? ??? ??? ?.nav li:nth-of-type(6){
?? ??? ??? ??? ?border: none;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<ul class="nav">
?? ??? ??? ?<li><a href="">Home</a></li>
?? ??? ??? ?<li><a href="">About Me</a></li>
?? ??? ??? ?<li><a href="">Portfolio</a></li>
?? ??? ??? ?<li><a href="">Blog</a></li>
?? ??? ??? ?<li><a href="">Resources</a></li>
?? ??? ??? ?<li><a href="">Contact Me</a></li>
?? ??? ?</ul>
?? ?</body>
2017-03-20
好,謝謝幫忙,我試試。