1、首先是設計稿 2、然後使用PxCook進行尺寸標註 3、字體信息去PS里看 4、首頁框架代碼編寫 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <lin ...
1、首先是設計稿
2、然後使用PxCook進行尺寸標註
3、字體信息去PS里看
4、首頁框架代碼編寫
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="top" id="top"> <div class="wrap"> </div> </div> <div class="header" id="header"> <div class="wrap"> </div> </div> <div class="nav" id="nav"> <div class="wrap"> </div> </div> <div class="banner" id="banner"> <div class="wrap"> <div class="banner-slide" id="banner-slide"></div> <div class="banner-search" id="banner-search"></div> <div class="banner-help" id="banner-help"></div> </div> </div> <div class="content" id="content"> <div class="wrap"> <div class="content-tab" id="content-tab"></div> <div class="content-news" id="content-news"></div> <div class="content-stop" id="content-stop"></div> </div> </div> <div class="footer" id="footer"> <div class="wrap"> </div> </div> </body> </html>
style.css
*{ margin:0; padding:0; border:none; } body{ color:#8a8a8a; } ul{ list-style:none; } a{ text-decoration: none; } .top{ width:100%; height:36px; background-color: #f5f5f5; } .wrap{ width:1000px; margin:0 auto; position: relative; } .header{ width:100%; height:97px; } .nav{ width:100%; height:35px; background-color: #60bff2; } .banner{ width:100%; height:424px; background-color: #f5f5f5; background-color: #fff; } .banner-slide{ width:544px; height:416px; margin:8px 8px 0 197px; float: left; background-color: #8fe1f6; } .banner-search{ width:250px; height:253px; float:right; background-color: #fafafa; margin-top:8px; } .banner-help{ width:250px; height:148px; float:right; background-color: #fafafa; margin-top:13px; } .content{ width:100%; height:493px; background-color: #fff; margin-top:8px; } .content-tab{ width:738px; height:493px; border:1px solid #f4f6fa; float: left; } .content-news, .content-stop{ width:250px; height:238px; border:1px solid #f4f6fa; float: right; margin-left:8px; } .content-stop{ margin-top:11px; } .footer{ width:100%; height:62px; line-height:62px; background-color: #eceef2; margin-top:42px; }
效果圖
5、靜態頁面基本樣式編寫
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="base.css"> </head> <body> <div class="top" id="top"> <div class="wrap"> <p class="call">010-114/116114電話預約</p> <p class="welcome"> 歡迎來到城市掛號預約統一平臺 請 <a href="">登錄</a> <a href="">註冊</a> <a href="">幫助中心</a> </p> </div> </div> <div class="header" id="header"> <div class="wrap"> <a href="" class="header-logo"> <img src="img/logo.png"> </a> <div class="header-search"></div> </div> </div> <div class="nav" id="nav"> <div class="wrap"> <div class="nav-item nav-item-special" id="nav-item"> 全部科室 <div class="nav-item-list" id="nav-item-list"></div> </div> <a href="" class="nav-item">按醫院掛號</a> <a href="" class="nav-item">按科室掛號</a> <a href="" class="nav-item">按疾病掛號</a> <a href="" class="nav-item">最新公告</a> <a href="" class="nav-item right">社會知名醫院</a> </div> </div> <div class="banner" id="banner"> <div class="wrap"> <div class="banner-slide" id="banner-slide"></div> <div class="banner-search" id="banner-search"> <div class="caption"><span class="caption-order">快速預約</span></div> <form class="banner-search-form"> <div class="line"> <select name="area" id="area"> <option value="">醫院地區</option> </select> </div> <div class="line"> <select name="level" id="level"> <option value="">醫院等級</option> </select> </div> <div class="line"> <select name="name" id="name"> <option value="">醫院名稱</option> </select> </div> <div class="line"> <select name="depa" id="depa"> <option value="">醫院科室</option> </select> </div> </form> <div class="submit"> <input type="submit" value="快速查詢"> </div> </div> <div class="banner-help" id="banner-help"> <div class="caption"><span class="caption-order">幫助中心</span></div> <a href="" class="link">賬號指南</a> <a href="" class="link">預約指南</a> <a href="" class="link">賬號找回</a> <a href="" class="link">常見問題</a> </div> </div> </div> <div class="content" id="content"> <div class="wrap"> <div class="content-tab" id="content-tab"> <div class="caption"> <a href="" class="item item_current">醫院</a> <a href="" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="" class="current">全部</a> <a href="">東城區</a> <a href="">西城區</a> <a href="">朝陽區</a> <a href="">丰台區</a> <a href="">石景山區</a> <a href="">海澱區</a> <a href="">門頭溝區</a> <a href="">房山區</a> <a href="">其他</a> </div> <div class="block-content"> <!-- 醫院列表 --> <div class="block-list"> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢台 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢台 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢台 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢台 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> </div> <!-- 醫院文案列表 --> <div class="block-text-list"> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> </div> <a class="block-more">更多醫院</a> </div> </div> <div class="item"> </div> </div> </div> <div class="content-news" id="content-news"> <div class="caption">最新公告<a href="" class="more">| 更多</a></div> <div class="list"> <a href="" class="link">醫院特需門診暫停更新號源...</a> <a href="" class="link">醫院特需門診暫停更新號源...</a> <a href="" class="link">醫院特需門診暫停更新號源...</a> <a href="" class="link">醫院特需門診暫停更新號源...</a> <a href="" class="link">醫院特需門診暫停更新號源...</a> <a href="" class="link">醫院特需門診暫停更新號源...
