課程
/前端開發
/HTML/CSS
/從 psd 到 html
先不說行內元素里面嵌套塊元素的問題，menu里面的灰色橫線不是固定長度的啊啊啊啊？
2016-07-17
源自：從 psd 到 html 4-3
正在回答
.menu-item{
float: left;
width: 520px;
height: 40px;
position: relative;
}
.menu-item .title{
position: absolute;
left: 0;
padding-right: 10px;
background: #fff;
z-index: 10;
.menu-item .line{
border-top:1px solid #E2E1E1 ;
width: 100%;
top: 12px;
z-index: 1;
.menu-item .price{
right: 0;
width: 98px;
text-align: center;
color: #555555;font-size: 16px;
如果樓主跟我一樣發現原PSD里和視頻里的橫線效果壓根不一樣,視頻里是定長,而PSD里沒有定長這個意思嗎?
解決方法很簡單,menu-item設為relative,line設為100%長度,price和menu-title設為absolute然后定長寬再定位到左右.
這樣最后的效果就是line的長度撐滿整個父元素,但是會被price和menu-title兩個塊給擋住一部分,最后看起來就是line不定長.
<!--?HTML?給它一個line類??這是那根線?--> ??????????????<div?class="line"></div> /*?CSS?給它一個width屬性就好了?（.index-menu?.menu-item?是上層標簽的類）*/ ????.index-menu?.menu-item?.line{ ??????????margin-top:?12px; ??????????width:?150px; ??????????border-top:?2px?solid?#ccc; ????}
舉報
教你把PSD設計稿轉化成HTML，用案例來講解基本流程
1 回答腳部設置文字頂部下移的時候，老師是在盒子模型里，用padding-top和height控制的，和直接在footer-col里面寫margin-top控制有什么不同嗎，這兩種寫法哪種更好？
3 回答能詳細講解一下為什么要用clearFloat么?
2 回答我有個問題?。?！
1 回答老師你好，有代碼文件嗎？我想對照一下。
1 回答index-panel的margin-top 我也遇到無效的問題 為什么老師的有效？是position到時margin-top失效吧？ margin-top改用top呢
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-01-22
.menu-item{
float: left;
width: 520px;
height: 40px;
position: relative;
}
.menu-item .title{
position: absolute;
left: 0;
padding-right: 10px;
background: #fff;
z-index: 10;
}
.menu-item .line{
border-top:1px solid #E2E1E1 ;
width: 100%;
position: absolute;
top: 12px;
z-index: 1;
}
.menu-item .price{
position: absolute;
right: 0;
height: 40px;
width: 98px;
text-align: center;
color: #555555;font-size: 16px;
background: #fff;
z-index: 10;
}
2016-10-20
如果樓主跟我一樣發現原PSD里和視頻里的橫線效果壓根不一樣,視頻里是定長,而PSD里沒有定長這個意思嗎?
解決方法很簡單,menu-item設為relative,line設為100%長度,price和menu-title設為absolute然后定長寬再定位到左右.
這樣最后的效果就是line的長度撐滿整個父元素,但是會被price和menu-title兩個塊給擋住一部分,最后看起來就是line不定長.
2016-07-20
<!--?HTML?給它一個line類??這是那根線?--> ??????????????<div?class="line"></div> /*?CSS?給它一個width屬性就好了?（.index-menu?.menu-item?是上層標簽的類）*/ ????.index-menu?.menu-item?.line{ ??????????margin-top:?12px; ??????????width:?150px; ??????????border-top:?2px?solid?#ccc; ????}