黑馬程式設計師雲道頁面——鞏固html和css（新特性沒有使用）
阿新 • • 發佈：2018-11-08
注意：
一.寫的是黑馬程式設計師跟著老師寫的，有點小差別，主要看註釋理解結構
二.以前學thml和css沒有深入理解到盒子的坍塌問題，注意理解外邊距的合併。有兩種情況，一個是兩個盒子緊挨著一起，會進行外邊距合併，只保留較大的外邊距，注意就行。一個是盒子的巢狀，造成合並解決辦法有兩個，一是為父元素新增1px的外邊距或內邊距（可能會將盒子變大），而是在父元素中新增overflow：hidden;
三.另外要深刻理解浮動，因為某些介面需要幾個盒子進行元素的並列等排布時，需要定義為float:left; 但是會影響到，後面緊著的元素的排列。解決方法有四種：
1、額外標籤法：接著浮動的元素後面寫一個空元素並定義清除浮動。這樣就將他作為一條分割線，接下來的元素不會受到影響。但是空元素的可讀性不強，結構化較差。
2、父級元素新增overflow屬性，選擇一個想要的值（auto、hidden、scroll等），但是這樣不會自動換行，當一個盒子滿了的時候，可能將溢位的元素隱藏掉。
3、使用:after偽元素選擇器
固定寫法.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} //將需要清除浮動的元素類名新增clearfix
.clearfix{*zoom:1;} //這句話表示IE6/7觸發hasLayout，zoom前面的*其他瀏覽器遇到時直接跳過，提升速度。
4、:after :before兩個偽元素選擇器聯合使用
固定寫法.clearfix:after,clearfix:before{content:"";display:table} //發出BFC，BFC可以清除浮動。
.clearfix:after{clear:both} .clearfix{*zoom:1}
四.在廣告欄或者左右箭頭等的佈局，用到絕對定位時，一定要記住:”子決夫相”，子元素使用絕對定位時，如果父元素沒有特殊定位的屬性話不知道會以什麼為自己的參考點。（一般以盒子的左上角點為基準點）。
五.開發時，在自己需要做模組可以先設定高度，完成後再刪除，利用內容撐開盒子即可，可以提高開發效率。
六.開發是，有小套路多總結。如行高定義為字型高，即可將文字垂直居中，盒子平移的時候，往想要的方向上移動50%，然後在往回移動自己盒子移動方向上的寬度的一般即可。
HTML結構程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘寶之外另一個生態</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="inner">
<div class="logo">
<a href="#"><img src="img/logo.jpg"></a>
</div>
<!--頂部內容左邊logo-->
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">雲道商城</a></li>
<li><a href="#">智慧門店</a></li>
<li><a href="#">銷售平臺</a></li>
<li><a href="#">媒體聯盟</a></li>
<li><a href="#">關於雲道</a></li>
</ul>
</div>
</div>
</div>
<!--導航欄部分-->
<div class="banner"></div>
<!-- 主體logo模組 -->
<div class="service">
<div class="service-head">
<h3>
<img src="img/ourServicer.jpg">
</h3>
<p>shopcmd雲道，國內領先的獨立電商解決方案及全渠道營銷平臺。完整的產品體系，簡約的系統，個性化的前端，全覆蓋多渠道營銷體系...
我們致力於打造一個服務於品牌商城/獨立電商的完整生態，讓企業的獨立電商之路變得更加簡單，也更有價值！</p>
</div>
<div class="service-body">
<ul>
<li class="left-serviceBox">
<img src="img/servicerLeft.jpg">
<h3>我是賣家</h3>
<p>
shopcmd雲電商解決方案，我們不僅僅是領先的獨立商城建站系統。
我們從網際網路時代品牌建設和品牌營銷的全新視角，賦予了品牌商城及獨立電商更
大的生存空間和存在價值！
</p>
<a href="#">我要建站</a>
</li>
<li class="mian-serviceBox">
<img src="img/servicerMain.jpg">
<h3>我要營銷</h3>
<p>
雲道不斷完善的營銷系統，聯合優質媒體資源，整合常用的網路營銷模式及終端，
以最簡單的產品形態，幫助獨立商城實現店鋪及商品資訊在全網的快速分銷。
</p>
<a href="#">我要推廣</a>
</li>
<li class="right-servicerBox">
<img src="img/servicerRight.jpg">
<h3>媒體合作</h3>
<p>
真正的全民營銷時代，無需學習，無需維護。通過您的網站、朋友圈、媒體流量、
移動展現、媒體解決方案獲取收益。我們致力於實現合作媒體流量價值的最大化。
</p>
<a href="#">我要合作</a>
</li>
</ul>
</div>
</div>
<!-- 我的服務模組 -->
<div class="case-bgc">
<div class="case">
<div class="service-head">
<!-- 這裡還是命名為service-head是為了繼續使用上面已經定義好的樣式，省略程式碼 -->
<h3>
<img src="img/class-case.jpg">
</h3>
</div>
<div class="case-body clearfix">
<ul>
<li>
<img src="img/case-left.jpg">
<div class="text">幫助中小企業快速開啟阿薩德打撒電子商務</div>
<div class="mask"></div>
</li>
<li class="main-caseBox">
<img src="img/case-main.jpg">
<div class="text">幫助中小企業快速開啟阿薩德打撒電子商務</div>
<div class="mask"></div>
</li>
<li>
<img src="img/case-right.jpg">
<div class="text">幫助中小企業快速開啟阿薩德打撒電子商務</div>
<div class="mask"></div>
</li>
</ul>
<a href="#" class="left-arrow"><</a>
<a href="#" class="right-arrow">></a>
</div>
</div>
</div>
<!-- 經典案例模組 -->
<div class="case">
<div class="service-head">
<!-- 這裡還是命名為service-head是為了繼續使用上面已經定義好的樣式，省略程式碼 -->
<h3>
<img src="img/media.jpg">
</h3>
</div>
<div class="media-body clearfix">
<ul class="clearfix">
<li><a href="#"><img src="img/taobao1.jpg"></a></li>
<li><a href="#"><img src="img/jingdong.jpg"></a></li>
<li><a href="#"><img src="img/shangpai.jpg"></a></li>
<li><a href="#"><img src="img/albb.jpg"></a></li>
<li><a href="#"><img src="img/zkkj.jpg"></a></li>
<li><a href="#"><img src="img/taobao2.jpg"></a></li>
<li><a href="#"><img src="img/jingdong.jpg"></a></li>
<li><a href="#"><img src="img/shangpai.jpg"></a></li>
<li><a href="#"><img src="img/albb.jpg"></a></li>
<li><a href="#"><img src="img/zkkj.jpg"></a></li>
<li><a href="#"><img src="img/taobao2.jpg"></a></li>
<li><a href="#"><img src="img/jingdong.jpg"></a></li>
<li><a href="#"><img src="img/shangpai.jpg"></a></li>
<li><a href="#"><img src="img/albb.jpg"></a></li>
<li><a href="#"><img src="img/zkkj.jpg"></a></li>
</ul>
</div>
</div>
</div>
<!-- 合作媒體部分結束 -->
<div class="footer">
<div class="subnav">
<a href="#">shopcmd</a> |
<a href="#">首頁</a> |
<a href="#">官網雲商城</a> |
<a href="#">智慧門店</a> |
<a href="#">營銷平臺</a> |
<a href="#">媒體聯盟</a> |
<a href="#">關於我們</a> |
</div>
<p>Copyright 2015蘇州海雲網絡科技有限公司版權所有 | 蘇ICP備15038170號-3</p>
</div>
</body>
</html>css樣式程式碼：
*{
margin: 0;
padding: 0;
}
/*任何網頁的第一步，去掉預設屬性*/
li{
list-style: none;
}
a{
text-decoration: none;
}
/*將頁面上所有的li和 a標籤預設的樣式去掉*/
body{
background-color: #fafafa;
}
/*這個顏色主要為了諧音發發發，電商平臺*/
.header{
height: 100px;
background-color: #fff;
}
/*設定頭部的通欄*/
.inner{
width: 1200px;
height: 100px;
margin: 0 auto;
line-height: 100px;
}
/*版心的寬度為1200px，頭部通欄內部的元素,將行高設定為字型高度
即可使字型居中，同時行高會繼承在父級元素中定義行高可以使子集元素都居中*/
.logo{
float: left;
}
.nav{
float: right;
}
.nav li{
display: inline-block;
margin: 0 20px;
}
/*導航欄一行排列*/
.nav li a{
color: #333;
}
.nav li a:hover{
color: #2288f6;
}
/*以上導航欄部分的樣式*/
.banner{
height: 620px;
background: url(../img/banner.jpg) no-repeat top center;
}
/*主體logo模組*/
.service{
margin: 75px auto 0;
/*第三個引數表示距離底部的外邊距,設定為0，不然會影響到下面經典網站的排列 */
width: 1055px;
/*height: 500px;*/
/*高度就為了好測試，寫完這個模組之後清除,但是會有浮動，如果接著寫會跑到上面去，需要清除浮動*/
}
/*兩個主體logo和這個下面緊接著的案例模組是一樣的頭標題用一樣的css模板即可*/
.service-head{
border-top: 1px solid #ccc;
margin: 0 25px;
}
.service-head h3{
width: 163px;
height: 52px;
margin: 0 auto;
margin-top: -15px;
}
/*這裡不能寫成margin：-15px auto，這樣會使h3的下邊框也為-15px，造成p元素的內容往上平移*/
.service-head p{
font-size: 12px;
color: #666;
line-height: 26px;
text-align: center;
width: 810px;
/*原本盒子是跟父級元素一樣的大小，現在變小了之後內容居中但是盒子沒有對齊，通過下面套路塊級元素居中對齊*/
margin: 0 auto;
}
/*行高的英文的距離是基線和基線之間的距離，對於中文方塊字來說就是前面一行底線和第二行底線之間的距離*/
.service-body{
margin-top: 40px;
overflow: hidden;
/*清除浮動，不然會影響下面經典案例的會跑到上面去*/
}
.service-body li{
width: 318px;
height: 510px;
background-color: #fff;
float: left;
border: 1px solid #e7e8e9;
}
.mian-serviceBox{
margin: 0 45px;
/*三個這樣的盒子就把父級元素的盒子擠滿，只要將中間盒子的左右邊距都設為45即可*/
}
.service-body img{
margin: 40px 35px;
}
.service-body h3{
font-size: 18px;
font-weight: normal;
text-align: center;
margin-bottom: 20px;
}
.service-body p{
color: #666;
width: 235px;
/*這段文字的寬度比上面的圖片寬度小一些*/
margin: 0 auto;
line-height: 25px;
}
.service-body a{
display: block;
width: 148px;
height: 38px;
border: 1px solid #ff9412;
text-decoration: none;
margin: 30px auto;
text-align: center;
line-height: 38px;
/*行間距設定為字型的高度，即可將字型垂直居中*/
color: #ff9412;
font-size: 12px;
border-radius: 5px;
}
.service-body a:hover{
color: #fff;
background-color: #ff9412;
}
.mian-serviceBox img{
margin: 32px 35px;
/*中間圖片高度多了16px，通過上下邊距減半可以對齊*/
}
.mian-serviceBox a{
margin: 56px auto;
/*中間的文字是五段，少一行，行高26px，將這裡的a標籤上外邊距多設定26px即可*/
}
/*我的服務模組*/
.case-bgc{
margin-top: 75px;
width: 100%;
background-color: #ffffff;
display: inline-block;
}
/*上面我們的服務模組跟這裡的例項模組，顏色有差異，這個這些程式碼當作背景盒子即可*/
.case{
width: 1055px;
margin: 75px auto 75px;
}
.case-body{
margin-top: 80px;
position: relative;
/*設定為相對定位，為箭頭的定位設定基礎，子決夫相*/
}
.case-body li{
width: 325px;
height: 210px;
background-color: blue;
float: left;
position: relative;
/*為了下面的半透明的效果，這裡要用絕對定位，下面的相對定位。口訣：子決夫相*/
}
.main-caseBox{
margin: 0 40px;
}
.text{
height: 45px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
text-align: center;
line-height: 45px;
color: #fff;
font-size: 12px;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5) url(../img/sercher.png) center no-repeat;
/*選中之後顏色稍微亮一點*/
position: absolute;
top: 0;
left: 0;
display: none;
/*預設看不見，滑鼠懸停啟用*/
}
.case-body li:hover .mask{
display: block;
/* block不光有轉換為塊級元素的作用，還有顯示的意思，這裡還有一個
作用，預設轉換為塊級元素*/
}
.left-arrow,.right-arrow{
width: 60px;
height: 60px;
background: rgba(0,0,0,0.2);
/*左箭頭和右箭頭為了方便直接通過a便籤裡面放左括號和右括號寫出來*/
position: absolute;
/*通過設定相對定位，完成特定位置的佈局。同時預設轉換為行內塊元素，不用再寫出來*/
top: 50%;
margin-top: -30px;
/*套路，向想要方向移動50%,再往回走半個盒子*/
/*同時，父元素沒有清除浮動，位置不正確，需要將父元素清除浮動
但是如果同overflow清除浮動，超出部分不會顯示，用:after偽元素清除浮動*/
text-align: center;
line-height: 60px;
color: #ffffff;
text-decoration: none;
font-size: 25px;
border-radius: 50%;
/*圓角直接設定為50%就能得到圓*/
}
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1;
}
/*IE6/7專用，zoom前面的*其餘瀏覽器碰到直接跳過*/
.left-arrow{
left: -90px;
}
.right-arrow{
right: -90px;
}
.left-arrow:hover,.right-arrow:hover{
background: rgba(0,0,255,0.4);
}
/*經典案例模組*/
.media-body{
margin-top: 35px;
width: 1048px;
height: 240px;
overflow: hidden;
/*這裡相當於li的爺爺級元素，通過控制寬度將li標籤最右邊顯示的邊框切除
可能有問題：為什麼爺爺輩元素比夫父元素還小一點而父級元素能夠在爺爺元素裡面
我的理解是，可以類比一個小盒子裡面放了一個寬度一樣的盒子，但是長度卻高了一點*/
}
.media-body ul{
width: 1070px;
/*li的父盒子，但是比爺爺大，不然最右邊的一個會掉下去*/
}
.media-body li{
width: 210px;
height: 65px;
float: left;
border-bottom: 1px dashed #ccc;
border-right: 1px dashed #ccc;
text-align: center;
padding-top: 15px;
}
/*合作媒體模組*/
.footer{
height: 165px;
background-color: #212425;
margin-top: 75px;
overflow: hidden;
/*下面也要mergin-top直接寫沒有效果，因為巢狀盒子有塌陷的bug，這是一種解決方法
還有一種方法是此父元素條件內邊距或者外邊距設為1px*/
}
.subnav{
text-align: center;
margin-top: 50px;
color: #f0f1f1;
font-size: 14px;
/*將a標籤後面的分割線，顏色作為文字處理*/
}
.subnav a{
color: #f0f1f1;
text-decoration: none;
padding: 0 5px;
font-size: 14px;
}
.subnav a:hover{
color: #2288f6;
text-decoration: underline;
}
.footer p{
text-align: center;
color: #888888;
margin-top: 30px;
}
效果圖：
