1. 實(shí)驗(yàn)準(zhǔn)備
- 熟悉層疊樣式表css語法呢撞；
- 登錄w3school院塞，進(jìn)行示例練習(xí)钞艇；
http://www.w3school.com.cn/css/index.asp - 查看一個(gè)在線的css實(shí)戰(zhàn)教程：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout
2. 實(shí)驗(yàn)內(nèi)容
制作一個(gè)簡單的頁面入蛆， 要求：
?1）菜單始終在屏幕的上方（無論拖動(dòng)）屋摔；
2） 網(wǎng)頁的結(jié)構(gòu)如附件所示。每個(gè)區(qū)塊之間檬某，需要有邊距和空白撬腾。
3） 在屏幕的右下方，固定一個(gè)“聯(lián)系電話”的方框恢恼；不隨滾動(dòng)條而改變位置民傻。
4） 進(jìn)行界面設(shè)計(jì)。要求有布局场斑、色彩漓踢、字體等因素的考慮；
3.實(shí)驗(yàn)環(huán)境
- JetBrains WebStorm 2018.3.5 x64 ： html+css
4.實(shí)驗(yàn)樣式
樣式.png
4.具體過程
1漏隐、整體布局
整體布局.png
- 同時(shí)喧半，我們在可以用css定義全局樣式；
- 開始前青责，在
<style>開閉標(biāo)簽之間添加下面的代碼：
html {
font-family: sans-serif;
}
*{
box-sizing: border-box;
}
body {
margin:10px;
}
這只是一些一般設(shè)置挺据，在我們頁面上設(shè)置了無襯線的字體、使用 box-sizing模型脖隶，去掉 <body>默認(rèn)外邊距扁耐。
2、導(dǎo)航欄
導(dǎo)航欄.png
a) 基本文本
<section class="info-box" >
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</section>
b）基本設(shè)置
.info-box {
width: 450px;
height: 400px;
margin: 0 auto;
}
- 這對(duì)內(nèi)容設(shè)置具體的高度和寬度产阱、在屏幕居中使用老把戲
margin: 0 auto婉称。在早先的課程中我們建議盡可能不固定內(nèi)容容器的高度。這個(gè)情況下是可以的构蹬，因?yàn)槲覀兪窃谶x項(xiàng)卡中固定的內(nèi)容王暗，如果每個(gè)標(biāo)簽都有不同的高度，看起來也有些不和諧庄敛。
c) 樣式化我們的選項(xiàng)卡
- 現(xiàn)在我們希望樣式化選項(xiàng)卡看上去像選項(xiàng)卡——基本俗壹，這些是一個(gè)水平的導(dǎo)航標(biāo)簽，但不是點(diǎn)擊之后加載不同的網(wǎng)頁铐姚，和我們之前在課程中見到的不同策肝，相反，他們在同一頁面上顯示不同的面板隐绵。首先之众，在你的CSS底部添加下列規(guī)則，從無序列表中移除默認(rèn)的
padding-left和`margin-top值：
.info-box ul {
padding-left: 0;
margin-top: 0;
}
- 接下來依许，我們將樣式化水平選項(xiàng)卡——列表項(xiàng)都要左浮動(dòng)確保他們一行合起來棺禾，他們的
list-style-type被設(shè)置為none用以去除項(xiàng)目符號(hào)，寬度（width）設(shè)置為150px以便于適應(yīng)這個(gè)info-box峭跳。鏈接（<a>）元素設(shè)置為displayinline-block膘婶，這樣他們將在一行顯示，仍然保持樣式可設(shè)置蛀醉，他們會(huì)被樣式化合適的選項(xiàng)卡按鈕悬襟，通過一系列的其他屬性。
.info-box li {
float: left;
list-style-type: none;
width: 287px;
}
.info-box li a {
display: inline-block;
text-decoration: none;
width: 100%;
line-height: 3;
background-color:lightslategrey;
color: black;
text-align: center;
}
- 最后拯刁，對(duì)于本節(jié)脊岳，我們將會(huì)在鏈接狀態(tài)上設(shè)置一些樣式。首先垛玻，我們要設(shè)置標(biāo)簽的 :focus 和 :hover 狀態(tài)割捅，讓他們在獲得焦點(diǎn)/鼠標(biāo)懸浮的時(shí)候看起來不同，給用戶提供一些可視化反饋帚桩。其次亿驾，當(dāng)某個(gè)選項(xiàng)卡的類（ class ）出現(xiàn) active 時(shí)，我們?yōu)槠湓O(shè)置一條相同的樣式規(guī)則账嚎。把這些CSS放置在你的其他樣式后面：
.info-box li a:focus, .info-box li a:hover {
background-color:indianred;
color: white;
}
.info-box li a.active {
background-color:indianred;
color: white;
}
3莫瞬、內(nèi)容欄
內(nèi)容欄.png
- 在body標(biāo)簽中添加一個(gè)div，設(shè)置其class屬性為content郭蕉。
- 在content中添加兩個(gè)div乏悄，其class屬性分別為content1和content2。
- 分別定義類選擇器content恳不、content1檩小、content2
a) 基本設(shè)置，三個(gè)div(這部分在上一篇文章《CSS編程練習(xí)和界面設(shè)計(jì)》也講過)
.content{
margin:0px auto;
height: 500px;
margin-top: 60px;
padding-right: 55px;
width: 1210px;
height: 500px;
}
.content1{
float: left;
background-color: lightgrey;
padding:10px;
width: 450px;
height: 500px;
}
.content2{
float: right;
background-color: lightgray;
padding:10px;
width: 630px;
height: 500px;
}
b) 表格制作以及樣式化
- 在內(nèi)容欄里面烟勋，重點(diǎn)就是一個(gè)表格的制作
表格內(nèi)容:(這個(gè)就比較簡單)
<table id="customers">
<tr>
<th>拍攝技巧</th>
<th>場景</th>
</tr>
<tr>
<td>形狀匹配</td>
<td>海浪與翻開的書</td>
</tr>
</table>
簡單的排版
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
- 使用
border-collapse: collapse使表元素邊框合并规求，生成一個(gè)更整潔、更易于控制的外觀卵惦。
#customers td, #customers th
{
font-size:1em;
border:1px solid lightslategrey;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:lightcoral;
color:#ffffff;
}
- 我們在
<th>元素上設(shè)置了一些padding——這些元素使數(shù)據(jù)項(xiàng)有了一些空間阻肿，使表看起來更加清晰。
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
- 對(duì)標(biāo)題欄進(jìn)行不同的設(shè)置
4沮尿、頁腳
頁腳的制作就相對(duì)比較簡單了丛塌，就是背景+文字较解，這個(gè)跟內(nèi)容欄的操作就是一樣的了。
5赴邻、聯(lián)系方式
- Html內(nèi)容編輯
<div class="contact">
<b>
<p>聯(lián)</p>
<p>系</p>
<p>方</p>
<p>式</p>
</b>
</div>
- 樣式化
.contact{
background-color:darkgrey;
float: right;
right: 3px;
bottom:10px;
width: 50px;
height: 180px;
margin: 0 auto;
position: fixed;
text-align:center;
vertical-align: middle;
}
.contact p{
color: white;
}
-div的背景印衔，大小設(shè)置都是同樣的操作，主要就在于這個(gè)聯(lián)系方式位置是固定的姥敛，一直都在頁面的右下角奸焙。right: 3px; bottom:10px; position: fixed;這幾個(gè)設(shè)置非常關(guān)鍵。
5彤敛、總結(jié)
這部分教程与帆，主要就是講了一個(gè)頁面的分塊化，不同的css所控制的版面布局不同墨榄。
詳細(xì)的CSS玄糟，如何構(gòu)建表格，以及使div固定位置顯示袄秩，不受控制條影響茶凳。
