html/css網站demo實戰

阿新 • • 發佈：2019-01-11

本demo結合最近的學習，做了一個的網頁。

廢話不多說了，直接上菜。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTMLCSSDEMO</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
  <div class="header">
      <div class="top">
          <div class="ad">
              <div class="wp">
                  <div class="z">
                <span>
                    <a href="http://blog.csdn.net/u012859748">設為首頁</a>
                </span>
                 <span>
                    <a href="http://blog.csdn.net/u012859748">收藏本站</a>
                </span>
                  </div>
                  <div class="y">
                      <span>2016年9月3日</span>
                      <span class="mr_0">晴 29℃/35℃</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="wp">
      <div class="logos">
          <div class="logo z">
              <h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS實戰"/></a></h1>
          </div>
          <div class="dianhua y">
              <span>客服熱線：400-500-000</span>
          </div>
          <div class="sousuo y">
              <form action="index.html" method="get">
                  <table cellpadding="0" cellspacing="0" border="0">
                      <tr>
                          <td class="s_z z"></td>
                          <td class="s_c z">
                              <input type="text" name="text" id="s_c_txt"/>
                          </td>
                          <td class="s_y z">
                              <button type="submit" name="submit"></button>
                          </td>
                      </tr>
                  </table>
              </form>
          </div>
      </div>
      </div>
      <div class="nav">
          <div class="wp">
              <ul>
                  <li class="a">
                      <a href="http://blog.csdn.net/u012859748">學校首頁</a>
                  </li>
                  <li>
                      <a href="http://blog.csdn.net/u012859748">學校簡介</a>
                  </li>
                  <li>
                      <a href="index.html">學校描述</a>
                  </li>
                  <li>
                      <a href="index.html">學科範圍</a>
                  </li>
                  <li>
                      <a href="index.html">人才中心</a>
                  </li>
                  <li>
                      <a href="index.html">人才招聘</a>
                  </li>
                  <li>
                      <a href="index.html">線上服務</a>
                  </li>
                  <li>
                      <a href="index.html">聯絡我們</a>
                  </li>
              </ul>
          </div>
      </div>
      </div>
  <div class="center">
     <div class="wp">
      <div class="ad">
          <img src="images/ad.jpg" alt=""/>
      </div>
      <div class="introduce z">
          <div class="tit">
              <img src="images/jianjie.jpg" alt=""/>
              <span><a href="">More</a></span>
          </div>
          <div>
              <div class="jj_c">
                  <img src="images/jianjie_img.jpg" alt=""/>
                  <p>
                      G20峰會將於9月4日至5日在浙江杭州舉行。應中國國家主席習近平邀請，30多位國家或國際組織領導人將與會，其中巴西總統特梅爾於當地時間8月31日正式就任後確定參加G20杭州峰會。
                  </p>
                  <p>
                      東京非洲發展國際會議(TICAD)8月28日結束後，日本政府公佈了安倍晉三首相訪問肯亞同肯方發表的聯合宣告。
                  </p>
                  <p>
                      但肯亞方面並沒有發表這一聯合宣告，而且聯合宣告中有關涉海、涉安改內容與TICAD峰會剛剛發表的《內羅畢宣言》不符。
                  </p>
                  <p>
                      東京非洲發展國際會議(TICAD)8月28日結束後，日本政府公佈了安倍晉三首相訪問肯亞同肯方發表的聯合宣告。

                      但肯亞方面並沒有發表這一聯合宣告，而且聯合宣告中有關涉海、涉安改內容與TICAD峰會剛剛發表的《內羅畢宣言》不符。
                  </p>
              </div>
          </div>
      </div>
      <div class="news z">
          <div class="tit">
              <img src="images/xinwen.jpg" alt=""/>
              <span><a href="">More</a></span>
          </div>
          <div class="xw_c">
            <ul>
                <li class="a">
                    <a href="">
                            <img src="images/list_img.jpg"/>
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <h3>G20峰會將於9月4日至5日在浙江杭州舉行</h3>
                        <span>2016-9-3</span>
                    </a>
                </li>
            </ul>
          </div>
      </div>
      <div class="product z">
          <div class="tit">
              <img src="images/chanpin.jpg" alt=""/>
              <span><a href="">More</a></span>
          </div>
          <div class="cp_c">
            <ul>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
                <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰會將於9月4日至5日在浙江杭州舉行</span></a></li>
            </ul>
          </div>
      </div>
   </div>
 </div>
  <div class="cl"></div>
  <div class="footer">
      <div class="wp">
      <div class="footer_top">
          <span class="z">
                <a href="">關於我們</a>    |    <a href="">聯絡我們</a>    |    <a href="">加入我們</a>    |    <a href="">給我留言</a>
            </span>
            <span class="y">
                © 2016 winson版權所有 ICP證:備158000000號
            </span>
      </div>
      <div class="footer_bottom">
          <p>
              友情連線：<a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.163.com/" target="_blank">網易</a><a href="http://www.sohu.com" target="_blank">搜狐</a><a href="http://www.edu.com" target="_blank">教育部</a><a href="http://www.google.com" target="_blank">新聞網</a>
          </p>
      </div>
  </div>
  </div>
</body>
</html>

css也貼上吧。

/*通用樣式*/
*{margin: 0;padding: 0}
body{ font: 16px/24px 'Microsoft YaHei', '仿宋體’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
.wp{ width: 960px;margin: 0 auto; }
.z{ float: left;}
.y{ float: right;}
.cl{ clear: both; }
.mr_0{ margin: 0 }
img{border: none}
.top{
    width: 100%;
    height: 24px;
    line-height: 24px;
    background: #305070;
    color: #d8d8d8;
}
.top span{
    margin-right: 15px;
}
.top span.mr_0{
    margin: 0;
}
.top a{
    color: #d8d8d8;
    text-decoration: none;
}
.top a:hover {
    color: #f60;
}
/*LOGOS*/
.logos{
    height: 59px;
    margin: 15px 0;
}
/*搜尋*/
.sousuo{
    width: 330px;
    height: 41px;
    margin-top: 8px;
}
.sousuo td{
    height: 41px;
}
.s_z{
    width: 6px;
    background: url("../images/s_z.jpg") no-repeat;
}
.s_c{
    width: 240px;
    background: url("../images/s_c.jpg") repeat-x;
}
.s_y{
    width:78px;
    background: url("../images/s_r.jpg") no-repeat;
}
.s_c input{
    height: 35px;
    line-height: 35px;
    border: none;
    margin-top: 2px;
    width: 200px;
}
.s_y button{
    width: 78px;
    height: 41px;
    background: none;
    border: 0;
    cursor: pointer;
}
.dianhua{
    height: 59px;
    line-height: 59px;
    margin-left: 15px;
}
.dianhua span{
    font-size: 26px;
    color: darkred;
}
/*導航*/
.nav{
    height: 39px;
    width: 100%;
    background: url("../images/nav_bg.jpg") repeat-x;
}
.nav li{
    list-style: none;
    float: left;
    line-height: 39px;
    padding: 0 28px;
}
.nav li.a , .nav li:hover{
    background: url("../images/nav_hover.jpg") repeat-x;
}
.nav a{
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
/*center*/
.ad{
    margin-bottom: 10px;
}
.tit{
    padding-bottom: 8px;
    border-bottom: 1px solid darkred;
    position: relative;
    margin-bottom: 10px;
}
.tit span {
    position: absolute;
    right: 0;
    bottom: 0;
}
.tit a {
    color: darkred;
    text-decoration: none;
}
.introduce{
    width: 540px;
    height: 360px;
    margin-right: 20px;
}
.jj_c img{
    float: left;
    margin: 0 10px 10px 0;
}
.jj_c p{
    color: #616161;
    text-indent: 24px;
}
.news{
    width: 400px;
    height: 360px;
}
.product{
    width: 100%;
    height: 300px;
}
.xw_c{

}
.xw_c li{
    list-style: none;
    height: 24px;
    line-height: 24px;
    position: relative;
    padding-left: 15px;
    margin-bottom: 6px;
    background: url("../images/list_bg.jpg") no-repeat center left;
}
.xw_c li.a{
    background: none;
    padding: 0;
    height: 76px;
}
.xw_c li img{
    float: left;
    margin: 0 10px 10px 0;
}
.xw_c span{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #888888;
}
.xw_c h3{
    font-weight: normal;
    font-size: 14px;
}
.xw_c a{
    color: #616161;
    text-decoration: none;

}
.xw_c p{
    font-size: 12px;
    color: #888;
    text-indent: 24px;
}
.cp_c{

}
.cp_c li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    width: 151px;
    height: 96px;
    overflow: hidden;
    position: relative;
}
.cp_c span{
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 14px;
    height: 20px;
    width: 131px;
    padding: 0 10px;
    color: #fff;
    background: darkred;
    overflow: hidden;
}
.cp_c li a:hover span{
    display: block;
}
.cp_c li img{
    float: left;
}
.cp_c li.mr_0{
    margin-right: 0;
}
/*footer*/
.footer{
    height: 103px;
    width: 100%;
    background: url("../images/footer_bg.jpg") repeat-x;
}
.footer_top{
    height: 80px;
    line-height: 80px;
    color: #fff;
}
.footer_top .z{
    font-size: 16px;
}
.footer_top a{
    color: #fff;
    text-decoration: none;
}
.footer_bottom p{
    color: #f60;
}
.footer_bottom a{
    color: #888;
    text-decoration: none;
    margin-right: 10px;
}
.footer_bottom a:hover{
    color: #f60;
}

附贈一效果圖：

因為圖片是我網上download的，看起來可能不太友好，勿怪。

html/css網站demo實戰

本demo結合最近的學習，做了一個的網頁。廢話不多說了，直接上菜。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

html+css+javascript程式設計實戰專案及心得

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>實踐題 - 選項卡</title> <style type="tex

從零開始學習HTML+CSS（1）常用工具與網站

從零開始學習HTML+CSS（1）開始正式學習HTML+CSS了。第一次培訓具體內容講得不多，主要介紹了一些常用工具和網站。下面是一點整理：工具類（個人推薦向）：瀏覽器：Google Chrome 官方下載地址：https://www.google.cn/chrome/ 編輯

HTML+CSS仿寫京東網站介面

在學習了HTML和CSS以後，用倆天的時間仿寫京東網站的部分介面，基本將之前學習的內容都應用到了，收貨頗多，也對網站的佈局有了更深的認識。總結整體的佈局在開始寫網站之前，要考慮整體的佈局，事先將每一塊的內容框架搭建好，後期就可以將每一塊的內容填充好，包括css的樣式。這樣

《HTML&CSS設計與構建網站中文版》電子書附下載連結+30個總結JVM虛擬機器的技術文排版好（收藏版）

技術書閱讀方法論一.速讀一遍（最好在1~2天內完成）人的大腦記憶力有限，在一天內快速看完一本書會在大腦裡留下深刻印象，對於之後複習以及總結都會有特別好的作用。對於每一章的知識，先閱讀標題，弄懂大概講的是什麼主題，再去快速看一遍，不懂也沒有關係，但是一定要在不懂的

《HTML&CSS設計與構建網站中文版》電子書附下載連結和30個總結JVM虛擬機器的技術文排版好（收藏版）

web前端基礎教學視訊分享（一）html+css+js基礎教學（附淘寶網站開發教程）

路漫漫其修遠兮吾將上下而求索路很長，未來是你們的！獻給每位正在奮鬥的孩紙們。【寫在前面】15年剛接觸前端的時候，覺得很有魅力，就好像自己能夠控制整個世界似的。那個時候也不知道怎麼學習怎麼入門，很是苦惱，所以就在淘網上花了20元買了些教程，既然自己踩過坑，就不希望還有人像我這樣繼續

html實戰之一（利用html+css做一個靜態頁面）

參照一般部落格的樣子，做了個超簡易版，先秀一下樣子 html1 很明顯主體部分是三個模組，頂部左側和右側div 寫的過程中客服的幾個問題： 1.參照了w3school的樣子，固定主體寬度，調整瀏覽器時，保持最小寬度 html { width: 966px; ba

HTML+CSS實戰提升

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>幾米簡介</title>

【HTML+CSS+JavaScript】網頁實戰開發筆記之二—關於Web標準，你不能不知道的事

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。微軟最有價值專家著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

python+flask+html/css+mysql+BAE 打造CSDN簡歷自動生成系統（附網站完全原始碼）

1.背景一直想自己動手寫個web app玩玩，前幾天看了一個github的resume自動生成的web-app，所以就動手仿造了一個csdn的簡歷生成器。結構很簡單，前端是html/css

純HTML+CSS實戰之實現帶圖示的二級導航選單

效果圖如上程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS實現帶圖示的二級導航選單</t

純HTML+CSS實戰之高階字型的實現

本次分享內容較為基礎，主要知識點便是css中盒子及文字陰影的應用字型效果如下：程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

【HTML+CSS實戰】商城網頁前端

1、網頁前端基礎分析我們知道網頁是由HTML+CSS+JavaScript結合起來共同完成靜態/動態網頁的開發，如果把一個網頁比喻成一個人，HTML相當於人的骨架，CSS是包裹骨架的肉和衣服，JavaScript是人做出的各種動作，而後臺語言是告訴前端需要做什麼，相

HTML+CSS編寫靜態網站-18 開發手機網站

視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015 這節課，我們將首先構建我們移動版本的網站。這可能看起來有點不合理，但現在做網站基本上從一開始就必須考慮到移動裝置。有兩個原因。首先

對html+css+js網站載入速度優化（虛擬主機）

再正文之前先貼上優化後的個人部落格：http://散.top/ （本人學是的javaEE，因此虛擬主機不能在上面跑，只能寫靜態的掛上面玩。。）為什麼要優化網頁載入速度？引用下別人的話：好奇心日報無論是設計還是內容都追求高品質，於是

html+css實戰之仿部落格網頁

這幾天學習了一些html+css的知識，於是就動手仿部落格頁面做了一個靜態的頁面。下面為實現的程式碼： blog.html: <!DOCTYPE html> <html> <head> <meta charset = "u

Ubuntu15.04 網站伺服器環境搭建，php/html/css等學習環境搭建教程

摘自：https://www.cnblogs.com/acbingo/p/4510752.html首先，我們先搭建開發環境AppachApache是世界使用排名第一的Web伺服器軟體。它可以執行在幾乎所有廣泛使用的計算機平臺上，由於其跨平臺和安全性被廣泛使用，是最流行的Web

用HTML+CSS編寫一個計科院網站首頁的靜態網頁

網頁 aid image ima oca 劃分 sof pan tps 用HTML+CSS編寫一個計科院網站首頁的靜態網頁一.實驗展示二.實驗思路 1.劃分布局將頁面劃分為4個部分，其中最大的內容部分再將其劃分為幾個小的布局。以此可以劃出更小的

購書網站前端實現（HTML+CSS+JavaScript）

購書+閱讀靜態網頁設計與實現一、主頁設計HTML 1、效果展示及實現 2、完整程式碼二、主頁樣式佈局CSS 三、空間功能實現Javascript 主要功能 Javascript完整程式碼：總結購書+閱讀靜態網頁設計與實現專案完整程式碼已打包在CSDN：MyBookWeb，需要可以下載。也可聯絡我獲

html/css網站demo實戰

相關推薦