成品截圖

前期準備素材

1、項目頁面PSD源文件

下載地址https://chuenst.lanzous.com/i7hlggnl6vccss

2、前期準備工做

建立study目錄文件夾 (用於存放這個頁面的相關內容)html
study目錄內新建images文件夾（用於保存圖片）佈局
新建index.html 首頁html文件（網站首頁統一規定爲index.html)學習
新建style.css 樣式文件（外鏈樣式表）網站
將樣式引入到咱們HTML頁面文件中職業規劃

<link rel="stylesheet" href="./style.css">

樣式表寫入清除內外邊距樣式，來檢測樣式表是否引入成功

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

3、CSS屬性書寫順序

佈局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個寫，
畢竟關係到模式）
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-
word
其餘屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow /
background:linear-gradient …

4、佈局分析

5、佈局流程

必須肯定頁面的版心（可視區）
分析頁面中的行模塊，以及每一個行模塊中的列模塊，一行行羅列而成
製做HTML結構。遵循，先有結構，後有樣式的原則
而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊

開始頁面製做

頭部製做

1號是版心盒子header 1200 * 100 的盒子水平居中對齊, 上下給一個margin值

.top{
    width: 1200px;
    height: 100px;
    margin:0 auto ;
   }

版心盒子裏面包含 2號盒子 logo

<img src="./images/logo.png" alt="">

.top img{
    float: left;
    margin-top: 29px;
    width: 195px;
    height: 42px;
}

版心盒子裏面包含 3號盒子 nav導航欄

<ul>
     <li class="jihuo"><a href="">首頁</a></li>
     <li><a href="">課程</a></li>
     <li><a href="">職業規劃</a></li>
</ul>

.top ul{
    float: left;
    margin-left: 59px;
}
.top li{
    float: left;
    padding: 10px 12px;
    margin: 28px 13px;
}

版心盒子裏面包含 4號盒子 search搜索框

<input type="text"> <button></button>

.top input{
    float: left;
    height: 38px;
    width: 360px;
    margin-top: 29px ;
    margin-left: 70px;
    border: 2px solid #00a4ff;
    border-right: none;
}
.top button{
    float: left;
    width: 50px;
    height: 42px;
    border: none;
    margin-top: 29px;
    background-color: #00a4ff;
    background-image: url(./images/fa-search.png);
    background-repeat: no-repeat;
    background-position: center center ;
}

版心盒子裏面包含 5號盒子user我的信息

<div class="toplast">
    <img src="./images/頭像.png" alt="">
    <span>初辰</span>
</div>

.toplast{
    float: left;
    width: 120px;
    height: 30px;
    margin-top: 35px;
    margin-left: 30px;
}
.toplast img{
    margin: 0;
    float: left;
    height: 30px;
    width: 30px;
    border-radius: 50% 50%;
}
.toplast span{
    vertical-align: middle;
    padding-left:5px;
}

注意，要求裏面的 4個盒子必須都浮動url

banner製做

1號盒子是通欄的大盒子banner，不給寬度，給高度，給一個藍色背景

.nav{
    width: 100%;
    height: 420px;
    background-color:#1c036c;
}

2號盒子是版心，要水平居中對齊

.navbox{
    width: 1200Px;
    height: 420px;
    margin: 0 auto;
    background-image: url(./images/banner2.png);
}

3號盒子版心內，左對齊側導航欄

.navbox .u1{
    width: 190px;
    height: 420px;
    float: left;
    background-color: rgba(19,1,75,0.5) ;
    background-repeat: no-repeat;
}

4號盒子版心內，右對齊 course 課程

.kebiao{
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: white;
    float: right;
}

左側導航欄

.navbox a,.navbox li{
    background-color: rgba(0, 0, 0, 0) ;
    background-repeat: no-repeat;
    color: white;
}
.navbox li{
    margin: 23px;
}

課程表模塊

1號盒子是 228 * 300 的盒子右浮動

.kebiao{
    width: 228px;
    height: 300px;
    float: right;
}

1號盒子內分爲上下兩個子盒子

<div class="kebiao">
   <h3>個人課程表</h3>
      <ul>
        <li>
            <span class="kbs1">繼續學習&nbsp;程序語言</span><br>
            <span class="kbs2">正在學習</span>
        </li>
        <li>
            <span class="kbs1">繼續學習&nbsp;程序語言</span><br>
            <span class="kbs2">正在學習</span>
        </li>
        <li>
            <span class="kbs1">繼續學習&nbsp;程序語言</span><br>
            <span class="kbs2">正在學習</span>
        </li>
        <li class="lastli">
            <button>所有課程</button>
        </li>
    </ul>
</div>

2號子盒子是上部分

.kebiao h3{
    margin: 0 ;
    padding: 0;
    line-height: 48px;
    height: 48px;
    width: 228px;
    text-align: center;
    background-color: #9bceea;
}

3號子盒子是下部分

.kbs1{
    color: #000;
    background-repeat: no-repeat;
    background-color: white;
}
.kbs2{
    font-size: smaller;
    color: slategrey;
    background-repeat: no-repeat;
    background-color: white;
}
.kebiao ul{
    height: 252px;
    width: 228px;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: white;
}
.kebiao li{
    padding:9px 0;
    margin:0 20px;
    height: 45px;
    width: 192px;
    border-bottom: 1px solid rgb(203, 206, 209); 
}

項目未完待續。。。（詳情見下篇）spa

源代碼下載

源碼下載地址https://chuenst.lanzous.com/iJXVHgnq8fi3d