整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果圖：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS3橫向?qū)Ш綑?lt;/title> <link rel="stylesheet" href="index.css" media="screen" type="text/css" /> </head> <body> <article class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">Tab One</label> <input id="two" name="tabs" type="radio" value="Two"> <label for="two">Tab Two</label> <input id="three" name="tabs" type="radio"> <label for="three">Tab Three</label> <input id="four" name="tabs" type="radio"> <label for="four">Tab Four</label> <div class="panels"> <div class="panel"> <h2>This is Panel One</h2> <p>This is Panel One</p> </div> <div class="panel"> <h2>This is Panel Two</h2> <p>this is panel two</p> </div> <div class="panel"> <h2>This is Panel Three</h2> <p>this is panel three</p> </div> <div class="panel"> <h2>This is Panel four</h2> <p>this is panel four</p> </div> </div> </article> </body> </html>
index.css
言
最近處于一個特殊的時期，由于一個偶然的機(jī)會學(xué)習(xí)了前端，在很短的時間內(nèi)學(xué)完了HTML5+CSS3，進(jìn)入了JS的學(xué)習(xí)，感覺到學(xué)習(xí)速度太快對我來說不是一件好事，于是我暫停了JS的學(xué)習(xí)，打算完成一到兩個項目實(shí)戰(zhàn)。第一個項目就是用純H5+C3實(shí)現(xiàn)蘇寧易購官網(wǎng)的頁面制作。
一、準(zhǔn)備工作
1、結(jié)構(gòu)分析
我將整個頁面分為了7大塊，導(dǎo)航欄，中間的5塊內(nèi)容，以及頁面底部。當(dāng)然這并不是絕對的，在我們需要的時候隨時會進(jìn)行調(diào)整。
2、圖片素材
將蘇寧首頁進(jìn)行截圖保存，將來用ps進(jìn)行測量，切片等。
將蘇寧網(wǎng)頁上的一些圖片扒下來。
在阿里巴巴矢量圖標(biāo)庫中尋找一些需要的矢量圖標(biāo)。
（沒有設(shè)計搞真難啊）
二、導(dǎo)航欄制作
1、框架分析
首先分析結(jié)構(gòu)，可以分為兩個區(qū)域左邊和右邊
因此我們可以將這兩個區(qū)域放在一個容器之內(nèi)。先編寫HTML框架，之后再編寫CSS樣式。HTML相當(dāng)于我們建筑的四梁八柱，人體的骨架，是主題結(jié)構(gòu)，CSS相當(dāng)于裝飾品，血肉。
導(dǎo)航欄分為兩級菜單，我們只做一級菜單，也就是鼠標(biāo)沒有移動上去的時候所看到的內(nèi)容
對于一些選項來說，當(dāng)鼠標(biāo)移動上去的時候，會顯示一個下拉菜單，所以我又在li標(biāo)簽內(nèi)嵌套了div標(biāo)簽。為了不使代碼冗余，我只拷貝了一部分代碼。
<div class="nav">
<div class="nav_left">
<ul>
<li>
<div>
<a href="#">網(wǎng)站導(dǎo)航
</a>
</div>
</li>
</ul>
</div>
<div class="nav_right">
<ul>
<li>
<a href="#">企業(yè)采購
</a>
</li>
</ul>
</div>
</div>*{margin: 0;padding: 0;}
ul{list-style: none;}
img{display: block;}
h1,h2,h3{font-size: 16px;font-weight: normal;}
a{text-decoration: none;color: #333333;} //鏈接的樣式
body{font-family: Arial;} // 字體設(shè)置
.l{float: left;} //左浮動
.r{float: right;} //右浮動
.clear::after{content: "";display: block;clear: both;} // 清除浮動.nav .nav_left ul li {
float: left;
}用PS測量出容器高度，寬度我們設(shè)置成自適應(yīng)，添加好背景色后，添加下邊框，1px，
.container_fluid {
width: 100%;
background: #f5f5f5;
border-bottom: 1px #eeeeee solid;
}3）令菜單水平
菜單分為左右兩塊，左div設(shè)置左浮動，li設(shè)置左浮動，右div設(shè)置右浮動，li設(shè)置左浮動（如果此處設(shè)置右浮動，第一個li標(biāo)簽在最右邊）。
4）使菜單的每一項之間保持相應(yīng)的距離
可以通過測量或者感覺來進(jìn)行調(diào)整，比如margin，padding。左菜單我給每一個li設(shè)置了固定寬度，另li中的div進(jìn)行居中。而右菜單設(shè)置了根據(jù)div內(nèi)容自適應(yīng)，為了不使div緊挨在一塊，我添加了padding。
#head .nav .nav_left ul li {
float: left;
width: 104px;
height: 33px;
font-size: 14px;
}
#head .nav .nav_left ul li div {
text-align: center;
}根據(jù)“設(shè)計稿”進(jìn)行字體大小，顏色的調(diào)整。
#head .nav span {
font-size: 10px;
color: #cfcad8;
}6）添加矢量圖標(biāo)
下載好矢量圖標(biāo)以后，進(jìn)行引用，一定要注意路徑。矢量圖標(biāo)是一種字體，因此可以用font-size ，color 進(jìn)行大小顏色的調(diào)整
通過給span標(biāo)簽添加選擇器進(jìn)行引入。
<li>
<div>
<a href="#">網(wǎng)站導(dǎo)航
<span class="iconfont icon-ai-arrow-down"></span></a>
</div>
</li>7）設(shè)置 hover 屬性。
菜單的選項，當(dāng)我們把鼠標(biāo)移動上去的時候，字體會變色，并且背景會變化成白色，并出現(xiàn)一個二級菜單。我們只做一個字體，背景變色效果。
#head .nav .nav_left ul li:hover {
background-color: white;
}
#head .nav .nav_left ul li a:hover {
color: #ff6600;
}這么設(shè)置之后，我們發(fā)現(xiàn)所有的選項，當(dāng)hover的時候背景都發(fā)生了變化，而沒有二級菜單的選項的背景色并沒有變化，我們可以再次添加hover，設(shè)置為原來的背景色對當(dāng)前的hover覆蓋，已達(dá)到我們想要的效果。
#head .nav .nav_right ul .no_hover:hover {
background-color: #f5f5f5;
}或者也可以通過偽類選擇器達(dá)到這一效果，（不過我對選擇器的使用不熟悉）
3、小結(jié)
1.在導(dǎo)航欄的制作過程中，出現(xiàn)了許多的小問題，例如div標(biāo)簽的重疊問題。我的解決方式就是刪除div標(biāo)簽的固定寬度，設(shè)置為自適應(yīng)，給他的父容器li標(biāo)簽加上了寬度，另div居中。還有一些語法的使用細(xì)節(jié)。
2.在添加樣式的過程中，選擇器的使用方式是多樣的，給不同的標(biāo)簽添加選擇器都可以起到同樣的效果。但是由于選擇器使用的不熟練，將一些樣式直接加在了標(biāo)簽中，這是非常不合格的。在真正的開發(fā)過程當(dāng)中，CSS和HTML一定是分開寫的，這樣便于代碼的維護(hù)。
3.在制作導(dǎo)航欄的過程中應(yīng)該設(shè)置手性的，但是添加了a鏈接之后默認(rèn)出現(xiàn)了手性。
4.導(dǎo)航欄的制作就告一段落了。我只制作了一級菜單，二級菜單的制作將會等到正在頁面制作完成之后在進(jìn)行制作。
例1: 無縫連續(xù)滾動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden; /* 防止?jié)L動的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們在復(fù)制一套出來-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>
<script type="text/javascript">
var ul=document.getElementsByTagName("ul")[0];
setInterval(function(){
if(getStyle(ul,"left")===-1000){
ul.style.left="0px";//執(zhí)行這一行代碼需要多長時間???
}
ul.style.left=getStyle(ul,"left") - 1 + "px";
},10)
function getStyle(obj,attr){
if(window.getComputedStyle){
return parseInt(window.getComputedStyle(obj)[attr]);
}else{
return parseInt(obj.currentStyle[attr]);
}
}
</script>
</body>
</html>圖片規(guī)格: 200px 130px
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
