[綜合]無題

[綜合]無題無名 ID:f39RN/hE 2019/10/15(二) 21:10:09.088 No.16315998

評分：-1, 年：-1, 月：-1, 週：-1, 日：-1, [+1 / -1] 最後更新：2022-08-06 05:38:34

安安各位大大下面是我的程式
https://codepen.io/rowayne/pen/oNNxamG
請問我要怎麼讓顏色填滿
要做到這種效果
https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4396/pasted_image_0__1_.png

無題無名 ID:jk/E6/Z2 2019/10/15(二) 21:13:19.882 No.16316036

回覆: >>16316051 >>16316077

//width:1000px;

無題無名 ID:IioKvhqY 2019/10/15(二) 21:14:29.175 No.16316048

>>16315998
放你的照片

無題無名 ID:f39RN/hE 2019/10/15(二) 21:14:39.261 No.16316051

>>16316036
可是達不到下面那張圖的要求阿

無題無名 ID:f39RN/hE 2019/10/15(二) 21:16:42.813 No.16316077

回覆: >>16316135

>>16316036
真的拿去放在網頁上的時候卻顯示成這樣
https://cdpn.io/rowayne/debug/oNNxamG/gaAeYzpxEWKA

無題無名 ID:xKYphN1E 2019/10/15(二) 21:19:31.376 No.16316115

窩看看，尼應該素設定了一些多餘的參數導致顯示出現問題，窩調整測試丸再棍泥縮

無題無名 ID:b7pSRSzU 2019/10/15(二) 21:19:47.238 No.16316117

沒在框架裡面當然突破天際==

無題無名 ID:Aqv5uDdY 2019/10/15(二) 21:20:44.722 No.16316135

>>16316077
你用F12看一下你NAV的範圍就知道了吧

無題無名 ID:oKaHYozc 2019/10/15(二) 21:27:04.688 No.16316221

nav的寬改100%
ul的margin改0
然後CSS就說CSS或網頁就好，去外面不要用程式這個詞= =

無題無名 ID:xKYphN1E 2019/10/15(二) 21:30:12.343 No.16316254

回覆: >>16316388

>>16315998
[aa]
#nav{
background-color:#78bdca;
height:50px;
width:1000px;
}
[/aa]

首先這段，泥鋪應該設定height以及width

應為泥的nav-menu應該是要跟著內容物一起變大兜，應此調整為
[aa]
#nav{
background-color:#78bdca;
}
[/aa]
//-------
接著另一鍋問題就比較底層了，鳩素為什麼噗會滿版，
原因是ul元素，預設會有一鍋margin
因此要將它去除，蔗樣糾正常囉。

[aa]
ul.menu{
margin:0px;
}
[/aa]

無題無名 ID:xKYphN1E 2019/10/15(二) 21:42:08.460 No.16316388

>>16316254
最後給泥一鍋建議兜寫法，現在bootstrap也素類素兜命名原則。
[aa]
<div class='border-black border-2 background-color-main'>
<ul class="d-flex padding-10 list-style-none margin-0 align-items-end">
<li class='padding-10 border-white border-2'><a class="color-white" href="#">Who am I</a></li>
<li class='margin-left-10 padding-10 border-white border-2'><a class="color-white" href="#">My Work</a></li>
<li class='margin-left-10 padding-10 border-white border-2'><a class="color-white" href="#">Contact me</a></li>
</ul>
</div>
[/aa]

[aa]

.background-color-main{
background-color:#78bdca;
}
.align-items-end{
justify-content:flex-end;
}
.d-flex{
display:flex;
}
.list-style-none{
list-style:none;
}
.margin-0{
margin:0px;
}
.color-white{
color:white;
}
.border-2
{
border: 2px solid;
}
.border-white{
border-color:white;
}
.border-black{
border-color:black;
}
.padding-10
{
padding:10px;
}
.margin-left-10
{
margin-left:10px;
}

[/aa]

//----
然後建議直接熟悉bootstrap鳩豪囉。
htps://getbootstrap.com/docs/4.3/components/navs/

測試兜畫記得用F12開發者工具了解設定喔，做畫面調整時很方便喔

無題無名 ID:.3L/2vpU 2019/10/15(二) 21:51:34.658 No.16316507

>>16315998
這樣?
https://codepen.io/ypaxopowo/pen/vYYGvdL