亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 34
粉絲 1
評論 0
訪問量 43136
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html定位技術(shù)和float技術(shù)及雙飛翼和圣杯布局--2018年8月20日16時45分
coolperJie
原創(chuàng)
963人瀏覽過

1、html中定位技術(shù)運(yùn)用必不可少，此例主要運(yùn)用html中的定位技術(shù)編寫了QQ在線的編寫：

實(shí)例

<!DOCTYPE html>

<html>

<head>

 <title>QQ在線人工</title>

 <meta charset="utf-8">

 <style type="text/css">

  .container {

   width: 200px;

   height: 300px;

   background-color: lightskyblue;

   border-radius: 8px;

   border-color: white;

   border-style: double;

   position: relative;

  }

  span {

   font-family: Consolas;

   font-weight: bold;

   color: white;

   font-size: 18px;

   position: absolute;

   top: 30px;

   right: 2px;

  }

  .container ul {

   width: 196px;

   height: 240px;

   background-color: white;

   list-style: none;

   border-radius: 0 0 8px 8px;

   padding: 0;

   margin-left: 2px;

   margin-right: 2px;

   margin-bottom: 2px;

   position: absolute;

   bottom: 0;

  }

  .container ul li {

   list-style: none;

   font-family: 楷體;

   margin-left: 0;

   margin-top: 25px;

   margin-bottom: 20px;

  }

  .container ul .button1 {

   width: 60px;

   height: 20px;

   background-color: skyblue;

   border-radius: 2px;

   text-align: center;

   border-color: white;

   font-family: 楷體;

   position: absolute;

   top: 25px;

   right: 23px;

  }

  .container ul .button2 {

   width: 60px;

   height: 20px;

   background-color: skyblue;

   border-radius: 2px;

   text-align: center;

   border-color: white;

   font-family: 楷體;

   position: absolute;

   top: 70px;

   right: 23px;

  }

  .container ul .button3 {

   width: 60px;

   height: 20px;

   background-color: skyblue;

   border-radius: 2px;

   text-align: center;

   border-color: white;

   font-family: 楷體;

   position: absolute;

   top: 110px;

   right: 23px;

  }

  .container ul .button4 {

   width: 60px;

   height: 20px;

   background-color: skyblue;

   border-radius: 2px;

   text-align: center;

   border-color: white;

   font-family: 楷體;

   position: absolute;

   top: 155px;

   right: 23px;

  }

  .container ul .button5 {

   width: 60px;

   height: 20px;

   background-color: skyblue;

   border-radius: 2px;

   text-align: center;

   border-color: white;

   font-family: 楷體;

   position: absolute;

   top: 200px;

   right: 23px;

  }

 </style>

</head>

<body>

 <div class="container">

  <span>ONLINE SERVICES</span>

  <div class="box1">

   <ul>

    <li>在線人工01：<div class="button1">QQ交談</div></li>

    <li>在線人工02：<div class="button2">QQ交談</div></li>

    <li>在線人工03：<div class="button3">QQ交談</div></li>

    <li>在線人工04：<div class="button4">QQ交談</div></li>

    <li>在線人工05：<div class="button5">QQ交談</div></li>

   </ul>

  </div>

 </div>

</body>

</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

效果截圖：

1.png

說明：html中主要三種定位技術(shù)，相對定位、絕對定位、固定定位，其中固定定位屬于絕對定位中的一種

2、float技術(shù)實(shí)現(xiàn)圖文混排的案例：

實(shí)例

<!DOCTYPE html>

<html>

<head>

 <title>圖文混排</title>

 <meta charset="utf-8">

 <style type="text/css">

  .box {

   width: 600px;

   background-color: #efefef;

   font-size: 1rem;

   font-family: 楷體;

   color: #555;

   border-radius: 1rem;

   padding: 20px;

  }

  h2 {

   text-align: center;

   font-family: 楷體;

   margin-top: 0;

  }

  img {

   width: 250px;

   height: 150px;

   float: left;

   margin-right: 10px;

   margin-bottom: 10px;

  }

  p {

   text-indent: 2rem;

   line-height: 1.5rem;

  }

 </style>

</head>

<body>

 <div class="box">

  <h2>萬里長城</h2>

  <img src="images/wall.jpg">

  <p>長城（Great Wall），又稱萬里長城，是中國古代的軍事防御工程，是一道高大、堅(jiān)固而連綿不斷的長垣，用以限隔敵騎的行動。長城不是一道單純孤立的城墻，而是以城墻為主體，同大量的城、障、亭、標(biāo)相結(jié)合的防御體系。長城修筑的歷史可上溯到西周時期，發(fā)生在首都鎬京（今陜西西安）的著名的典故“烽火戲諸侯”就源于此。春秋戰(zhàn)國時期列國爭霸，互相防守，長城修筑進(jìn)入第一個高潮，但此時修筑的長度都比較短。秦滅六國統(tǒng)一天下后，秦始皇連接和修繕戰(zhàn)國長城，始有萬里長城之稱，明朝是最后一個大修長城的朝代，今天人們所看到的長城多是此時修筑。</p>

 </div>

 

</body>

</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

效果圖片：

demo4.png

說明： 主要使用了float、html中一些基礎(chǔ)的常用標(biāo)簽實(shí)現(xiàn)圖文混排的效果圖；

3、雙飛翼布局實(shí)例，運(yùn)用雙飛翼DOM特點(diǎn)，主要內(nèi)容區(qū)域必須有一個父級塊，用來給主要內(nèi)容區(qū)域添加樣式：

實(shí)例

<!DOCTYPE html>
<html>
<head>
 <title>雙飛翼布局</title>
 <meta charset="utf-8">
 <style type="text/css">
  .header,.footer {
   width: 100%;
   height: 60px;
   background-color: #ccc;
  }
  .content {
   width: 1000px;
   height: 60px;
   background-color: grey;
   margin: auto;
   text-align: center;
   line-height: 60px;
  }
  .container {
   width: 1000px;
   background-color: green;
   margin: auto;
   position: relative;
   overflow: hidden;
  }
  .wrap {
   width: 100%;
   background-color: yellow;
   float: left;
  }
  .main {
   min-height:600px;
   background-color: wheat;
   margin: 0 200px;
   text-align: center;
  }
  .main span {
   font-family: 楷體;
   font-size: 1.5rem;
   font-weight: bolder;
   color: red;
  }
  .left {
   width: 200px;
   min-height:600px; 
   float: left;
   margin-left: -100%;
   background-color: lightskyblue;
  }
  .left h3 {
   text-align: center;
  }
  .left li {
   list-style: none;
   text-indent: 2rem;
   line-height: 1.5rem;
  }
  .right {
   width: 200px;
   min-height:600px; 
   float: left;
   margin-left: -200px;
   background-color: lightpink;
  }
  .right h3 {
   text-align: center;
  }
  .right img {
   width: 198px;
   height: 120px;
  }
 </style>
</head>
<body>
 <div class="header">
  <div class="content">淘寶主頁</div>
 </div>
  <div class="container">
  <div class="wrap">
   <div class="main">
    <span>淘一淘首頁</span>
    <img src="images/4.jpg">
   </div>
  </div>
  <div class="left">
   <h3>商品列表</h3>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
   <li>衣物/服飾/內(nèi)衣</li>
   <li>童靴/箱包/配件</li>
  </div>
  <div class="right">
   <h3>推薦商品</h3>
   <img src="images/1.jpg">
   <img src="images/2.jpg">
   <img src="images/3.jpg">
  </div>
 </div>
 <div class="footer">
  <div class="content">網(wǎng)站底部</div>
 </div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

效果圖片：

demo2.png

說明：運(yùn)用雙飛翼布局，簡單了購物界面的簡單布局。

4、經(jīng)典圣杯布局，圣杯DOM結(jié)構(gòu)，左主右三個部分在一個父級容器中，先浮動，再通過定位固定布局：

實(shí)例

<!DOCTYPE html>
<html>
<head>
 <title>經(jīng)典的三列圣杯布局</title>
 <meta charset="utf-8">
 <style type="text/css">
  .header,.footer {
   width: 100%;
   height: 60px;
   background-color: #ccc;
  }
  .content {
   width: 1000px;
   height: 100%;
   background-color: grey;
   margin: auto;
   text-align: center;
   line-height: 60px;
  }
  .container {
   width: 600px;
   background-color: green;
   margin: auto;
   overflow: hidden;
   padding:0 200px;
  }
  .container .main {
            min-height: 600px;
            width: 100%;
            float:left;
            background-color: wheat;
        }
  .container .left {
   width: 200px;
   min-height:600px; 
   float: left;
   margin-left: -100%;
   background-color: lightskyblue;
   position: relative;
            left: -200px;
  }
  .container .right {
   width: 200px;
   min-height:600px; 
   float: left;
   margin-left: -200px;
   position: relative;
            right:-200px;
   background-color: lightpink;
  }
 </style>
</head>
<body>
 <div class="header">
  <div class="content">網(wǎng)站頭部</div>
 </div>
 <div class="container">
  <div class="main">主題內(nèi)容</div>
  <div class="left">左</div>
  <div class="right">右</div>
 </div>
 <div class="footer">
  <div class="content">網(wǎng)站底部</div>
 </div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

效果截圖：demo3.png

說明：上例主要運(yùn)用了圣杯布局方式完成了簡單的頁面布局，不僅運(yùn)用了float技術(shù)同時還運(yùn)用了相對定位技術(shù)。

5、手抄截圖：

sc.png

說明：此圖主要說明了經(jīng)典的雙飛翼布局與圣杯布局的區(qū)別在哪里，無論是雙飛翼還是圣杯要求都要首先渲染主體部分，雙飛翼的主體部分需要放在一個父級容器中，而圣杯的三個本分都放在同一個容器中渲染。

總結(jié)：

（1）此次學(xué)習(xí)了定位技術(shù)的運(yùn)用，完成了課堂小案例的編寫，進(jìn)一步加深了三種定位技術(shù)的運(yùn)用，position：（相對）relative,（絕對）absolute,（固定）fixed ，而固定定位是屬于絕對定位中的一種。

（2）float技術(shù)運(yùn)用實(shí)例，完成圖文混排的效果頁面，加深了對float的使用，其中：對于行內(nèi)元素如果對其進(jìn)行左右浮動，那對其寬高的設(shè)置也會生效。

（3）最后編寫了雙飛翼和圣杯布局的實(shí)例，無論是雙飛翼還是圣杯要求都要首先渲染主體部分，雙飛翼的主體部分需要放在一個父級容器中，而圣杯的三個本分都放在同一個容器中渲染。

批改狀態(tài)：未批改

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)