• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>

  • HTML5學習：網頁開發01

    標簽： HTM5

    一、 網頁開發步驟

    1.通欄、版心概念

          通欄：始終占滿整個屏幕的寬度，不去設置寬度  或者 100%；

          版心：在ps中進行測量，測量出來是多少就寫多少

    2.新建站點文件

            a：網頁文件的規劃

               首頁：index.html

               css文件的部署：

                   重置樣式表（用來清除默認的css樣式的）

                   公共樣式表（寫當前項目公共的部分：頭部、底部）

                   私有樣式表（當前頁面自己的樣式）

     3.文件準備

    網頁樣式圖例：

     點擊下載：提取碼：aqr1

    4、步驟

    <body>
    <!-- 頭部 -->
    <div id="header">頭部</div>

    <!-- 導航 -->
    <div id="nav">導航</div>

    <!-- 輪播 -->
    <div id="banner">輪播</div>

    <!-- 內容 -->
    <div id="con">內容</div>

    <!-- 鏈接 -->
    <div id="links">鏈接</div>

    <!-- 底部 -->
    <div id="footer">底部</div>
</body>

    5、目錄結構

     二、源碼如下

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 私有樣式表一定要引入在最下面 -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 頭部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrapper">
            <h1>
                <img src="../images/logo.png" alt="">
            </h1>
            <form action="" method="">
                <input type="text" value="" placeholder="SEARCH...">
            </form>
        </div>
    </div>

    <!-- 導航 -->
    <div id="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>
          <li><a href="">人才交流</a></li>
          <li class="a_list"><a href="" >人才交流</a></li>
      </ul>
     
    </div>
    
    <!-- 輪播 -->
    <div id="banner"></div>

    <!-- 內容 -->
    <div id="con">
           <!-- 上面 -->
           <div class="contop">
            <div class="con_left">
                <h2>公司新聞</h2>
                <ul>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                    <li><a href="">文本文本</a><span>2020-11-20</span></li>
                </ul>
            </div>
            <div class="con_center">
                <h2>公司簡介</h2>
                <p class="p_list">公司成立于1998年</p>
                <p class="p_list2">已經成為電器行業，領軍型戰略公司</p>
            </div>
            <div class="con_right">
                <h2>人才招聘</h2>
                <img class="img" src="../images/shou.png">
                <img class="img2" src="../images/logo2.png">
            </div>
          </div>
          <div class="dome">
            <div class="dome_left1">
                <h2>市場項目</h2>
                <img src="../images/conbow1.png" alt="">
                <h4>交通軌道：由于主要采用電氣牽引，而且輪軌摩擦力較小，與公共...</h4>
            </div>
              <div class="dome_left">
                <img src="../images/conbow2.png" alt="">
                <h4>節能環保：由于不斷上漲的能源消耗和我們的專業知識，維持可持續...</h4>
              </div>
              <div class="dome_center">
                <img src="../images/conbow3.png" alt="">
                <h4>航空與船艦：如果你是在公海行駛，你需要確保你的船只的電力系統...</h4>
              </div>
              <div class="dome_right">
                <img src="../images/conbow4.png" alt="">
                <h4>石油、天然氣及采礦：在市場中的安全性，可靠性，效率和最短的停機...</h4>
              </div>

          </div>

        </div>
    
    <!-- 鏈接 -->
    <div id="links">
        <div class="links_left">
            <h1>產品中心</h1>
            <ul class="links_ul">
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
                <li>嘿嘿嘿嘿</li>
            </ul>
        </div>
        <div class="links_center">
            <h1>技術研發</h1>
            <ul>
                <li>九點十分</li>
                <li>九點十分</li>
                <li>九點十分</li>
                <li>九點十分</li>
                <li>九點十分</li>
            </ul>
        </div>
        <div class="links_right">
            <h1>網絡營銷</h1>
            <img class="links_img" src="../images/ditu.png">
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer">
        <ul class="footer_a">
            <li><a href="">網站地圖</a></li>
            <li><a href="">網站地圖</a></li>
            <li><a href="">網站地圖</a></li>
            <li class="footer_li"><a href="">網站地圖</a></li>
            
        </ul>
        <ul class="footer_b">
            <li><img class="footer_d" src="../images/footer-1.png"/></li>
            <li><img class="footer_d" src="../images/footer-2.png"/></li>
            <li><img class="footer_d" src="../images/footer-3.gif"/></li>
            <li><img class="footer_d" src="../images/footer-4.gif"/></li>
            <li><img class="footer_d" src="../images/footer-5.gif"/></li>
            <li><img class="footer_d" src="../images/footer-6.gif"/></li>
        </ul>
    </div>
</body>
</html>

    css

    @charset "utf-8";
/* 頭部 */
#header{
    height:100px;
    /* background:skyblue; */
}
#header .wrapper{
    width:963px;
    height:100px;
    /* background:yellowgreen; */
    /* 水平居中 */
    margin:auto;
}
#header .wrapper h1{
    float:left;
    padding:18px 0 0 20px;
}
#header .wrapper form{
    float:right;
    padding-top:39px;
}
#header .wrapper input{
    width:216px;
    height:28px;
    background:#f1f1f1;
    /* 去掉邊框 */
    border:0;
    /* 然后再寫我們要的樣式 */
    border:1px solid #e5e5e5;
    padding-left:16px;
}


/* 導航 */
#nav{
    height:60px;
    /* background:#7cc726; */
   
}
#nav ul{
    width: 963px;
    height: 60px;
    /* background: #7cc726; */
    margin: auto;
}
#nav ul li{
    float: left;
    width:119px;
    text-align:center;
    height:60px;
    line-height:60px;
    /* border-right:1px solid #20c958;   */
}
#nav ul a{
    font-size: 16px;
    color: black;
}

#nav ul .a_list{
    border-right: none;
}
/* 輪播 */
#banner{
    height: 466px;
    background:url("../images/banner.png") no-repeat center center ;
}
#con .contop{
    width:963px;
    height:241px;
    margin:auto;
    /* background:rgb(178, 226, 44); */
}
#con .contop .con_left{
    width:480px;
    height:241px;
    /* background:rgb(18, 161, 218); */
    float:left;
}
#con .contop .con_center{
    width:244px;
    height:241px;
    /* background:rgb(87, 62, 230); */
    float:left;
}
#con .contop .con_right{
    width:239px;
    height:241px;
    /* background:rgb(48, 228, 159); */
    float:left;
}
#con .con_left h2{
    padding: 36px 0 22px 0;
    color: #20c958;
}
#con .con_left ul{
    padding-right: 28px;
}
#con .con_left a{
    float: left;
    font-size: 12px;
    color:black;
}
#con .con_left span{
    float: right;
    font-size: 9px;
    color: #4f4f4f;

}
#con .con_left li{
    height:24px;
    line-height:24px;
    background:url("../images/dian.png") no-repeat left center;
    padding-left:14px;
}
#con .con_center h2{
    padding: 36px 0 22px 0;
    color: black;
}
#con .con_center .p_list{
  padding:25px 0 33px 0;
}
#con .con_right h2{
    padding: 36px 0 22px 0;
    
}
#con .con_right .img{
    padding: 1px 0 6px 21px;
    color: black;
}
#con .con_right .img2{
    padding: 1px 0 6px 21px;

}
/* 下面 */
#con .dome{
    width:963px;
    height:300px;
    margin:auto;
    /* background:rgb(173, 36, 116); */
}
#con .dome .dome_left1{
    width:240px;
    height:321px;
    /* background:rgb(216, 21, 64); */
    float:left;
}
#con .dome .dome_left{
    width:240px;
    height:241px;
    /* background:rgb(6, 87, 66); */
    float:left;
}
#con .dome .dome_center{
    width:244px;
    height:241px;
    /* background:rgb(170, 107, 36); */
    float:left;
}
#con .dome .dome_right{
    width:239px;
    height:241px;
    /* background:rgb(226, 13, 208); */
    float:left;
}
#con .dome .dome_left1 h2{
    padding: 20px 0 20px 0;
}
#con .dome h4{
    font-size: 12px;
    padding: 20px 20px 0 0;
}
#con .dome .dome_left{
    padding: 60px 0 20px 0;
}
#con .dome .dome_center{
    padding: 60px 0 20px 0;
}
#con .dome .dome_right{
    padding: 60px 0 20px 0;
}
/* 連接 */
#links{
    height: 253px;
    width: 963px;
    background: #e5e5e5;
    margin: auto;

}
#links .links_left{
    width: 480px;
    height: 253px;
    /* background: #20c958; */
    float: left;
}
#links .links_center{
    width: 199px;
    height: 253px;
    /* background: #9079e2; */
    float: left;
}
#links .links_right{
    width: 284px;
    height: 253px;
    /* background: #f0d396; */
    float: left;
}
#links .links_left h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_left .links_ul li{
    font-size: 12px;
    color: #ababab;
    float: left;
    padding: 0 63px 0 11px;
    line-height: 20px;
    background: url("../images/logo3.png") no-repeat 3px 6px;    
}
#links .links_center h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_center ul{
    padding:1px 0 0 0;

}
#links .links_center li{
    padding:3px 0 0 17px;
    font-size: 12px;
    color: #ababab;
    line-height: 15px;
    background: url("../images/logo3.png") no-repeat 7px 7px; 
}
#links .links_right h1{
    padding: 20px 0 20px 0;
    border-bottom:2px solid #c1c1c1;
}
#links .links_right .links_img{
    padding: 16px 0 0 28px;
}

/* 底部 */
#footer{
    height: 50px;
    width: 963px;
    background: #ffffff;
    margin: auto;

}

#footer .footer_a li{
    float: left;
    padding: 7px;
    line-height: 3px;
    border-right:1px solid #ababab;
}
#footer a{
    font-size: 12px;
    color: #ababab;
}
#footer .footer_a{
    border: none;
}
#footer .footer_b{
   padding-left:142px ;
   border: none;
   float: left;
}
#footer .footer_b li{
    float: left;
 }

     

    版權聲明：本文為weixin_44202489原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
    本文鏈接：https://blog.csdn.net/weixin_44202489/article/details/109901277

    智能推薦

    《HTML5網頁開發實例詳解》連載（四）HTML5中的FileSystem接口

    HTML 5除了提供用于獲取文件信息的File對象外，還添加了FileSystem相關的應用接口。FileSystem對于不同的處理功能做了細致的分類，如用于文件讀取和處理的FileReader和FileList對象、用于創建和寫入的Blob和FileWriter對象、用于目錄和文件系統訪問的DirectoryReader和LocalFileSystem對象等，FileSystem功能的出現是瀏覽...

    HTML中常用操作關于：頁面跳轉，空格

    1.頁面跳轉 2.空格的代替符...

    freemarker + ItextRender 根據模板生成PDF文件

    1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件； 還有一個問題至今沒有解決，就是關于生成PDF文件...

    電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

    Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

    requests實現全自動PPT模板

    http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載 訪問這個主頁，我們可以看到下面的樣式 點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址 點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先，查看網頁的源代碼，我們可以看到每一...

    猜你喜歡

    SpringMvc自定義類型轉換器步驟

    ...

    Linux C系統編程-線程互斥鎖（四）

    互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

    統計學習方法 - 樸素貝葉斯

    引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。 生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

    styled-components —— React 中的 CSS 最佳實踐

    https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

    基于TCP/IP的網絡聊天室用Java來實現

    基于TCP/IP的網絡聊天室實現 開發工具:eclipse 開發環境:jdk1.8 發送端 接收端 工具類 運行截圖...

    精品国产乱码久久久久久蜜桃不卡