課程
/前端開發(fā)
/HTML/CSS
/網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則
這是怎么回事嗎，我代碼好像沒(méi)有寫錯(cuò)
2017-06-14
源自：網(wǎng)頁(yè)簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則 2-1
正在回答
demo02 magin-left 設(shè)置沒(méi)反應(yīng)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5,normal,"Arial","sans-serif","微軟雅黑","宋體"，"Tahoma";color:#666}
ul,ol{
list-style: none;
}
.demo01{width: 600px;position: relative}
.demo01 .left{width:100px;float:left}
.demo01 .left img{margin-left: 20px}
.demo01 .right{width: 418px;padding:20px;float: right;background: #9cf;border:1px solid #ccc;margin-left: -100px}
.demo01 .right p{font-size: 12px;line-height: 25px;}
.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
.demo02{width: 600px;position: relative;overflow: hidden;}
.demo02 img{float:left;margin-left: 20px}
.demo02 .right{width: 418px;padding:20px;float: right;background: #9cf;border:1px solid #ccc}
.demo02 .right p{font-size: 12px;line-height: 25px;}
.demo02 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
</style>
</head>
<body>
<div class="demo02">
? ?<div class="left">
? ? ? <img src="images/1.png"/>
? ?</div>
? ?<div class="right">
? ?<h6>櫻桃小丸子</h6>
? ?<p>HTML5是未來(lái)10年引領(lǐng)Web持續(xù)發(fā)展的核心標(biāo)準(zhǔn)。強(qiáng)大的HTML5，不僅可以用來(lái)開發(fā)傳統(tǒng)網(wǎng)頁(yè)，還可以用來(lái)開發(fā)運(yùn)行在iOS、Android設(shè)備 上的應(yīng)用，更可以用來(lái)開發(fā)Web游戲。
? ? ? ? 即將拉開帷幕的“HTML5校園行”，由360瀏覽器聯(lián)合W3C中國(guó)（萬(wàn)維網(wǎng)聯(lián)盟組織）共同舉辦，旨在通過(guò)本次活動(dòng)，讓廣大在校同學(xué)了解支撐行業(yè)現(xiàn)狀及引領(lǐng)未來(lái)趨勢(shì)的最前沿的技術(shù)，基于前瞻性眼光，提前做好知識(shí)和技能儲(chǔ)備，得以緊跟時(shí)代潮流，把握就業(yè)先機(jī)！</p>
? ? ? ? <span>10分鐘之前</span>
?</div>
?<div class="demo02">
?
</body>
</html>
已解決，還要寫margin-left:-100px
舉報(bào)
入門必殺技之結(jié)構(gòu)與表現(xiàn)相分離，課程會(huì)有3個(gè)案例，不同角度講解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-08-05
demo02 magin-left 設(shè)置沒(méi)反應(yīng)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5,normal,"Arial","sans-serif","微軟雅黑","宋體"，"Tahoma";color:#666}
ul,ol{
list-style: none;
}
.demo01{width: 600px;position: relative}
.demo01 .left{width:100px;float:left}
.demo01 .left img{margin-left: 20px}
.demo01 .right{width: 418px;padding:20px;float: right;background: #9cf;border:1px solid #ccc;margin-left: -100px}
.demo01 .right p{font-size: 12px;line-height: 25px;}
.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
.demo02{width: 600px;position: relative;overflow: hidden;}
.demo02 img{float:left;margin-left: 20px}
.demo02 .right{width: 418px;padding:20px;float: right;background: #9cf;border:1px solid #ccc}
.demo02 .right p{font-size: 12px;line-height: 25px;}
.demo02 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
</style>
</head>
<body>
<div class="demo02">
? ?<div class="left">
? ? ? <img src="images/1.png"/>
? ?</div>
? ?<div class="right">
? ?<h6>櫻桃小丸子</h6>
? ?<p>HTML5是未來(lái)10年引領(lǐng)Web持續(xù)發(fā)展的核心標(biāo)準(zhǔn)。強(qiáng)大的HTML5，不僅可以用來(lái)開發(fā)傳統(tǒng)網(wǎng)頁(yè)，還可以用來(lái)開發(fā)運(yùn)行在iOS、Android設(shè)備 上的應(yīng)用，更可以用來(lái)開發(fā)Web游戲。
? ? ? ? 即將拉開帷幕的“HTML5校園行”，由360瀏覽器聯(lián)合W3C中國(guó)（萬(wàn)維網(wǎng)聯(lián)盟組織）共同舉辦，旨在通過(guò)本次活動(dòng)，讓廣大在校同學(xué)了解支撐行業(yè)現(xiàn)狀及引領(lǐng)未來(lái)趨勢(shì)的最前沿的技術(shù)，基于前瞻性眼光，提前做好知識(shí)和技能儲(chǔ)備，得以緊跟時(shí)代潮流，把握就業(yè)先機(jī)！</p>
? ? ? ? <span>10分鐘之前</span>
? ?</div>
?</div>
?<div class="demo02">
?
? ? ? <img src="images/1.png"/>
? ?<div class="right">
? ?<h6>櫻桃小丸子</h6>
? ?<p>HTML5是未來(lái)10年引領(lǐng)Web持續(xù)發(fā)展的核心標(biāo)準(zhǔn)。強(qiáng)大的HTML5，不僅可以用來(lái)開發(fā)傳統(tǒng)網(wǎng)頁(yè)，還可以用來(lái)開發(fā)運(yùn)行在iOS、Android設(shè)備 上的應(yīng)用，更可以用來(lái)開發(fā)Web游戲。
? ? ? ? 即將拉開帷幕的“HTML5校園行”，由360瀏覽器聯(lián)合W3C中國(guó)（萬(wàn)維網(wǎng)聯(lián)盟組織）共同舉辦，旨在通過(guò)本次活動(dòng)，讓廣大在校同學(xué)了解支撐行業(yè)現(xiàn)狀及引領(lǐng)未來(lái)趨勢(shì)的最前沿的技術(shù)，基于前瞻性眼光，提前做好知識(shí)和技能儲(chǔ)備，得以緊跟時(shí)代潮流，把握就業(yè)先機(jī)！</p>
? ? ? ? <span>10分鐘之前</span>
? ?</div>
?</div>
</body>
</html>
2017-06-14
已解決，還要寫margin-left:-100px