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

引言

任務(wù)一

制作一個簡單的頁面, 要求:

? 1)菜單始終在屏幕的上方(無論拖動)冒掌;

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

3) 在屏幕的右下方,固定一個“聯(lián)系電話”的方框召衔;不隨滾動條而改變位置铃诬。

4) 進行界面設(shè)計。要求有布局苍凛、色彩趣席、字體等因素的考慮;


任務(wù)二

基于以前的實驗所做的網(wǎng)頁醇蝴,重新分欄/分區(qū)塊(如果之前未分欄宣肚,先分欄顯示頁面)。使得html內(nèi)容不變悠栓,但不同的css所控制的版面布局不同霉涨。

環(huán)境

  • html6
  • css
  • javascript
  • Dreamweaver2020

具體過程

任務(wù)一
  1. 創(chuàng)建html和對應(yīng)的css


  2. 設(shè)置頁面總體布局
<body>
<div class="nav">導(dǎo)航欄 </div>
<div class="main">
<div class="left">左側(cè)欄</div>
<div class="right">右側(cè)欄</div>
</div>
<div class="footer">頁腳</div>
<div class="contact">聯(lián)系方式 </div>
</body>
  1. 先寫導(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)航欄常駐于頁面頂端*/
        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;/*允許長單詞換行*/
        font-family: "微軟雅黑";
        font-size: 20px;
        line-height: 2em;
    }

效果如下


  1. 左欄
<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
  1. 右欄
<div class="right">
<div class="chapter">
    <h3>標題標題標題標題標題標題標題</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文</p>
    </div>

<table>
  <tbody>
    <tr>
      <th scope="col">&nbsp;標題</th>
      <th scope="col">&nbsp;標題</th>
      <th scope="col">&nbsp;標題</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>標題標題標題標題標題標題標題</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;
    }

效果:
  1. 頁腳部分
<div class="footer">頁腳頁腳頁腳頁腳頁腳頁腳頁腳頁腳<Br>
頁腳頁腳頁腳頁腳</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;

效果:
  1. 聯(lián)系方式浮動框
<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;
    }

效果:



鼠標放上去后:
任務(wù)二
  1. 修改了主頁導(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
  1. 修改了page模板的main的樣式惭适,使之適應(yīng)導(dǎo)航欄的變化
.main{
    position: fixed;
    top:7%;
    left: 0;
    right: 0;
    bottom: 0;
    line-height:30px;
    padding: 0;
    color: #FFFFFF;
  1. 擴充學(xué)校簡介部分的內(nèi)容笙瑟,并使用了左側(cè)導(dǎo)航欄右側(cè)內(nèi)容的布局,左固定右滾動
  <ul class="left">
    <a href="#xxjj">
    <li>學(xué)校簡介</li>
    </a> <a href="#xxbz">
    <li>學(xué)校標志</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é)校簡介</a></h1>
      <p>廈門大學(xué)(Xiamen University)腥沽,簡稱廈大(XMU)逮走,是由中華人民共和國教育部直屬、中央直管副部級建制的綜合性研究型全國重點大學(xué),國家“雙一流”A類世界一流大學(xué)建設(shè)高校师溅,國家“2011計劃”牽頭高校茅信,國家“211工程“和“985工程”重點建設(shè)高校。</p>
      <p>學(xué)校由愛國華僑領(lǐng)袖陳嘉庚先生于1921年創(chuàng)辦墓臭,是中國近代教育史上第一所華僑創(chuàng)辦的大學(xué)蘸鲸,國內(nèi)最早招收研究生的大學(xué)之一,是首個在海外建設(shè)獨立校園的大學(xué)窿锉,早期建筑入選全國重點文物保護單位和“首批中國20世紀建筑遺產(chǎn)”名錄酌摇,被譽為“南方之強“、“中國最美大學(xué)”嗡载。
      <p/>
      <p> 截至2019年11月窑多,學(xué)校4個校區(qū)占地9700多畝,其中馬來西亞分校約900畝洼滚;有研究生院埂息、6個學(xué)部、29個學(xué)院和15個研究院遥巴;專任教師2662人千康,兩院院士22人;在校學(xué)生40000余人铲掐,本研比約為1:1拾弃;17個學(xué)科進入ESI全球前1%,位列中國大陸高校第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;自強不息豪椿,止于至善&rdquo;。</p>
      <p>自強不息&rdquo;是陳嘉庚先生創(chuàng)校時亮出的精神話語携栋。1921年4月6日廈大舉行開校式砂碉,演講臺中間就懸掛著陳嘉庚指定的四個大字——&ldquo;自強不息&rdquo;。&ldquo;自強不息&rdquo; 出自《周易?乾》的&ldquo;天行健刻两,君子以自強不息&rdquo;,意味著追求永不歇止滴某,蘊含著雄健浩然之氣磅摹,體現(xiàn)了民族自立于世界之林的精神和氣概。</p>
      <p>&ldquo;止于至善&rdquo;為廈大私立時期的林文慶校長確立的校訓(xùn)霎奢。&ldquo;止于至善&rdquo; 源于《禮記?大學(xué)》&ldquo;大學(xué)之道户誓,在明明德,在親民幕侠,在止于至善&rdquo;帝美, 意在表明廈門大學(xué)應(yīng)該始終如一、永無止息地探尋&ldquo;事理之極致&rdquo;晤硕,抵達科學(xué)真理和人格精神的最高境界悼潭,在啟智與道德上達到完美至善庇忌,體現(xiàn)了中國文化的人格理想,蘊含著生命對于至善至美理想的追求與踐行舰褪。</p>
      <p>1994年10月8日皆疹,經(jīng)校黨委校行政辦公會議研究決定,&ldquo;自強不息,止于至善&rdquo;被正式確定為廈門大學(xué)校訓(xùn)占拍。</p>
    </article>
    <article>
      <h1>新跃停徽</h1>
      <img src="images/logo/xiaohui.jpg" alt=""/>
      <p>校徽圖案是陳嘉庚先生創(chuàng)辦廈門大學(xué)時確定和沿用的晃酒,其特定的內(nèi)涵表牢,簡要說明如下:徽標圓環(huán)上方為繁體字&ldquo;廈門大學(xué)&rdquo;,下方為拉丁語&ldquo;廈門大學(xué)&rdquo;贝次;盾形上的三顆五角星圖案代表中國傳統(tǒng)哲學(xué)中的&ldquo;三才&rdquo;崔兴,即所謂天然中精神的、宇宙的浊闪、人類的三大元素恼布;盾形中心的城及城門圖案象征著廣納賢才、開放辦學(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>國學(xué)研究院</li>
          <li>海外教育學(xué)院</li>
          <li>國際學(xué)院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社會科學(xué)學(xué)部</h3>
        <ul class="college">
          <li>經(jīng)濟學(xué)院</li>
          <li>王亞南經(jīng)濟研究院</li>
          <li>管理學(xué)院</li>
          <li>財務(wù)管理與會計研究院</li>
          <li>法學(xué)院</li>
          <li>廈門國際法高等研究院</li>
          <li>知識產(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>國學(xué)研究院</li>
          <li>海外教育學(xué)院</li>
          <li>國際學(xué)院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社會科學(xué)學(xué)部</h3>
        <ul class="college">
          <li>經(jīng)濟學(xué)院</li>
          <li>王亞南經(jīng)濟研究院</li>
          <li>管理學(xué)院</li>
          <li>財務(wù)管理與會計研究院</li>
          <li>法學(xué)院</li>
          <li>廈門國際法高等研究院</li>
          <li>知識產(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é)

  1. display:flex可以使子div更好地適應(yīng)父div
  2. 次要信息不能太抓眼球盖腿,要把握好視覺強度的主次
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末爽待,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子翩腐,更是在濱河造成了極大的恐慌鸟款,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茂卦,死亡現(xiàn)場離奇詭異何什,居然都是意外死亡,警方通過查閱死者的電腦和手機等龙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門处渣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛛砰,你說我怎么就攤上這事罐栈。” “怎么了泥畅?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵荠诬,是天一觀的道長。 經(jīng)常有香客問我,道長柑贞,這世上最難降的妖魔是什么方椎? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮凌外,結(jié)果婚禮上辩尊,老公的妹妹穿的比我還像新娘。我一直安慰自己康辑,他們只是感情好摄欲,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著疮薇,像睡著了一般胸墙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上按咒,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天迟隅,我揣著相機與錄音,去河邊找鬼励七。 笑死智袭,一個胖子當著我的面吹牛菩咨,可吹牛的內(nèi)容都是我干的牌借。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼诡宗,長吁一口氣:“原來是場噩夢啊……” “哼两波!你這毒婦竟也來了瞳步?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤腰奋,失蹤者是張志新(化名)和其女友劉穎单起,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體劣坊,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡嘀倒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了局冰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片括儒。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖锐想,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情乍狐,我是刑警寧澤赠摇,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響藕帜,放射性物質(zhì)發(fā)生泄漏烫罩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一洽故、第九天 我趴在偏房一處隱蔽的房頂上張望贝攒。 院中可真熱鬧,春花似錦时甚、人聲如沸隘弊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梨熙。三九已至,卻和暖如春刀诬,著一層夾襖步出監(jiān)牢的瞬間咽扇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工陕壹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留质欲,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓糠馆,卻偏偏與公主長得像嘶伟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子榨惠,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容