引言
任務(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ù)一
-
創(chuàng)建html和對應(yīng)的css
- 設(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>
- 先寫導(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;
}
效果如下
- 左欄
<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>標題標題標題標題標題標題標題</h3>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文</p>
</div>
<table>
<tbody>
<tr>
<th scope="col"> 標題</th>
<th scope="col"> 標題</th>
<th scope="col"> 標題</th>
</tr>
<tr>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
</tr>
<tr>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
</tr>
<tr>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
</tr>
<tr>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
</tr>
<tr>
<td> 數(shù)據(jù)</td>
<td> 數(shù)據(jù)</td>
<td> 數(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;
}
- 頁腳部分
<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;
- 聯(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ù)二
- 修改了主頁導(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;
- 擴充學(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)為“自強不息豪椿，止于至善”。</p>
<p>自強不息”是陳嘉庚先生創(chuàng)校時亮出的精神話語携栋。1921年4月6日廈大舉行開校式砂碉，演講臺中間就懸掛著陳嘉庚指定的四個大字——“自強不息”。“自強不息” 出自《周易?乾》的“天行健刻两，君子以自強不息”，意味著追求永不歇止滴某，蘊含著雄健浩然之氣磅摹，體現(xiàn)了民族自立于世界之林的精神和氣概。</p>
<p>“止于至善”為廈大私立時期的林文慶校長確立的校訓(xùn)霎奢。“止于至善” 源于《禮記?大學(xué)》“大學(xué)之道户誓，在明明德，在親民幕侠，在止于至善”帝美， 意在表明廈門大學(xué)應(yīng)該始終如一、永無止息地探尋“事理之極致”晤硕，抵達科學(xué)真理和人格精神的最高境界悼潭，在啟智與道德上達到完美至善庇忌，體現(xiàn)了中國文化的人格理想，蘊含著生命對于至善至美理想的追求與踐行舰褪。</p>
<p>1994年10月8日皆疹，經(jīng)校黨委校行政辦公會議研究決定,“自強不息，止于至善”被正式確定為廈門大學(xué)校訓(xùn)占拍。</p>
</article>
<article>
<h1>新跃停徽</h1>
<img src="images/logo/xiaohui.jpg" alt=""/>
<p>校徽圖案是陳嘉庚先生創(chuàng)辦廈門大學(xué)時確定和沿用的晃酒，其特定的內(nèi)涵表牢，簡要說明如下：徽標圓環(huán)上方為繁體字“廈門大學(xué)”，下方為拉丁語“廈門大學(xué)”贝次；盾形上的三顆五角星圖案代表中國傳統(tǒng)哲學(xué)中的“三才”崔兴，即所謂天然中精神的、宇宙的浊闪、人類的三大元素恼布；盾形中心的城及城門圖案象征著廣納賢才、開放辦學(xué)搁宾；綬帶上的“止于至善”四字為建校初期校訓(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é)
- display：flex可以使子div更好地適應(yīng)父div
- 次要信息不能太抓眼球盖腿，要把握好視覺強度的主次
