css系列（7）成品網頁

時間 2019-11-24

標籤 css 系列成品網頁欄目 CSS 简体版

原文原文鏈接

本節介紹用css和html組合起來寫的頁面。(代碼能夠直接運行)css

(1)仿舊版騰訊微博註冊頁面:(文件夾地址:http://files.cnblogs.com/files/MenAngel/text01.zip)html

<!DOCTYPE html>
<html>
  <title>示例7.1</title>
  <style>
  body{
    background-color:#73CFF1;
    background-position: -640px 0;
    background-image:url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_wrapbg_v0.0.1.jpg);
    background-repeat:no-repeat;
    margin-top:0px;
  }
  div.div1{
    width:800px;
    height:90px;
    border:1px;
    margin:0px auto;
  }
  #img1{
    margin-top: 20px;
    margin-left: 0px;
  }
  div.div2{
    width:800px;
    height:80px;
    background-image: url(http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_2%E7%BA%A7%E8%83%8C%E6%99%AF.png);
    border:1px;
    margin:auto;
  }
  div.div3 {
    width: 800px;
    height: 600px;
    background-color: #ffffff;
    margin: auto;
  }
  div.div31{
    width:798px;
    background-color: #ffffff;
  }
  </style>
</head>
<body>
  <!--騰訊微博標題圖片，佔一行，一個div，層級1-->
  <div class="div1">
  <img id="img1" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E8%85%BE%E8%AE%AF%E5%BE%AE%E5%8D%9A.jpg"/>
  </div>
  <div class="div2">
  <div style="border: 1px solid;border-color:#ffffff; ">
  <pre style="font-size:22px;color:#1E85AE; margin-left:50px;">當即註冊騰訊微博</pre>
  <pre style="font-size: 12px;color:#1E85AE; margin-left:50px;margin-top:-20px;">您能夠經過如下任意一種方式得到微博帳號</pre>
  </div>
  </div>
  <div class="div3">
  <div class="div31"style="border:1px solid;border-color: #ffffff;">
    <div style="height:60px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;">
    <div style="float:left;margin-left:0px;width:50px border:1px solid;border-color:#ffffff;margin-left:50px;">
       <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_qq%E5%9B%BE%E6%A0%87.png"></image>
    </div>
    <div style="border: 1px solid;border-color:#ffffff;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; ">
       <pre style="font-size:13px;color:black;"><b>用QQ號碼註冊</b></pre>
       <pre style="font-size: 11px;color:black;margin-top:-10px;">用QQ號碼開通能夠方便你在微博上找到QQ好友，騰訊微博承諾，毫不會泄漏您的QQ號碼。</pre>
    </div>
    </div>
    <div style="margin-top:5px;width:798px;height:225px;border:1px solid;border-color:#ffffff;">
    <div style="width:510px;height:200px;background-color:#FFFDDF;border:1px solid;border-color:#ffffff;margin:0px auto; ">
      <form action="" method="post">
      <br/>
      <span style="font-size:14px;margin-left:10px;">QQ賬號：&nbsp;&nbsp;<input style="margin-bottom: 10px;" type="text" size="25";name="用戶名" value=""/></span><br/>
      <span style="font-size:14px;margin-left:10px;">QQ密碼：&nbsp;&nbsp;<input type="text" size="25"/><span style="color:black;font-size:12px">忘記密碼?</span></span>
        <div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;">
        <h5 style="margin-left:80px;"><input type="checkbox"/>下次自動登陸</h5>
        <h4 style="color:blue;margin-left:80px;" ><input type="button" value="開通微博"/></h4>
        </div>
      </form>
    </div>
    </div>
  </div>
  <hr style="width:720px;margin:0px,auto,0px;" />
  <div class="div32"style="border:1px solid;border-color: #ffffff;background-color: #ffffff">
    <div style="height:60px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;">
    <div style="float:left;margin-left:0px;width:50px border:1px solid;border-color:#ffffff;margin-left:50px;">
      <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_regBg%E5%9B%BE%E5%83%8F.png"></image>
    </div>
    <div style="border: 1px solid;border-color:#ffffff;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; ">
      <pre style="font-size:13px;color:black;"><b>郵箱註冊</b></pre>
      <pre style="font-size: 11px;color:black;margin-top:-10px;">經過郵箱註冊微博成功後，你的微博賬號將會自動綁定一個QQ號碼，你可使用這個QQ號碼享受騰訊的其餘服務。</pre>
    </div>
    </div>
    <div style="width:560px;height:600px;margin:0px auto;border:1px solid;border-color: #ffffff;background-color:#ffffff">
    <form style="method:post;">
    <ss style="font-size: 12px;">&nbsp;&nbsp;&nbsp;電子郵箱：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/><br/>
    <ss style="font-size: 12px;">&nbsp;&nbsp;&nbsp;微博帳號：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/>
    <ss style="margin-left:88px;font-size:12px;">微博地址：http://t.qq.com/</ss><br/>
    <ss style="font-size: 12px;margin-left:40px;">姓名：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/><br/>
    <ss style="font-size: 12px;margin-left:40px;">密碼：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/></br>
    <ss style="font-size: 12px;margin-left:16px;">確認密碼：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/><br/>
    <ss style="font-size: 12px;margin-left:40px;">生日：&nbsp;&nbsp;</ss><select>
      <option>陽曆</option>
      <option>陰曆</option>
    </select>
    <select>
      <option>-&nbsp;&nbsp;</option>
      <option>2015</option>
      <option>2014</option>
      <option>2013</option>
      <option>2012</option>
      <option>2011</option>
      <option>2010</option>
      <option>2009</option>
      <option>2008</option>
      <option>2007</option>
      <option>2006</option>
      <option>2005</option>
      <option>2004</option>
    </select>
    <select><option>-</option>
    </select>
    <select><option>-</option>
    </select></br><br/>
    <ss style="font-size: 12px;margin-left:40px;">性別：&nbsp;&nbsp;</ss><input type="radio"/>男<input type="radio"/>女<br/><br/>
      <ss style="font-size: 12px;margin-left:28px;">出生地：&nbsp;&nbsp;<select>
      <option>中國</option>
      <option>美國</option>
      <option>日本</option>
      <option>加拿大</option>
      </select><select>
      <option>安徽</option>
      <option>貴州</option>
      <option>浙江</option>
      <option>河北</option>
      </select><select>
        <option>貴陽</option>
        <option>合肥</option>
        <option>石家莊</option>
        <option>杭州</option>
      </select><br/><br/>
    <ss style="font-size: 12px;margin-left:28px;">驗證碼：&nbsp;&nbsp;</ss><input type="text"size="30"/><br/></ss>
    <h4 style="color:blue;margin-left:80px;" ><input type="button" value="確認並贊成如下條款"/></h4>
    <ss style="font-size: 12px;margin-left:78px;"><input type="checkbox"/>我接受</ss><ss style="color:blue;font-size: 12px;">騰訊微博服務協議QQ號碼規則</ss>
    </form>
    </div>
    <hr style="width:720px;margin:0px,auto,0px;" />
  </div>
  <div class="div33"style="border:1px solid;border-color:#ffffff;height:200px;margin:0px auto;background-color: #ffffff;">
    <div style="height:50px;margin-left:0px;border:1px solid;border-color:#ffffff;margin-top: 20px;">
    <div style="float:left;margin-left:0px;width:50px border:1px solid;border-color:#ffffff;margin-left:50px;">
      <image src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_regBg1.png"></image>
    </div>
    <div style="border: 1px solid;border-color:#ffffff;height:50px;float:left;border:1px solid;border-color:#ffffff;margin-left:30px; ">
      <pre style="font-size:13px;color:black;"><b>手機號註冊</b></pre>
      <pre style="font-size: 11px;color:black;margin-top:-10px;">編輯短信，發送6-16位登陸密碼至10690700678(僅收取普通短信費)，便可開通微博。</pre>
    </div>
    <div style="border: 1px solid;border-color:#ffffff;height:50px;float:left;border:1px solid;border-color:#ffffff;margin-left:121px; ">
      <pre style="font-size:11px;color:black;">密碼區分大小寫，不能是9位如下的純數字，不能包含空格。</pre>
      <pre style="font-size: 11px;color:black;margin-top:0px;">收到註冊短信，直接登陸<ss style="color:blue;font-size: 12px;">t.qq.com</ss></pre>
    </div>
    </div>
  </div>
  </div>
</body>
</html>

(2)仿慕課網官方介紹頁面:(http://files.cnblogs.com/files/MenAngel/text02.zip)web

<!DOCTYPE html>
<html>
<head>
    <title>示例7.2</title>
    <style>
        body{
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            width:1350px;
            height:4100px;
        }
        #div1{
            height:59px;
            background-color: black;
            width:1360px;
        }
        #div1 div{
            float:left;
            width:80px;
            height:59px
            background-color: black;
            margin-top: 0px;
        }
        a{
            display: inline-block ;
            width:80px;
            height:59px;
            text-align: center;
            color:white;
            line-height: 59px;
        }
        a:hover{
            cursor: pointer;
        }
        #div1 div :hover{
            color:yellow;
            background-color:#625D5D ;
        }
        #div2{
            height:405px;
            width:1360px;
            background-image: url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E5%A4%8D%E5%90%8801.png");
            background-size: 1360px,405px;
            width:1360px;
        }
        #div3{
            height:690px;
            border-color:white;
            width:1360px;
        }
        #div31{
            height:205px;
            width:1350px;
            margin-top: 50px;
        }
        #div32{
            height:330px;
        }
        #div31 div{
            float:left;
        }
        #div311{
            margin-left: 170px;
        }
        #div312{
            margin-left: 225px;
        }
        #div313{
            margin-left: 245px;
         }
        #div321{
            float:right;
            margin-right: 80px;
        }
        #div322{
            border:solid;
            border-color: white;
            margin-left:200px;
            width:400px;
        }
        #div323{
            border:solid;
            border-color: white;
            margin-left:100px;
            width:600px
        }
        #div4{
            background-color: #EEF1F2;
            border:solid;
            border-color: white;
            height:420px;
            width:1360px;
        }
        #div41{
            positin:absolute;
        }
        #div42{
            float:left;
            margin-left: 100px;
            background-image: url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-calendar.png");
            background-repeat:no-repeat;
        }
        #div5{
            width:1000px;
            height:640px;
            border:solid;
            border-color: white;
            margin:0 auto;
        }
        #div6{
            background-image:url("http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_der_bg.png");
            height:660px;
            background-repeat: no-repeat;
            background-position: 155px 40px;
            border:solid;
            border-color: white;
            width:1360px;
        }
    </style>
   <script>
       function it4(){
           var var1=document.getElementById('div.ul2');
           var1.style.display='block';
       }
       function it5(){
           var var1=document.getElementById('div.ul2');
           var1.style.display='none';
       }
   </script>
</head>
<body>
<!--導航欄-->
  <div id="div1" >
      <div id="div11"style="width:90px;"onmouseover="document.getElementById('div.ul1').style.display='block'; "onmouseout="document.getElementById
('div.ul1').style.display='none';" >
        <a>首頁</a>
        </div>
      <div  id="div.ul1" style="position: absolute;top:40px; left:-15px;display:none;">
          <ul style="list-style:none; ">
              <li>新建</li>
              <li>保存</li>
              <li>退出</li>
          </ul>
      </div>
      <div id="div12" onmouseover="it4()" onmouseout="it5()">
          <a><span>.NET</span></a>
      </div>
      <div  id="div.ul2" style="position:absolute;top:40px; left:70px;display:none">
          <ul style="list-style:none; ">
           <li>新建</li>
           <li>保存</li>
           <li>退出</li>
           </ul>
     </div>
      <div id="div13">
          <a><span>課程體系</span></a>
      </div>
      <div id="div14" style="float:right;width:130px;">
          <a style="width:130px">天辰軟件培訓課堂</a>
      </div>
  </div>
<!--導航欄結束-->
<!--複合欄開始-->
  <div id="div2">
  </div>
<!--複合欄結束-->
<!--4複合圖片div-->
  <div id="div3">
      <div id="div31">
          <div id="div311">
              <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E4%B8%93%E6%B3%A8IT.png" id="image311" />
          </div>
          <div id="div312">
              <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E4%BC%81%E4%B8%9A%E7%BA%A7%E9%A1%B9%E7%9B%AE.png" id="image312" />
          </div>
          <div id="div313">
              <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_%E7%BA%BF%E4%B8%8A%E7%BA%BF%E4%B8%8B.png" id="image313" />
          </div>
      </div>
      <div id="div32">
          <div id="div321">
              <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_02-computer1.png" id="image321" />
          </div>
          <div style="height:150px">
          </div>
          <div id="div322">
              <span style="font-size: 40px;color:#444444; ">實時交互的在線編程</span>
          </div>
          <div id="div323">
              <br/>
              <span style="font-size: 20px;color:#9B9B9B; ">無需配置任何編程環境，直接就能在線學習編程，省時省力省心</span>
          </div>
      </div>
  </div>
<!--3複合div的結束-->
<!---4.2個複合div的開始-->
<div id="div4">
   <div id="div42" >
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-rockets.png"/>
   </div>
   <div id="div43" style="float:right;">
    <div id="div431">
        <div style="height:150px">
        </div>
        <span style="font-size: 40px;color:#444444;margin-right: 150px; ">&nbsp;&nbsp;&nbsp;按部就班的學習計劃</span>
    </div>
    <div id="div432">
    <br/>
    <span style="font-size: 20px;color:#9B9B9B;margin-right:142px;">專治各類學習編程迷茫症。有目標有路徑，一切盡在掌握中</span>
    </div>
       <div id="div41" style=" position:absolute; left:100px; top:1150px;">
           <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_03-smoke.png"/>
       </div>
  </div>
</div>
<!---4.2個複合div的結束-->
<!--5世界著名的企業都在用-->
    <div id="div5">
        <div id="div51">
            <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET世界著名的企業都
在用</br></h1>
        </div>
        <div id="div52">
            <pre>          全球著名的戴爾公司，倫敦股票交易市場，以及加拿大著名的BMO Financial Group，Manulife Financial Group ,RBC
          Financial,Scotia Bank 等公司或企業的網站和系統都是全面使用.NET的技術開發的。</pre>
        </div>
        <div id="div53">
            <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_daier.jpg"/>
        </div>
    </div>
<!--5的結束-->
<!--少的一個-->
<div style="background-color:#EFEFEF; width:1360px; height:400px;">
    <div style=" margin-left:170px;">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET誕生於全球最大的軟件
企業——微軟</br></h1>
    </div>
    <div style="margin-left:170px; float:left;">
            <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_sm_l.jpg"/>
    </div>
    <div style="margin-left:40px height:700px;width:500px;float:left;;">
        <spanner>Microsoft .NET是微軟公司提出的新一代軟件開發模型。.NET主<br/>要包括Visual Studio .net開發工具，.NET平臺以及.NET服務器，<br/>其核心是Web 
Service。<br/>
<br/><br/><br/><br/> Microsoft將.NET運用於其下的全部產品。現在ms office已於<br/>.NET緊密捆綁，Microsoft的全部王牌系統均已內置了.NET<br/>Framework。
        </spanner>
    </div>
    <div style="margin-left:40px height:200px;margin-top:-30px;">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk_1.jpg"/>
    </div>       .
 </div>
<!--6.net平臺的多重應用-->
<div id="div6">
    <div id="div61" style="margin-left: 170px">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">.NET平臺開發的多重魅力 
</br></h1>
    </div>
    <div style="width:180px;margin-top: 130px;margin-left: 187px;float:left">
        <pre><h3 style="color:yellow">移動數字設備程序</h3><h5>爲智能手機、PDA、便攜式
遊戲機等開發的應用程序。</h5></pre>
    </div>
    <div style="width:176px;margin-top: 170px;margin-left: 44px;float:left">
        <pre><h3 style="color:yellow">Web程序
<ss style="font-size:16px">webservice應用程序</ss></webservice應用程序></h3><h5>利用ASP.NTE技術開發的動
態網站，用戶可使用IE瀏
覽器進行訪問，是B/S模式的
應用程序。基於XML Web
Services技術開發的跨
平臺、跨系統的分佈式系統</h5></pre>
    </div>
    <div style="width:176px;margin-top: 200px;margin-left: 41px;float:left">
        <pre><h3 style="color:yellow">Windows程序</h3><h5>多種程序運行在客戶機上，常
有一到多個Form元素，是一
種典型的C/S模式應用。</h5></pre>
    </div>
    <div style="width:176px;margin-top: 230px;margin-left: 45px;float:left ">
        <pre><h3 style="color:yellow">局域網應用程序</h3><h5>局域網中的分佈式計算機之
間須要互相經過
.NET Remoting(.NET遠程)
等技術 進行通訊。</h5></pre>
    </div>
</div>
<!--6的結束-->
<!--7一個圖片-->
<div id="div7" style="height:400px;background-color:#EEF1F2;">
    <img style="margin-left: 170px;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_3d.png" />
</div>
<div id="div8" style="height:450px;background-color:blue;">
<img style="margin-top: 100px;margin-left: 140px;float:left;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_04-text.png" />
<img style="margin-left: 170px;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_04-hand.png" />
</div>
<!--8表格開始-->
<div id="div9" style="background-color:#EEF1F2;height:100px;">
    <div id="div91" style="margin-left: 170px">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_fk.png" style="float:left"/><h1 style="font-size:43px">天辰.NET最科學的課程體系
</br></h1>
    </div>
</div>
<!--8的結束-->
</body>
</html>

(3)圖層蒙版:(http://files.cnblogs.com/files/MenAngel/text03.zip)編程

<!DOCTYPE html>
<html lang="en">
<head>
    <title>示例7.3</title>
    <style>
    *{
        margin:0px;
     }
    .main{
        width:400px;
        height:250px;
        position:relative;
        background-color:red;
        dispaly:inline-block;
        float:left;
        margin-left:4px;
    }
    .layer1{
        width:100%;
        height:100%;
        position:absolute;
        z-index:1;
    }
    .layer1 img{
        width:inherit;
        height:inherit;
    }
    .layer2{
        width:100%;
        height: 50%;
        background-color: blue;
        opacity: 0.1;
        position:absolute;
        margin-top:125px;
        z-index:2;
    }
    .layer3{
        width:100%;
        height:50%;
        position:absolute;
        opacity: 0.95;
        margin-top:125px;
        z-index:3;
    }
    .layer2, .layer3{
        display: none;
    }
    .main:hover .layer3, .main:hover .layer2 {
        cursor: hand;
        cursor: pointer;
        display:block;
    }
    p{
        font-family:楷體;
        font-weight:bolder;
     }
    </style>
</head>
<body>
  <div class="main">
    <div class="layer1">
      <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty01.jpg"/>
    </div>
    <div class="layer2">
    </div>
    <div class="layer3">
        <div style="width:40%;height:100%;display:inline-block;float:left">
      <img style="width:100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" />
        </div>
        <div style="width:50%;height:100%;display:inline-block;float:right;">
      <div>
        <br/>
        <p style="color:green;font-size:20px;word-wrap:break-word;">
        一代傾城逐浪花,<br/>
        吳宮空憶兒家。 <br/>
        效顰莫笑東鄰女，<br/>
        頭白溪邊尚浣紗。   
        </p>
      </div>
     </div>
    </div>
  </div>
  <div class="main">
    <div class="layer1">
      <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty02.jpg"/>
    </div>
    <div class="layer2">
    </div>
    <div class="layer3">
        <div style="width:40%;height:100%;display:inline-block;float:left">
      <img style="width:100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" />
        </div>
        <div style="width:50%;height:100%;display:inline-block;float:right;">
      <div>
        <br/>
        <p style="color:blue;font-size:20px;word-wrap:break-word;">
        聘聘嫋嫋十三餘,<br/>
        豆蔻梢頭二月初.<br/>
        春風十里揚州路,<br/>
        捲上珠簾總不如
        </p>
      </div>
        </div>
    </div>
  </div>
  <div class="main">
    <div class="layer1">
      <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_beauty03.jpg"/>
    </div>
    <div class="layer2">
    </div>
    <div class="layer3">
        <div style="width:40%;height:100%;display:inline-block;float:left">
      <img style="width:100%;height:100%;" src="http://images.cnblogs.com/cnblogs_com/MenAngel/859833/o_person.png" />
        </div>
        <div style="width:60%;height:100%;display:inline-block;float:right;">
        <div>
        <br/>
        <p style="color:red;font-size:18px;word-wrap:break-word;">
        有女妖且麗，裴回湘水湄。<br/>
        水湄蘭杜芳，採之將寄誰。<br/>
        瓠犀發皓齒，雙蛾顰翠眉。<br/>
        紅臉如開蓮，素膚若凝脂。   
        </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。