整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML+CSS3 橫向?qū)Ш綑?/h1>
          HTML+CSS3 橫向?qū)Ш綑?/br>

          果圖:

          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>
        1. 未添加任何css樣式時候的導(dǎo)航欄左面區(qū)域
        2. 2.接下來我們消除一些標(biāo)簽的默認(rèn)樣式,同時通過添加樣式來達(dá)到我們想要的效果。

          1. 消除標(biāo)簽的默認(rèn)樣式

          *{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;} // 清除浮動

          2. 為每一個區(qū)域起一個名字,方便選擇器進(jìn)行選擇。

          3. 添加CSS樣式

          1)首先我要讓選項橫向排列,采用左浮動

          .nav .nav_left ul li {
            float: left;
          }

          2)容器的制作

          用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;
          }

          5)調(diào)整字體大小,顏色

          根據(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


          主站蜘蛛池模板: 蜜桃视频一区二区三区在线观看 | 无码精品人妻一区二区三区人妻斩| 日本一区二区三区爆乳| 日韩在线视频一区| 一区二区三区在线免费| 韩国福利一区二区美女视频| 无码少妇一区二区浪潮av| 国产精品视频一区二区三区四| 日韩毛片基地一区二区三区| 国产伦精品一区二区三区免.费| 亚洲一区日韩高清中文字幕亚洲| 狠狠做深爱婷婷综合一区 | 亚洲高清日韩精品第一区| 无码人妻一区二区三区av| 激情综合丝袜美女一区二区| 亚洲国产欧美国产综合一区 | 国内精品视频一区二区三区八戒| 日本一区二区三区精品国产| 色综合视频一区二区三区44 | 日本精品一区二区久久久| 一本一道波多野结衣一区| 另类一区二区三区| 一区视频在线播放| 中文字幕无线码一区| 精品免费久久久久国产一区 | 国模吧一区二区三区| 久久精品国产第一区二区三区 | 成人区人妻精品一区二区三区| 中文字幕一区二区三区视频在线| 日韩三级一区二区三区| 一区二区三区在线观看免费| 亚洲综合av一区二区三区| 色婷婷av一区二区三区仙踪林| 亚洲综合在线一区二区三区| 精品国产一区二区三区不卡 | 日本伊人精品一区二区三区| 日本午夜精品一区二区三区电影| 亚洲午夜精品一区二区麻豆| 日韩AV在线不卡一区二区三区| 国产精品区一区二区三| 人妻少妇精品一区二区三区|