引言

任務(wù)一

制作一個(gè)簡(jiǎn)單的頁(yè)面，要求：

? 1）菜單始終在屏幕的上方（無(wú)論拖動(dòng)）；

2）網(wǎng)頁(yè)的結(jié)構(gòu)如附件所示。每個(gè)區(qū)塊之間，需要有邊距和空白。

3）在屏幕的右下方，固定一個(gè)“聯(lián)系電話”的方框；不隨滾動(dòng)條而改變位置。

4）進(jìn)行界面設(shè)計(jì)。要求有布局、色彩、字體等因素的考慮；

任務(wù)二

基于以前的實(shí)驗(yàn)所做的網(wǎng)頁(yè)，重新分欄/分區(qū)塊（如果之前未分欄，先分欄顯示頁(yè)面）。使得html內(nèi)容不變，但不同的css所控制的版面布局不同。

環(huán)境

html6
css
javascript
Dreamweaver2020

具體過(guò)程

任務(wù)一

創(chuàng)建html和對(duì)應(yīng)的css
設(shè)置頁(yè)面總體布局

<body>
<div class="nav">導(dǎo)航欄 </div>
<div class="main">
<div class="left">左側(cè)欄</div>
<div class="right">右側(cè)欄</div>
</div>
<div class="footer">頁(yè)腳</div>
<div class="contact">聯(lián)系方式 </div>
</body>

先寫導(dǎo)航欄

<div class="nav">
    <ul class="menu">
    <li>導(dǎo)航</li>
    <li>導(dǎo)航</li>
    <li>導(dǎo)航</li>
    <li>導(dǎo)航</li>
    <li>導(dǎo)航</li>
    <li>導(dǎo)航</li>
    </ul>
    </div>

    .nav{
        position: fixed;/*導(dǎo)航欄常駐于頁(yè)面頂端*/
        top: 0;
        left: 0;
        right: 0;
        background-color: #ac1400;
        text-align: center;
        box-shadow: 0px 5px 5px #00000088;
    }
    .menu{
    width: 70%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: flex;/*彈性盒布局*/
    }
    .menu li{
        margin: 0;
        flex: 1;/*彈性盒布局*/
        padding: 10px;
        font-family: "微軟雅黑";
        font-size: 20px;
        font-weight: bolder;
        color: white;
    }
    .menu li:hover{/*指針懸浮效果*/
        background-color: #981100;
        border-bottom: black 3px solid;
        padding-bottom: 7px;
    }

在body選擇器中設(shè)置通用的屬性值

body{
        margin: 0;
        padding: 0;
        word-wrap:break-word;/*允許長(zhǎng)單詞換行*/
        font-family: "微軟雅黑";
        font-size: 20px;
        line-height: 2em;
    }

效果如下

左欄

<div class="left">
    
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
    
</div>

.main{
        bottom: 0;
        left: 0;
        right: 0;
        margin:10px;
        margin-top: 80px;
        overflow: hidden;
    }
    
    .left{
        float: left;
        width: 25%;
        border-right: 3px solid #AC1400;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 1%;
        font-size: 18px;
        line-height: 36px;
    }
    .item{
        padding: 5% 10% ;
    }
    .item:hover{
    background-color: #EFEFEF;
    border-left: black solid 3px;
    padding-left: calc(10% - 3px);
}

效果：

image.png

右欄

<div class="right">
<div class="chapter">
    <h3>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文</p>
    </div>

<table>
  <tbody>
    <tr>
      <th scope="col">&nbsp;標(biāo)題</th>
      <th scope="col">&nbsp;標(biāo)題</th>
      <th scope="col">&nbsp;標(biāo)題</th>
    </tr>
    <tr>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
    </tr>
    <tr>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
    </tr>
    <tr>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
    </tr>
    <tr>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
    </tr>
    <tr>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
      <td>&nbsp;數(shù)據(jù)</td>
    </tr>
  </tbody>
</table>
<div class="chapter">
    <h3>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </div>
</div>

 .right{
        float: left;
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 4%;
    }
    .chapter{
        margin: 0;
        margin-bottom: 3em;
    }
    .right table{
        width: 100%;
        margin-bottom: 3em;
        border: 3px solid #EFEFEF;
        border-collapse: collapse;
        text-align: center;
    }
    .right table th{
        background-color: #EFEFEF;
    }

效果：

頁(yè)腳部分

<div class="footer">頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳<Br>
頁(yè)腳頁(yè)腳頁(yè)腳頁(yè)腳</div>

.footer{
        clear: both;
        width: 100%;
        text-align: center;
        background-color: #ac1400;
        color: white;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;

效果：

聯(lián)系方式浮動(dòng)框

<div class="contact">
    <h3>聯(lián)系方式</h3>
    <p>郵箱：zimo@qq.com</p>
    <p>電話：13088886666</p>
    </div>

.contact{
        position: fixed;
        right: 0;
        bottom: 110px;
        width: 50px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        background-color: #ac1400;
        color: white;
        font-size: 15px;
        line-height: 2em;
        box-shadow: 0px 5px 5px #00000088;
    }
    .contact h3,p{
        margin: 0;
    }
    .contact p{
        margin-top: 10px;
        display: none;
    }
    .contact:hover{
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        background-color: #ac1400;
        color: white;
        font-size: 15px;
        line-height: 2em;
    }
    .contact:hover p{
        display: block;
    }

效果：

鼠標(biāo)放上去后：

任務(wù)二

修改了主頁(yè)導(dǎo)航欄的css，從左邊變成頂部

nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 7%;
padding: 0;
background-color: #FFFFFF77;
z-index: 1;
}

.menu{
    width: 70%;
    height: 100%;
    margin: 0 auto;
    list-style-type: none;
}
.menu-item{
    float: left;
    width: 25%;
    height: 100%;
    color: #ac1400;
    font-size: 3vh;
    font-weight: bolder;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items:center;
}
.menu-item:hover{
    background-color: #ce1700;
    color: white;
}
.menu-item:active{
    background-color: #ac1400;
}

效果：

image.png

修改了page模板的main的樣式，使之適應(yīng)導(dǎo)航欄的變化

.main{
    position: fixed;
    top:7%;
    left: 0;
    right: 0;
    bottom: 0;
    line-height:30px;
    padding: 0;
    color: #FFFFFF;

擴(kuò)充學(xué)校簡(jiǎn)介部分的內(nèi)容，并使用了左側(cè)導(dǎo)航欄右側(cè)內(nèi)容的布局，左固定右滾動(dòng)

  <ul class="left">
    <a href="#xxjj">
    <li>學(xué)校簡(jiǎn)介</li>
    </a> <a href="#xxbz">
    <li>學(xué)校標(biāo)志</li>
    </a> <a href="#xybx">
    <li>學(xué)院部系</li>
    </a> <a href="#xydt">
    <li>校園地圖</li>
    </a>
  </ul>
  <div class="right">
    <article>
      <h1><a name="xxjj">學(xué)校簡(jiǎn)介</a></h1>
      <p>廈門大學(xué)（Xiamen University），簡(jiǎn)稱廈大（XMU），是由中華人民共和國(guó)教育部直屬、中央直管副部級(jí)建制的綜合性研究型全國(guó)重點(diǎn)大學(xué)，國(guó)家“雙一流”A類世界一流大學(xué)建設(shè)高校，國(guó)家“2011計(jì)劃”牽頭高校，國(guó)家“211工程“和“985工程”重點(diǎn)建設(shè)高校。</p>
      <p>學(xué)校由愛(ài)國(guó)華僑領(lǐng)袖陳嘉庚先生于1921年創(chuàng)辦，是中國(guó)近代教育史上第一所華僑創(chuàng)辦的大學(xué)，國(guó)內(nèi)最早招收研究生的大學(xué)之一，是首個(gè)在海外建設(shè)獨(dú)立校園的大學(xué)，早期建筑入選全國(guó)重點(diǎn)文物保護(hù)單位和“首批中國(guó)20世紀(jì)建筑遺產(chǎn)”名錄，被譽(yù)為“南方之強(qiáng)“、“中國(guó)最美大學(xué)”。
      <p/>
      <p> 截至2019年11月，學(xué)校4個(gè)校區(qū)占地9700多畝，其中馬來(lái)西亞分校約900畝；有研究生院、6個(gè)學(xué)部、29個(gè)學(xué)院和15個(gè)研究院；專任教師2662人，兩院院士22人；在校學(xué)生40000余人，本研比約為1:1；17個(gè)學(xué)科進(jìn)入ESI全球前1%，位列中國(guó)大陸高校第7位。</p>
    </article>
    <article>
      <h1><a name="xxbz">校訓(xùn)</a></h1>
      <img src="images/logo/xiaoxun.gif" width="143" height="57" alt=""/>
      <p>廈門大學(xué)校訓(xùn)為&ldquo;自強(qiáng)不息，止于至善&rdquo;。</p>
      <p>自強(qiáng)不息&rdquo;是陳嘉庚先生創(chuàng)校時(shí)亮出的精神話語(yǔ)。1921年4月6日廈大舉行開(kāi)校式，演講臺(tái)中間就懸掛著陳嘉庚指定的四個(gè)大字——&ldquo;自強(qiáng)不息&rdquo;。&ldquo;自強(qiáng)不息&rdquo; 出自《周易?乾》的&ldquo;天行健，君子以自強(qiáng)不息&rdquo;，意味著追求永不歇止，蘊(yùn)含著雄健浩然之氣，體現(xiàn)了民族自立于世界之林的精神和氣概。</p>
      <p>&ldquo;止于至善&rdquo;為廈大私立時(shí)期的林文慶校長(zhǎng)確立的校訓(xùn)。&ldquo;止于至善&rdquo; 源于《禮記?大學(xué)》&ldquo;大學(xué)之道，在明明德，在親民，在止于至善&rdquo;， 意在表明廈門大學(xué)應(yīng)該始終如一、永無(wú)止息地探尋&ldquo;事理之極致&rdquo;，抵達(dá)科學(xué)真理和人格精神的最高境界，在啟智與道德上達(dá)到完美至善，體現(xiàn)了中國(guó)文化的人格理想，蘊(yùn)含著生命對(duì)于至善至美理想的追求與踐行。</p>
      <p>1994年10月8日，經(jīng)校黨委校行政辦公會(huì)議研究決定,&ldquo;自強(qiáng)不息，止于至善&rdquo;被正式確定為廈門大學(xué)校訓(xùn)。</p>
    </article>
    <article>
      <h1>?；?lt;/h1>
      <img src="images/logo/xiaohui.jpg" alt=""/>
      <p>?；?qǐng)D案是陳嘉庚先生創(chuàng)辦廈門大學(xué)時(shí)確定和沿用的，其特定的內(nèi)涵，簡(jiǎn)要說(shuō)明如下：徽標(biāo)圓環(huán)上方為繁體字&ldquo;廈門大學(xué)&rdquo;，下方為拉丁語(yǔ)&ldquo;廈門大學(xué)&rdquo;；盾形上的三顆五角星圖案代表中國(guó)傳統(tǒng)哲學(xué)中的&ldquo;三才&rdquo;，即所謂天然中精神的、宇宙的、人類的三大元素；盾形中心的城及城門圖案象征著廣納賢才、開(kāi)放辦學(xué)；綬帶上的&ldquo;止于至善&rdquo;四字為建校初期校訓(xùn)。</p>
    </article>
    <article>
      <h1>校歌</h1>
      <img src="images/logo/xiaoge.jpg" width="825" height="1000" alt=""/> </article>
    <article>
      <h1><a name="xybx">學(xué)院部系</a></h1>
      <div class="department">
        <h3>人文與藝術(shù)學(xué)部</h3>
        <ul class="college">
          <li>人文學(xué)院</li>
          <li>新聞傳播學(xué)院</li>
          <li>外文學(xué)院</li>
          <li>藝術(shù)學(xué)院</li>
          <li>國(guó)學(xué)研究院</li>
          <li>海外教育學(xué)院</li>
          <li>國(guó)際學(xué)院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社會(huì)科學(xué)學(xué)部</h3>
        <ul class="college">
          <li>經(jīng)濟(jì)學(xué)院</li>
          <li>王亞南經(jīng)濟(jì)研究院</li>
          <li>管理學(xué)院</li>
          <li>財(cái)務(wù)管理與會(huì)計(jì)研究院</li>
          <li>法學(xué)院</li>
          <li>廈門國(guó)際法高等研究院</li>
          <li>知識(shí)產(chǎn)權(quán)研究院</li>
          <li>公共事務(wù)學(xué)院</li>
          <li>公共政策研究院</li>
        </ul>
      </div>
    <div class="department">
        <h3>人文與藝術(shù)學(xué)部</h3>
        <ul class="college">
          <li>人文學(xué)院</li>
          <li>新聞傳播學(xué)院</li>
          <li>外文學(xué)院</li>
          <li>藝術(shù)學(xué)院</li>
          <li>國(guó)學(xué)研究院</li>
          <li>海外教育學(xué)院</li>
          <li>國(guó)際學(xué)院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社會(huì)科學(xué)學(xué)部</h3>
        <ul class="college">
          <li>經(jīng)濟(jì)學(xué)院</li>
          <li>王亞南經(jīng)濟(jì)研究院</li>
          <li>管理學(xué)院</li>
          <li>財(cái)務(wù)管理與會(huì)計(jì)研究院</li>
          <li>法學(xué)院</li>
          <li>廈門國(guó)際法高等研究院</li>
          <li>知識(shí)產(chǎn)權(quán)研究院</li>
          <li>公共事務(wù)學(xué)院</li>
          <li>公共政策研究院</li>
        </ul>
      </div>
    </article>
    <article>
      <h1><a name="xydt">校園地圖</a></h1>
    </article>
  </div>

css

article{
    margin-bottom: 20%;
}
article:last-child{
    margin-bottom: 0;
}
h1{
    width: 100%;
    text-align: center;
    margin-top: 0;
    color: #ce1700;
    padding-bottom: 1%;
    border-bottom: #ce1700 solid 2px;
}
.left{
    margin: 0;
    margin-top:3%;
    float: left;
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
}
.left li{
    padding: 3%;
    font-size: 3vh;
    font-weight: bolder;
    color: white;
    display: flex;
    align-items: center;
    justify-content:space-around;
    border-right: #FFFFFF77 solid 3px;
}
.left li:hover{
    background-color: #FFFFFF77;
    border-right: #FFFFFF00 3px solid;
    color: black;
}
.left li:active{
    background-color: #FFFFFFAA;
    border-right: #FFFFFF00 3px solid;
    color: black;
}
.right{
    float: left;
    width: 80%;
    height: 100%;
    margin-top:3%;
    padding: 0 10% 5%;
    font-size: 20px;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: scroll;
}

img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;  
    display: block;
    margin: auto;
}
.department{
    margin-top: 40px;
}
h3{
    font-size: 20px;
    margin:0;
}
.college{
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    
}
.college li{
    float: left;
    padding: 5px;
    margin: 5px;
    background-color: #FFFFFF77;
    color: black;
}

效果：

左側(cè)的錨鏈接快速定位到右邊的指定內(nèi)容。

這里使用了float：left

總結(jié)

display：flex可以使子div更好地適應(yīng)父div
次要信息不能太抓眼球，要把握好視覺(jué)強(qiáng)度的主次

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

作業(yè)5：CSS編程排版練習(xí)

作業(yè)5：CSS編程排版練習(xí)

引言

任務(wù)一

任務(wù)二

基于以前的實(shí)驗(yàn)所做的網(wǎng)頁(yè)，重新分欄/分區(qū)塊（如果之前未分欄，先分欄顯示頁(yè)面）。使得html內(nèi)容不變，但不同的css所控制的版面布局不同。

環(huán)境

具體過(guò)程

任務(wù)一

任務(wù)二

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

作業(yè)5：CSS編程排版練習(xí)

引言

任務(wù)一

任務(wù)二

基于以前的實(shí)驗(yàn)所做的網(wǎng)頁(yè)，重新分欄/分區(qū)塊（如果之前未分欄，先分欄顯示頁(yè)面）。使得html內(nèi)容不變，但不同的css所控制的版面布局不同。

環(huán)境

具體過(guò)程

任務(wù)一

任務(wù)二

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

基于以前的實(shí)驗(yàn)所做的網(wǎng)頁(yè)，重新分欄/分區(qū)塊（如果之前未分欄，先分欄顯示頁(yè)面）。使得html內(nèi)容不變，但不同的css所控制的版面布局不同。