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

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

從 psd 到 html

黑白豬 Web前端工程師
難度初級
時長 1小時51分
學習人數
綜合評分9.63
432人評價 查看評價
9.9 內容實用
9.6 簡潔易懂
9.4 邏輯清晰

  • 按鈕ctrl + alt 來放大圖片

    查看全部

  • 1、黃色的小星星，放到新建的畫布里去。 2、圖像，畫布大小，向下加同樣大的高度。 3、畫布背景換成紅色。 4、把灰色的星星直接拖過來。 5、上下箭頭可以調灰色星星的位置。 6、畫布的小眼睛不要，背景就是透明的了。https://img1.sycdn.imooc.com//5c2b41d8000198f411420718.jpg

    查看全部
    0 采集 收起 來源：tab切換

    2019-01-01

  • 一個基本的文檔建立結構

    1. index.html? ?????首頁

    2. images ——存放圖片

    3. js? ——交互效果

    4. css?????外鏈樣式

    查看全部

  • 塊級元素下都是塊級元素或者內聯元素

    查看全部

  • PS操作：

    1.選中框選區域，按F8查看區域信息。

    查看全部

    • CSS與HTML代碼配合

    • CSS命名和HTML標簽結構應用

    • 如何用好Photoshop去審視一個設計稿

    • 瀏覽器兼容性

    查看全部

  • PS中

    放大鏡：Ctrl + Alt + 滾動輪

    查看全部

  • *margin：20px? ? 加了*表示只在ie7下這樣顯示

    查看全部
    0 采集 收起 來源：兼容2

    2018-10-31

  • font-size：0；因為行內元素本身有默認間距，添加后可以解決inline元素間的空白間隙

    查看全部
    0 采集 收起 來源：主體pannel結構

    2018-10-31

  • index.css? ?.index-menu .menu-list ul{

    ? ? ? ? ? ? ? ? ? ? ?width:1160px;

    ? ? ? ? ? ? ? ? ? ? ? ? ?}

    本來是1100px，表面多了60px，但是這樣方便循環輸出，是一個布局的小技巧。

    查看全部
    1 采集 收起 來源：menu

    2018-10-31

  • 課程代碼

    index.html

    <!DOCTYPE?html>
<html>
??<head>
????<meta?charset="UTF-8">
????<title>從PSD轉化為HTML</title>
????<link?rel="stylesheet"?href="css/reset.css"?/>
????<link?rel="stylesheet"?href="css/common.css"?/>
????<link?rel="stylesheet"?href="css/index.css"?/>
??</head>
??<body>
??<div?class="box">
????<!--頭部區-->
????<div?class="public-header">
??????<div?class="public-container?clearfloat">
????????<div?class="header-logo">
??????????<a?href="#"></a>
????????</div>
????????<ul?class="header-nav?clearfloat">
??????????<li?class="item">
????????????<a?href="#">Our?Story</a>
??????????</li>
??????????<li?class="item">
????????????<a?href="#">Menu</a>
??????????</li>
??????????<li?class="item">
????????????<a?href="#">Reservations</a>
??????????</li>
??????????<li?class="item">
????????????<a?href="#">News</a>
??????????</li>
??????????<li?class="item">
????????????<a?href="#">Rviews</a>
??????????</li>
????????</ul>
??????</div>
????</div>
????<!--廣告區-->
????<div?class="index-banner">
??????<div?class="index-banner-bg?public-container">
????????<img?src="img/demo1.png"?alt="banner"?/>
??????</div>
??????<div?class="index-banner-text">
????????<div?class="text-logo"></div>
????????<p?class="text-info">
??????????<i?class="line?line-l"></i>
??????????<span?class="txt">resto?restaurant?home?page?website?template</span>
??????????<i?class="line?line-r"></i>
????????</p>
??????</div>
????</div>
????<!--menu區-->
????<div?class="index-menu">
??????<div?class="menu-tips">The?Menu</div>
??????<div?class="public-container?menu-list">
????????<ul?class="clearfloat">
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Voluptate?cillum?fugiat.</h4>
??????????????<p?class="comment">Cheese,Tomato,Mushrooms,Onions.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$50</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Arcu?pede?enim?justo.</h4>
??????????????<p?class="comment">Tuna,?Sweetcorn,?Cheese.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$45</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Metus?varius?laoreet.</h4>
??????????????<p?class="comment">Chicken,?mozzarella?cheese,?onions.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$62</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Cras?dapibussemper?nisi.</h4>
??????????????<p?class="comment">Pineapple,?Minced?Beef,?Cheese.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$32</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Donec?sodales?magna.</h4>
??????????????<p?class="comment">Tuna,?Sweetcorn,?Cheese.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$25</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Quam?semper?libero.</h4>
??????????????<p?class="comment">Cheese,?tomato,?mushrooms,?onions.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$15</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Saugue?velit?cursus.</h4>
??????????????<p?class="comment">Pineapple,?Minced?Beef,?Cheese.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$30</div>
??????????</li>
??????????<li?class="menu-item?clearfloat">
????????????<a?href="#"?class="title">
??????????????<h4>Nam?eget?dui?Etiam.</h4>
??????????????<p?class="comment">Chicken,?mozzarella?cheese,?onions.</p>
????????????</a>
????????????<div?class="line"></div>
????????????<div?class="price">$35</div>
??????????</li>
????????</ul>
??????</div>
??????<a?href="#"?class="menu-more-btn">
????????<span>load?more</span>
????????<span>|</span>
????????<span?class="icon"></span>
??????</a>
????</div>
????<!--菜單區一-->
????<div?class="public-container?index-panel">
??????<div?class="index-panel-header?clearfloat">
????????<h3>FEATURED?DISHES</h3>
????????<div?class="line"></div>
????????<div?class="btn-group">
??????????<a?href="#"?class="btn?active"></a>
??????????<a?href="#"?class="btn"></a>
??????????<a?href="#"?class="btn"></a>
??????????<a?href="#"?class="btn"></a>
????????</div>
??????</div>
??????<div?class="index-panel-body?index-food-list">
????????<ul?class="clearfloat">
??????????<li?class="food-item">
????????????<a?href="#">
??????????????<img?class="banner"?src="img/demo2.png"?/>
??????????????<div?class="name">
????????????????<span>Fugiat?nulla?sint</span>
????????????????<span?class="price">$30</span>
??????????????</div>
??????????????<div?class="star-bar">
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star?nostar"></span>
??????????????</div>
????????????</a>
??????????</li>
??????????<li?class="food-item">
????????????<a?href="#">
??????????????<img?class="banner"?src="img/demo22.png"?/>
??????????????<div?class="name">
????????????????<span>Daute?irure?dolor</span>
????????????????<span?class="price">$24</span>
??????????????</div>
??????????????<div?class="star-bar">
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star?nostar"></span>
??????????????</div>
????????????</a>
??????????</li>
??????????<li?class="food-item">
????????????<a?href="#">
??????????????<img?class="banner"?src="img/demo23.png"?/>
??????????????<div?class="name">
????????????????<span>Officia?deserunt?mollit</span>
????????????????<span?class="price">$60</span>
??????????????</div>
??????????????<div?class="star-bar">
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star?nostar"></span>
??????????????</div>
????????????</a>
??????????</li>
??????????<li?class="food-item">
????????????<a?href="#">
??????????????<img?class="banner"?src="img/demo24.png"?/>
??????????????<div?class="name">
????????????????<span>Pim?minim?veniam</span>
????????????????<span?class="price">$17</span>
??????????????</div>
??????????????<div?class="star-bar">
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star"></span>
????????????????<span?class="star?nostar"></span>
??????????????</div>
????????????</a>
??????????</li>
????????</ul>
??????</div>
????</div>
????<!--菜單區二-->
????<div?class="public-container?index-panel">
??????<div?class="index-panel-header?clearfloat">
????????<h3>THE?GALLERY</h3>
????????<div?class="line"></div>
????????<div?class="btn-group">
??????????<a?href="#"?class="btn?active"></a>
??????????<a?href="#"?class="btn"></a>
??????????<a?href="#"?class="btn"></a>
??????????<a?href="#"?class="btn"></a>
????????</div>
??????</div>
??????<div?class="index-panel-body?index-pics?clearfloat">
????????<a?href="#"?class="pic-col?pic-col-m">
??????????<img?src="img/demo3.png"?alt="美食"?/>
????????</a>
????????<div?class="pic-col?pic-col-s">
??????????<a?class="pic-row"><img?src="img/demo4.png"?alt=""?/></a>
??????????<a?class="pic-row"><img?src="img/demo5.png"?alt=""?/></a>
????????</div>
????????<a?href="#"?class="pic-col?pic-col-l">
??????????<img?src="img/demo6.png"?alt=""?/>
????????</a>
??????</div>
????</div>
????<!--尾部區-->
????<div?class="public-footer">
??????<div?class="public-container">
????????<div?class="footer-col">
??????????<p>New?York?Restaurant<br>3926?Anmoore?Road<br>New?York,?NY?10014<br>
????????????<a?href="tel:718-749-1714">718-749-1714</a>
??????????</p>
????????</div>
????????<div?class="footer-col">
??????????<p>France?Restaurant<br>68,?rue?de?la?Couronne<br>75002?PARIS<br>02.94.23.69.56</p>
????????</div>
????????<div?class="footer-col">
??????????<a?href="#">Blog</a>
??????????<a?href="#">Careers</a>
??????????<a?href="#">Privacy?Policy</a>
??????????<a?href="#">Contact</a>
????????</div>
????????<div?class="footer-col">
??????????<div?class="footer-logo"></div>
??????????<div?class="footer-info">&copy;All?Rights?Reserved?2018.<br>Find?More?at?PixelHint.com</div>
????????</div>
??????</div>
????</div>
????</div>
??</body>
</html>

    reset.css

    body,?div,?dl,?dt,?dd,?ul,?li,?h1,?h2,?h3,?h4,?h5,?h6,?input,?form,?a,?p,?textarea?{
??margin:?0;
??padding:?0;
??font-family:?helvetica;
}
ul,?ol,?li?{
??list-style:?none;
}
a?{
??text-decoration:?none;
??color:?#fff;
??display:?block;
}
img?{
??border:?none;
??display:?block;
}
.clearfloat?{
??zoom:?1;
}
.clearfloat:after?{
??display:?block;
??clear:?both;
??content:?"";
??visibility:?hidden;
??height:?0;
}

    common.css

    .box?{
??min-width:?1160px;
}
.public-header?{
??height:?110px;
}
.public-header?.header-logo?{
??float:?left;
??margin-top:?40px;
}
.public-header?.header-logo?a?{
??height:?54px;
??width:?182px;
??background:?url("../img/index-header-logo.png")?no-repeat;
}
.public-header?.header-nav?{
??float:?right;
??font-size:?14px;
}
.public-header?.header-nav?.item?{
??float:?left;
??margin-top:?44px;
??margin-left:?50px;
}
.public-header?.header-nav?a?{
??color:?#3b3b3b;
}
.public-header?.header-nav?a:hover?{
??text-decoration:?underline;
}
.public-container?{
??position:?relative;
??margin:?0?auto;
??width:?1100px;
}
.public-footer?{
??height:?218px;
??margin-top:?200px;
??padding-top:?100px;
??background:?#3b3b3b;
}
.public-footer?.footer-col?{
??width:?230px;
??float:?left;
??margin-right:?60px;
??font-size:?16px;
??color:?#FFFFFF;
??line-height:?1.8;
}
.public-footer?.footer-col:last-child?{
??margin-right:?0;
}
.public-footer?.footer-logo?{
??width:?182px;
??height:?55px;
??margin-top:?-10px;
??margin-bottom:?10px;
??background:?url("../img/index-footer-logo.png")?no-repeat;
}

    index.css

    /*廣告區*/
.index-banner?{
??position:?relative;
??background:?rgba(0,?0,?0,?.1);
}
.index-banner-bg?{
??height:?565px;
??overflow:?hidden;
}
.index-banner-bg?img?{
??margin:?0?auto;
}
.index-banner-text?{
??position:?absolute;
??top:?200px;
??left:?50%;
??margin-left:?-388px;
}
.index-banner-text?.text-logo?{
??width:?776px;
??height:?117px;
??background:?url("../img/index-banner-text-logo.png")?no-repeat;
}
.index-banner-text?.text-info?{
??margin-top:?17px;
??text-align:?center;
??color:?#fff;
}
.index-banner-text?.text-info?.line?{
??display:?inline-block;
??width:?40px;
??border-top:?1px?solid?#fff;
??vertical-align:?middle;
}
.index-banner-text?.text-info?.txt?{
??margin:?0?26px;
}
/*menu區*/
.index-menu?{
??position:?relative;
??border-top:?4px?solid?#f34949;
}
.index-menu?.menu-tips?{
??position:?absolute;
??left:?50%;
??top:?0;
??margin-left:?-78px;
??width:?156px;
??height:?75px;
??text-align:?center;
??line-height:?65px;
??color:?#fff;
??background:?#f34949;
}
.index-menu?.menu-tips:after?{
??position:?absolute;
??content:?"";
??left:?0;
??bottom:?0;
??width:?0;
??height:?0;
??border-left:?78px?solid?transparent;
??border-right:?78px?solid?transparent;
??border-bottom:?10px?solid?#fff;
}
.index-menu?.menu-list?{
??margin-top:?150px;
??color:?#555;
??overflow:?hidden;
}
.index-menu?.menu-list?ul?{
??width:?1160px;
}
.index-menu?.menu-item?{
??float:?left;
??width:?520px;
??margin-right:?60px;
??margin-bottom:?56px;
??position:?relative;
}
.index-menu?.menu-item?.title,?.index-menu?.menu-item?.line,?{
??float:?left;
}
.index-menu?.menu-item?.price?{
??position:?absolute;
??top:?10px;
??right:?5px;
}
.index-menu?.menu-item?.title?{
??width:?230px;
??color:?#555;
??overflow:?hidden;
??white-space:?nowrap;
??text-overflow:?ellipsis;
}
.index-menu?.menu-item?.comment?{
??margin-top:?4px;
??color:?#b7b7b7;
??font-size:?12px;
}
.index-menu?.menu-item?.line?{
??margin-top:?10px;
??width:?192px;
??border-top:?1px?solid?#e3e1e1;
}
.index-menu?.menu-more-btn?{
??margin:?0?auto;
??width:?114px;
??height:?32px;
??padding-left:?16px;
??border:?1px?solid?#d7d5d5;
??font-size:?14px;
??line-height:?32px;
??color:?#b7b7b7;
}
.index-menu?.menu-more-btn?.icon?{
??display:?inline-block;
??width:?11px;
??height:?7px;
??margin-left:?10px;
??background:?url("../img/index-btn-icon.png")?no-repeat;
}
/*菜單區*/
.index-panel?{
??margin-top:?200px;
}
.index-panel-header?h3?{
??float:?left;
??margin-right:?48px;
??font-size:?20px;
??color:?#3b3b3b;
??font-weight:?normal;
}
.index-panel-header?.line?{
??float:?left;
??margin-top:?10px;
??width:?200px;
??border-top:?1px?solid?#e5e3e3;
}
.index-panel-header?.btn-group?{
??font-size:?0;
??float:?right;
}
.index-panel-header?.btn?{
??display:?inline-block;
??margin-left:?11px;
??width:?9px;
??height:?9px;
??background:?#dedede;
??border-radius:?50%;
}
.index-panel-header?.active?{
??background:?#9b9b9b;
}
.index-panel-body?{
??margin-top:?75px;
}
.index-food-list?{
??overflow:?hidden;
}
.index-food-list?ul?{
??width:?1160px;
}
.index-food-list?.food-item?{
??float:?left;
??width:?230px;
??margin-right:?60px;
}
.index-food-list?.food-item?.banner?{
??margin-bottom:?30px;
??height:?202px;
}
.index-food-list?.food-item?.name?{
??color:?#555;
??margin-bottom:?10px;
}
.index-food-list?.food-item?.price?{
??float:?right;
}
.index-food-list?.food-item?.star-bar?{
??font-size:?0;
}
.index-food-list?.food-item?.star?{
??display:?inline-block;
??width:?12px;
??height:?13px;
??margin-right:?5px;
??background-image:?url("../img/index-star.png");
??background-repeat:?no-repeat;
}
.index-food-list?.food-item?.nostar?{
??background-position:?0?-12px;
}
.index-pics?{
??height:?380px;
??overflow:?hidden;
}
.index-pics?.pic-col?{
??float:?left;
}
.index-pics?.pic-col-m?{
??width:?353px;
}
.index-pics?.pic-col-s?{
??width:?287px;
}
.index-pics?.pic-col-l?{
??width:?460px;
}



    查看全部
    0 采集 收起 來源：總結

    2018-10-23

  • index大體結構

    查看全部

  • reset.css

    查看全部

  • index.html

    查看全部
首頁上一頁1234567下一頁尾頁

舉報

0/150
提交
取消
課程須知
1、對 html+css 基礎知識已經掌握； 2、會簡單使用 Photoshop； 3、需要一步一步動手做；
老師告訴你能學到什么？
1、獨立完成一個設計稿的轉化； 2、Css從整理到局部的分離； 3、Css命名一些技巧和語義化； 4、Html標簽結構的優化和選擇； 5、PS軟件當中的切圖技巧 6、Css代替部分圖片實現小icon； 7、兼容性處理的方法； 8、和后端配合時注意的事項；

微信掃碼，參與3人拼團

微信客服

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

 幫助反饋 APP下載

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

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

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