整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
首先頁(yè)面的最左側(cè)是一個(gè)廣告，采用固定定位；然后最上面header是一個(gè)頭部，主要是一張圖片；下面的nav是一個(gè)導(dǎo)航欄，包含五個(gè)鏈接；下面是主體部分，左側(cè)的上面是一個(gè)表格，下面是四張圖片，當(dāng)鼠標(biāo)放到圖片上會(huì)有一個(gè)放大的效果，右側(cè)有4個(gè)div是四種咖啡的詳細(xì)介紹；最下面有一個(gè)腳本。
四個(gè)部分：header， nav， main， footer，
再加上一個(gè)廣告部分，五個(gè)部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
```
再初步定義一下css樣式
```style.css
/*默認(rèn)樣式的清零*/
*{
margin: 0px;
padding: 0;
}
body {
font-size:16px;
color: #673929;
}
#container {
margin:0 auto; /*水平居中*/
width:900px;
}
#header {
height:220px;/*必須添加，否則header下面有10px而不是5px空白*/
margin-bottom:5px;
/*position:relative; 父層定位*/
}
#nav{
height:30px;
margin:5px;
background-color:#09c;
font: 18px/30px 微軟雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
#main{
background:red;
height: 2050px;/**/
}
#aside {
float:left;
width:300px;
height: 500px;
background-color:#6cf;
text-align: center;
font-size: 14px;
}
#content{
float:right;
width:595px;
height: 2050px;
margin-bottom:5px;
background-color:#cff;
}
#footer {
height:60px;
line-height: 60px;
background-color:#6cf;
clear:both; /*新加代碼*/
margin-top: 5px;
text-align: center;
}初步效果圖
eg：header部分
所用工具為DW
HTML代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>icafe咖啡館</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<p> <img src="images/banner.jpg"></p>
<div id="icon-list">
<img src="images/1.bmp">
<img src="images/2.bmp">
<img src="images/3.bmp">
<img src="images/4.bmp">
</div>
</div>
<div id="nav">
<p>
<a href="#">咖啡MENU</a>|
<a href="cook.html">咖啡COOK</a>|
<a href="#">咖啡STORY</a>|
<a href="#">咖啡NEWS</a>|
<a href="#">咖啡PARTY</a>
</p>
</div>
<div id="main">
<div id="aside">
<h2>咖啡MENU</h2>
<table >
<tr>
<th ></th>
<th >拿鐵<br />Latte</th>
<th >卡布奇諾<br />Cappuccino</th>
<th >摩卡<br />Mocha</th>
<th >濃縮咖啡<br />Espresso</th>
</tr>
<tr>
<th scope="row" >大杯</th>
<td>35</td>
<td>35</td>
<td>35</td>
<td>30</td>
</tr>
<tr>
<th scope="row" >中杯</th>
<td>30</td>
<td>30</td>
<td>30</td>
<td >25</td>
</tr>
<tr>
<th scope="row" >小杯</th>
<td>25</td>
<td>25</td>
<td>25</td>
<td>20</td>
</tr>
</table>
<div id="imglist">
<div class="polaroid rotate_left">
<img src="images/Mocha.jpg" />
</div>
<div class="polaroid rotate_right">
<img src="images/Latte.jpg" />
</div>
<div class="polaroid rotate_left">
<img src="images/Espresso.jpg" />
</div>
<div class="polaroid rotate_right">
<img src="images/Cappuccino.jpg" />
</div>
</div>
</div>
<div id="content">
<div class="subcont">
<img src="images/Latte.jpg" alt="">
<div class="subtext">
<h2>拿鐵Caffè Latte</h2>
<p>這是一種傳統(tǒng)的經(jīng)典飲料——濃縮咖啡調(diào)入熱牛奶，其上覆蓋一層輕盈的奶沫。<br>品嘗此款咖啡時(shí)，您可以選擇特別加入某種口味（如香草，焦糖或杏仁口味）的糖漿。</p>
</div>
</div>
<div class="subcont">
<img src="images/Cappuccino.jpg" alt="">
<div class="subtext">
<h2>卡布奇諾Cappuccino</h2>
<p>這款咖啡沿襲傳統(tǒng)技法，由我們技藝嫻熟的咖啡吧員將手工制作的熱奶與細(xì)膩奶泡輕柔地澆在濃縮咖啡之上制作而成。</p>
</div>
</div>
<div class="subcont">
<img src="images/Mocha.jpg" alt="">
<div class="subtext">
<h2>摩卡Caffè Mocha</h2>
<p>這款咖啡由醇香的摩卡醬，濃縮咖啡和蒸奶相融相合，上面覆以攪打奶油。<br>寒冷的日子里，憂傷的時(shí)光中,任何人都無(wú)法抵抗她的誘惑。</p>
</div>
</div>
<div class="subcont">
<img src="images/Espresso.jpg" alt="">
<div class="subtext">
<h2>濃縮咖啡Espresso</h2>
<p>這是咖啡的精粹，以最濃縮的方式顯現(xiàn)。濃縮咖啡帶點(diǎn)焦糖味道，濃厚馥郁。</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>蕪湖~~</p>
</div>
</div>
<div id="l-fix">
<p> <img src="images/Latte.jpg"></p>
</div>
</body>
</html>
```
CSS代碼
```style.css
*{
margin: 0;
padding: 0;
}
body {
font-family:"微軟雅黑";
font-size:16px;
color: #673929;
}
#container {
margin:0 auto;
width:900px;
}
#header {
height:220px;/*必須添加，否則header下面有10px而不是5px空白*/
margin-bottom:5px;
position:relative; /*父層定位*/
}
#icon-list{
position:absolute;/*子層定位*/
top:170px;
right: 30px;
width: 130px;
height: 30px;
font-size: 0px;
/*background: white;*/
}
#icon-list img{
margin-left:5px;
}
#nav{
height:30px;
margin-bottom:5px;
background:#09c;
font: 18px/30px 微軟雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
a:link{
color: #fff;
text-decoration: none;
}
a:visited{
color: #fff;
text-decoration: none;
}
a:hover{
color: yellow;
text-decoration: none;
}
a:active{
color: #fff;
text-decoration: none;
}
#main{
background:red;
/*margin-bottom:5px;已經(jīng)坍縮為0,放在子容器內(nèi)設(shè)置*/
}
#aside {
float:left;
width:300px;
background:#6cf;
text-align: center;
font-size: 14px;
color: #000;
}
#aside h2{
margin: 20px;
}
#imglist{
width: 130px;
margin: 0 auto;
}
.polaroid
{
width:85px;
padding: 10px;
background-color: #eee;
border:1px solid #BFBFBF;
box-shadow:2px 2px 4px #aaa;
border-radius: 5px;
}
.rotate_left
{
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
.rotate_right
{
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
#imglist img{
height: 95px;
width: 85px;
margin: 0 auto;
font-size: 0;
}
#imglist img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#content{
float:right;
width:595px;
margin-bottom:5px;
background:#cff;
}
.subcont{
width: 570px;
margin: 10px auto;
clear: both;
}
.subcont img{
margin: 5px;
padding: 5px;
float: left;
border: 1px dashed #000;
}
.subcont .subtext{
width: 60%;
float: left;
margin: 5px;
}
.subcont h2{
margin: 5px;
}
.subcont p{
font:16px/2em 微軟雅黑;
}
#footer {
height:60px;
line-height: 60px;
background:#6cf;
clear:both; /*新加代碼*/
margin-top: 5px;
text-align: center;
}
#l-fix{
position: fixed;
top:100px;
left:5px;
}
#l-fix img{
height: 100px;
width: 100px;
}最終效果
天一個(gè)小案例，今天的案例是雙開(kāi)門。首先看一下效果預(yù)覽，有一張大的背景圖，當(dāng)鼠標(biāo)經(jīng)過(guò)這張大的背景圖的時(shí)候會(huì)把左右兩輛車向旁邊展開(kāi)，最后展示出來(lái)的是汽車內(nèi)部的內(nèi)飾儀表盤的狀態(tài)。應(yīng)用到的技術(shù)是html加CS就能完成，就是這樣一個(gè)預(yù)覽的效果，統(tǒng)稱為雙開(kāi)門案例。接下來(lái)去錄制一下講解視頻。
·回到vscode編輯器，這個(gè)案例需要有一個(gè)容器container，容器里面有兩個(gè)元素，一個(gè)是左邊的盒子，一個(gè)是右邊的盒子，left和right。
·然后到title下面這一行來(lái)個(gè)style，寫一些ACC的樣式。寫之前先把內(nèi)外編劇清空，margining，pedaling。
·再接著給container容器去設(shè)置一下寬高，寬度為1336個(gè)像素，高度為600像素，這個(gè)寬高取決于圖片素材的原始尺寸。
·來(lái)到Vasco的右下角可以看到整張圖片的寬高是1366和600的，高度跟圖片寬高保持一致可以防止圖片形變好。
·容器設(shè)置好之后可以給它一個(gè)邊框線輔助，目前應(yīng)該能夠預(yù)想到默認(rèn)是在瀏覽器視口左上角的，這個(gè)盒子在瀏覽器視口的左上角。假如想觀察起來(lái)更方便可以給它加上外邊距margin上下各有100像素的距離，左右是auto，這樣盒子在水平方向就集中了，在垂直方向距離上方有100像素，看起來(lái)更方便觀察。
·這一波操作做好之后可以給它加上一個(gè)背景圖片background UIO屬性引進(jìn)來(lái)，引到的素材是BG點(diǎn)jpg。這張圖片是剛才汽車內(nèi)飾的儀表盤界面，瑪莎拉蒂。
·整完之后再去設(shè)置一下container中的left和container中的right，這兩盒子的寬高分別是副容器的一半，高度是完整高度，寬度是它的一半，高度是完整高度就是600像素。
·剛剛設(shè)置好之后，它也有對(duì)應(yīng)的背影圖片給它引進(jìn)來(lái)，這張背影圖片叫做FM。
可以看到兩張圖片都成功引入了，這個(gè)元素材其實(shí)是有兩輛車的，可以打開(kāi)元素材看一看，有左右兩輛車，左邊這輛是深藍(lán)色，右邊這輛是白色，這兩輛車剛好是車頭相對(duì)。
假如想要讓這個(gè)汽車能夠形成一個(gè)雙開(kāi)門的效果，需要讓這個(gè)盒子首先布局在整個(gè)附容器的一行上展示。目前為什么它會(huì)掉下去？因?yàn)閘eft和right這兩個(gè)都是div元素，div元素獨(dú)占一行，所以是上下排列，可以使用浮動(dòng)讓它們?cè)谝恍猩险故緍eload left，這樣兩個(gè)盒子就在同一行展示。
現(xiàn)在還要再微調(diào)一下右邊盒子中的圖片，目前這個(gè)還是一個(gè)深藍(lán)色的車，車頭朝右，想把它改成白色的車頭朝左的狀態(tài)。運(yùn)用到的技術(shù)其實(shí)就是background positior，讓它的圖片邊緣跟容器的右側(cè)都貼齊，然后去看一下，它就變成了一個(gè)車頭找左的容器。
假如感受不到這種邊界感，可以加個(gè)邊框線看一看，這樣就能感受到。當(dāng)然這一家可能會(huì)有一些附帶的效果，因?yàn)槿萜鞣挪幌驴赡芤矔?huì)掉下來(lái)，所以為了不至于太難受，可以給它加上一個(gè)sign包的box，加上這屬性之后，哪怕寬度放不下也會(huì)自動(dòng)分配。
加了邊框線之后就能感受到了左右兩個(gè)盒子，這一塊是右盒子，那一塊是左盒子。通過(guò)背影圖片基本的布局已經(jīng)調(diào)好了，再接下來(lái)需要給它做一個(gè)雙開(kāi)門的效果。
它的案例實(shí)現(xiàn)的邏輯就是鼠標(biāo)經(jīng)過(guò)container，讓left的格子向左邊移，讓right的盒子向右邊，移動(dòng)的距離多少自己去決定，一般都是移動(dòng)自身寬度的100/100。有一個(gè)很好用的屬性叫做transform，transform里有個(gè)屬性值叫做translate，可以通過(guò)這個(gè)來(lái)實(shí)現(xiàn)百分比的操作。
接下來(lái)去實(shí)現(xiàn)一下，content容器選中always效果，加上讓left盒子向左移動(dòng)，就給它一個(gè)transform，as light，加上軸方向，x軸往左移動(dòng)就給它一個(gè)復(fù)數(shù)，因?yàn)樨?fù)數(shù)線代表是x軸方向的負(fù)方向。
·然后讓里面right是向右移動(dòng)，所以負(fù)號(hào)可以去了，就正的往右去移動(dòng)。這時(shí)候去看應(yīng)該會(huì)有一個(gè)展開(kāi)的效果，但是比較生硬，可以給它加上一些過(guò)渡，讓它看起來(lái)更柔和一些。跟上過(guò)渡屬性transcation，過(guò)渡時(shí)間可以1秒鐘、2秒鐘自己去決定，加了過(guò)渡時(shí)間之后就沒(méi)那么出霧了。
·目前還面臨的一個(gè)問(wèn)題就是有多余顯示的部分也幾度移開(kāi)了，還有一些破綻的。這個(gè)情況是由overflow hiding來(lái)做的，一出隱藏，給container加一個(gè)overflow hiding，又可以讓內(nèi)容超出的部分自動(dòng)被解裁掉。始終寬高要盒子中才能夠有效渲染，超過(guò)盒子就不會(huì)被渲染出來(lái)。這樣就實(shí)現(xiàn)了雙開(kāi)門的案例。
·最后把剛才調(diào)試的邊框線取了，所有的邊框線都是為了輔助調(diào)試用，調(diào)試完之后就把邊框線刪了。
這個(gè)案例就分享到這里。
TML是超文本標(biāo)記語(yǔ)言（英語(yǔ)：HyperText Markup Language，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。
您可以使用 HTML 來(lái)建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來(lái)解析。
.HTML指的是超文本標(biāo)記語(yǔ)言
.HTML不是編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
.標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽
.HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
.HTML文檔包含了HTML標(biāo)簽和文本內(nèi)容
.HTML文檔也叫做web頁(yè)面
HTML實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> HTML教程實(shí)例</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落</p>
</body>
</html>注意：對(duì)于中文網(wǎng)頁(yè)需要使用<meta charset="udf-8">聲明編碼，否則出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會(huì)設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為 <meta charset="gbk">。
實(shí)例解析：
<!DOCTYPE html>聲明為HTML5文檔
<html>元素是HTML頁(yè)面的根元素
<head>元素包含了文檔的元數(shù)據(jù)
<title>元素描述了文檔的標(biāo)題
<body>元素包含了可見(jiàn)的頁(yè)面內(nèi)容
<h1>元素定義一個(gè)大標(biāo)題
<p>元素定義一個(gè)段落
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
