-
#引用評論
1、img本身就是一個元素，也就是傳說中的盒子，它也是具有盒子的各種特性的；
2、img這個盒子是專門用來裝圖片的，它除了盒子的普通特性，還有一個特別的特性——使圖片變得和它的大小一樣，也可以說是變形；
3、如果你給加上別的盒子屬性，也會生效的，比如內邊距（padding）就是這樣，除了內邊距占據的空間，剩下的空間，還是會使圖片變形的。總之，它會讓圖片充滿它的內部空間。
查看全部 -
text-indent：200px 文本縮進
查看全部 -
網頁換膚：相同的html結構，不同的css樣式
查看全部 -
先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。
查看全部 -
先確定結構，從結構上去考慮，通過樣式去改變它的樣子
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>智熄</title>
<style type="text/css">
body? ?{margin:0;padding:0;}
.demo? {width:600px;position:relative;overflow:hidden;}
.demo .left{width:100px;float:left;}
.demo .left img {margin-left:20px;}
.demo .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}
.demo .right span {position:absolute;top:5px;right:5px;}
? ? ? ? /*? ? ? ? ? ? 初級? ? ? ? ? ? ? ? ? */
.demo02? {width:600px;position:relative;overflow:hidden;margin-top:5px;}
.demo02 img {float:left;margin-left:20px;}
.demo02 .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}
.demo02 .right span {position:absolute;top:5px;right:5px;}
? ? ? ? /*? ? ? ? ? ? ? ? ?中級? ? ? ? ? ? ? ? ?*/
.demo03{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;text-indent:2em;margin-left:110px;margin-top:5px;position:relative;}
.demo03 img{float:left;margin:-20px 0 0 -116px;}
? ? ? ? .demo03 span{position:absolute;top:5px;right:5px;}
? ? ? ? /*? ? ? ? ? ? ? ? 高級? ? ? ? ? ? ? ? ? ? ? ? */
</style>
</head>
<body>
<div class="demo">
? ? ? ? <div class="left">
? ? ?? ? <img src="C:/Users/Administrator/Desktop/案例04 微博對話框/images/head01.jpg"/>
? ? ? ? </div>
? ? ? ? <div class="right">
? ? ? ? ?<h6>櫻桃小丸子</h6>
? ? ? ? ?<p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，2005年4月正式批準運營的遠程教育公共服務體系，為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
? ? ? ? ?<span>10分鐘前</span>
? ? ? ? </div>
</div>
? ? ?<!-- 。。。。。。。。。初級。。。。。。。。。。。 -->
<div class="demo02">
? ? ? ??
? ? ?? ? <img src="C:/Users/Administrator/Desktop/案例04 微博對話框/images/head01.jpg"/>
? ? ? ??
? ? ? ? <div class="right">
? ? ? ? ?<h6>櫻桃小丸子</h6>
? ? ? ? ?<p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，2005年4月正式批準運營的遠程教育公共服務體系，為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
? ? ? ? ?<span>10分鐘前</span>
? ? ? ? </div>
</div>
?<!-- 。。。。。。。。。中級。。。。。。。。。。。 -->
? ? <div class="demo03">
? ? ?<img src="C:/Users/Administrator/Desktop/案例04 微博對話框/images/head01.jpg"/>
? ? ?<h6>櫻桃小丸子</h6>
? ? ? ? ?<p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，2005年4月正式批準運營的遠程教育公共服務體系，為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、報名、學習輔導、課程考試、交費等7X24小時學習支持服務400-810-6736。</p>
? ? ? ? ?<span>10分鐘前</span>
? ? </div>
? ? ?<!-- 。。。。。。。。。高級。。。。。。。。。。。 -->
</body>
</html>
查看全部 -
在網頁制作中，面對設計圖，網頁制作人員一般要遵循的原則是什么？
先考慮設計圖中的文字內容和內容模塊之間的關系，重點放在編寫html結構和語義化，然后考慮布局和表現形式。查看全部 -
三種思想
查看全部 -
text-indent文本縮進查看全部
-
把原本圖片的盒子撐開使用內邊距,box不再是圖片的大小,從而能夠顯示出背景的圖片,再將外部邊距調整即可查看全部
-
思路！查看全部
-
text-indent：文本縮進，可用于文本定位查看全部
-
思路圖查看全部
-
定位文本可用 ：text-indent ：文本縮進查看全部
-
網頁換膚: 相同的html結構，不同的css樣式。查看全部
舉報