亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

網頁簡單布局之結構與表現原則

江老實 Web前端工程師
難度初級
時長22分
學習人數
綜合評分9.67
1416人評價 查看評價
9.8 內容實用
9.7 簡潔易懂
9.5 邏輯清晰
  • #引用評論

    1、img本身就是一個元素,也就是傳說中的盒子,它也是具有盒子的各種特性的;
    2、img這個盒子是專門用來裝圖片的,它除了盒子的普通特性,還有一個特別的特性——使圖片變得和它的大小一樣,也可以說是變形;
    3、如果你給加上別的盒子屬性,也會生效的,比如內邊距(padding)就是這樣,除了內邊距占據的空間,剩下的空間,還是會使圖片變形的。

    總之,它會讓圖片充滿它的內部空間。

    查看全部
    0 采集 收起 來源:編程挑戰

    2018-05-20

  • text-indent:200px 文本縮進

    查看全部
  • 網頁換膚:相同的html結構,不同的css樣式

    查看全部
    0 采集 收起 來源:練習題

    2018-05-16

  • 先考慮設計圖中的文字內容和內容模塊之間的關系,重點放在編寫html結構和語義化,然后考慮布局和表現形式。

    查看全部
    0 采集 收起 來源:練習題

    2018-05-16

  • 先確定結構,從結構上去考慮,通過樣式去改變它的樣子


    查看全部
  • <!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結構和語義化,然后考慮布局和表現形式。
    查看全部
    0 采集 收起 來源:練習題

    2018-04-17

  • 三種思想

    查看全部
  • text-indent文本縮進
    查看全部
  • 把原本圖片的盒子撐開使用內邊距,box不再是圖片的大小,從而能夠顯示出背景的圖片,再將外部邊距調整即可
    查看全部
    0 采集 收起 來源:編程挑戰

    2018-03-03

  • 思路!
    查看全部
  • text-indent:文本縮進,可用于文本定位
    查看全部
  • 思路圖
    查看全部
  • 定位文本可用 :text-indent :文本縮進
    查看全部
  • 網頁換膚: 相同的html結構,不同的css樣式。
    查看全部
    0 采集 收起 來源:練習題

    2018-01-24

舉報

0/150
提交
取消
課程須知
1.html+css簡單的基礎知識 2.有網頁制作實戰經驗
老師告訴你能學到什么?
1.根據效果圖能正確分解結構和表現 2. 能夠深入理解網頁結構與表現分離的思想

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!