作者forkome (初心者)
看板Web_Design
标题Re: [讨论] 鸿海的五零高手选秀
时间Fri Apr 11 16:50:07 2014
请教一下这题，有人知道怎麽做到图片放在字的上方吗？小弟试了好久，没招了QQ
<section class='sale-item'>
<p>「TQC+ 电脑绘图设计认证 Illustrator CS6」，系为TQC+ 视传设计领
域之电脑绘图设计认证能力监定，以实务操作方式进行认证，评核符合企业需求的新时代
专业设计人才。亦为考核「平面设计专业人员」与「Flash动画设计专业人员」必备专业
技能之一。</p>
<img src='images/AEY028900S.jpg'
alt='TQC+ 电脑绘图设计认证 Illustrator CS6'>
</section>
‧方法要使用CSS
#deals {
display: flex;
}
.sale-item {
word-wrap: break-word;
word-break: break-all;
width:200px;
margin:10px;
padding:5px;
background-color:#b7b1b1;
border-radius:10px;
}
.sale-item > img {
display: block;
margin:0 auto;
box-shadow:3px 2px 5px #808080;
}
※ 引述《hans5300609 (屏商院资工系xD)》之铭言：
: 主办单位：
: 台北市电脑商业同业公会
: 鸿海精密工业股份有限公司
: 协办单位：财团法人电脑技能基金会(TQC)
: http://www.tqcplus.org.tw/ict50/method.aspx
: 选秀试题：
: 「HTML5技能指标WPDSS (Webpage Program Design Skill Standards)」进行选秀评量。
: 规范内容与范例试题下载：http://www.tqcplus.org.tw/ict50/examSample.aspx
: 鸿海找TQC办这个到底是找人才还是打广告呢?
: 还是说跟鸿海加入4G电信业有关??
: 上面还有没答案的范例试题
: 不过大部分我都不会(掩面
: 顺便问一下ICT产业是什麽?
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 219.87.161.130
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1397206210.A.757.html
※ 编辑: forkome (219.87.161.130), 04/11/2014 16:55:30
※ 编辑: forkome (219.87.161.130), 04/11/2014 17:15:02
※ 编辑: forkome (219.87.161.130), 04/11/2014 17:15:25
1F：→ RedMapleWing:下面css是给死的还是可以自己打？ 04/11 18:00
2F：→ RedMapleWing:可以自己打的话，p跟img的position都设absolute 04/11 18:00
3F：→ RedMapleWing:然後一个设img设top:0，p设bottom:0应该可以 04/11 18:01
4F：→ RedMapleWing:但section应该要设死高 04/11 18:01
5F：→ mmis1000:img设 transform:translate(0px,-25px) 就会压在字上了 04/11 18:52
6F：推 geniuswen:float the img 04/12 11:39
7F：推 hans5300609:其实这题是用flex box，只要img设定order:-1就可以了 04/13 12:10
8F：→ hans5300609:解答by讲师 (学校请人来准备考这个...但应该无用) 04/13 12:12
9F：推 hans5300609:DOFI Lab 罗老师 这样www 04/13 12:16
10F：→ forkome:absolute虽然可以移动，但图移上去後，下方空间不会缩 04/15 08:16
11F：→ forkome:试出来了.sale-item设display:flex;flex-direction:column 04/15 08:44
12F：→ forkome:.sale-item > img设 order:-1; 04/15 08:44