-
三種思路:
1,設置2個盒子,分別是leftBox,rightBox,左右浮動
2,去掉左盒子 leftBox,直接加載一個img圖片,圖片設置左浮動,也能撐開左側。
3,去掉全部div盒子,只保留結構,達到最精簡目的。
使用{margin-left:-100px;float:left;}強行把圖片左移動出來。
使用div{margin-right:100px}
查看全部 -
<!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{margin-left:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 30px 20px;}
</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>
查看全部 -
html:結構
css:表現
javascript:行為
查看全部 -
網頁換膚,一個網頁一個結構多種CSS樣式,結構與表現分離
查看全部 -
結構與表現分離
查看全部 -
text-indent : 文本/文字縮進,允許使用負值
查看全部 -
網頁簡單布局
查看全部 -
再復雜的界面也是由這些小模塊組成的
查看全部 -
先按結構和語義編寫代碼
然后進行CSS樣式設置
減少HTML與CSS契合度
查看全部 -
網頁制作中 結構、表現、行為分離,其中 HTML 是結構,CSS是表現,javascript是行為
查看全部 -
text-indent : 文本縮進
查看全部 -
編寫HTML代碼:
先按結構和語義編寫代碼
然后進行CSS樣式設置
減少HTM和CSS契合度
查看全部 -
text-indent:585px;/*文本縮減*/
查看全部 -
當父元素的高度是靠子元素撐開的時候,子元素浮動時,則在父元素使用overflow: hidden可以清除浮動,使得父元素的高度依舊是靠子元素撐開。
當父元素自身設置了height屬性值,則在父元素使用overflow: hidden可以使子元素超出父元素的那部分隱藏。
查看全部 -
網頁中的每個元素都可以看作一個盒子,盒子有外邊距(margin)、邊框(border)、內邊距(padding)、內容(content)這4個屬性,所以它的寬高也是由這四個屬性的寬高構成的。
查看全部
舉報