-
先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。
查看全部 -
結構 表現 分離
先編寫html結構布局樣式，不用管css樣式。布局完成之后再考慮css樣式。
先不用管樣式
查看全部 -
?網頁原則：先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。
查看全部 -
1.先按結構和語意編寫。
2.再進行樣式設定。
3.最終減少html 和css的契合度。
查看全部 -
3-3編程挑戰
完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片背景</title>
<style type="text/css">
body{ margin:0;}
div{background:#460E29;width:700px;padding:20px}
img{width:95px;height:95px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;margin-right:10px;}
</style>
</head>
<body>
<div><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
? ? <img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> </div>
</body>
</html>
查看全部 -
增加樣式3
查看全部 -
增加樣式2
查看全部 -
增加樣式２
查看全部 -
增加樣式１
查看全部 -
原始樣式２
查看全部 -
原始樣式１
查看全部 -
設計思路
結構語義
減少html和css契合度
css樣式設計
查看全部 -
先不考慮樣式，只考慮內容；
寫完結構，再使用css調整。
減少div的使用
查看全部 -
利用margin:-25px 0 50px 0;來移動h6
查看全部 -
文字部分，少用html代碼，多用css進行處理
text-indent:100px;? 文字后退100px
text-align:right; 文字居右對齊；
line-height:30px; 文字居中對齊；
查看全部
舉報