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

搜索
博主信息
博文 34
粉絲 1
評(píng)論 0
訪問(wèn)量 43130
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
綜合運(yùn)用所學(xué)到的html知識(shí)完成簡(jiǎn)單的商城網(wǎng)站的開(kāi)發(fā)--2018年8月21日19時(shí)01分
coolperJie
原創(chuàng)
1015人瀏覽過(guò)

1、此段代碼是實(shí)現(xiàn)了商品分類的界面，主要使用到了<table>標(biāo)簽和在表格中插入圖片及制作按鈕的技術(shù)：

實(shí)例

<!DOCTYPE html>
<html>
<head>
 <title>商品分類</title>
 <meta charset="utf-8">
 <style type="text/css">
 table {  
  border-collapse: collapse; /*折疊表格線*/
  width: 650px;
  font-family: 楷體;
  text-align: center;
  margin: auto;
 }
 table caption {
     font-size: 1.5rem;
     font-weight: bolder;
     margin-top: 80px;
     margin-bottom: 20px;
    }
 table, th, td {
  border: 1px solid black;
  
 }
 table tr:first-child {
     font-size: 1.2rem;
     font-weight: bolder;
     background-color: lightpink;
    }
 table tr:nth-child(2):hover {
  background-color: #efefef;
  color: green;
 }
 table tr:nth-child(3):hover {
  background-color: #efefef;
  color: green;
 }
 table tr:nth-child(4):hover {
  background-color: #efefef;
  color: green;
 }
 table tr:nth-child(5):hover {
  background-color: #efefef;
  color: green;
 }
 table tr td img {
  padding: 5px;
  border-radius: 10px;
 }
 table tr td a {
  text-decoration: none;
  width:140px;
  height:40px;
  padding:5px;
  border:1px solid black;
  background: white;
  color:black;
  border-radius: 8px;
  box-shadow: 1px 1px 1px #888;
 }
 table tr td a:hover {
  background: black;
  color:white;
 }
</style>
</head>
<body>
<table>
 <caption>商品分類</caption>
 <tr>
  <th>編號(hào)</th>
  <th>類別</th>
  <th>物品</th>
  <th>單價(jià)</th>
  <th>圖片</th>
  <th>操作</th>
 </tr>
 <tr>
  <td>1</td>
  <td>體育</td>
  <td>跑步機(jī)</td>
  <td>1臺(tái)/955元</td>
  <td><img src="images/spot.jpg" width="100"></td>
  <td><a href="detial1.html">查看詳情</a></td>
 </tr>
 <tr>
  <td>2</td>
  <td>果蔬</td>
  <td>小白菜</td>
  <td>1斤/15元</td>
  <td><img src="images/bc.jpg" width="100"></td>
  <td><a href="detial2.html">查看詳情</a></td>
 </tr>
 <tr>
  <td>3</td>
  <td>科技</td>
  <td>小米air</td>
  <td>1臺(tái)/4999元</td>
  <td><img src="images/air.jpg" width="100"></td>
  <td><a href="detial3.html">查看詳情</a></td>
 </tr>
 <tr>
  <td>4</td>
  <td>玩具</td>
  <td>手槍</td>
  <td>1支/20元</td>
  <td><img src="images/gun.jpg" width="100"></td>
  <td><a href="detial4.html">查看詳情</a></td>
 </tr>
</table>
</body>
</html>

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

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

效果圖：category.png

detial1.png

說(shuō)明：綜合運(yùn)用<table><tr><td><img>等標(biāo)簽實(shí)現(xiàn)上面效果圖的編程，點(diǎn)擊查看詳情可以跳轉(zhuǎn)到物品的詳情界面

2、此段代碼是實(shí)現(xiàn)了商品詳情的界面，主要使用到了圖文混排的技術(shù)：

實(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>跑步機(jī)</h2>

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

  <p>跑步機(jī)是家庭及健身房常備的健身器材，而且是當(dāng)今家庭健身器材中最簡(jiǎn)單的一種，是家庭健身器的最佳選擇。1965年北歐芬蘭唐特力誕生了全球第一臺(tái)家用的跑步機(jī)，設(shè)計(jì)師根據(jù)傳速帶的原理改變而成。這臺(tái)跑步機(jī)誕生代表了現(xiàn)代意義上真正的家用跑步機(jī)，歐美國(guó)家的人開(kāi)始接受家里的跑步。不過(guò)開(kāi)始的跑步機(jī)，也只能在上面快走，跑步有點(diǎn)不舒服。</p>

 </div>

 <hr style="width: 650px;color: gray;margin-left: 0">

 <div class="box">

  <h2>小白菜</h2>

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

  <p>小白菜是一種原產(chǎn)東亞的蔬菜，俗稱青菜，又稱膠菜、瓢兒菜、瓢兒白、油菜（中國(guó)東北某些地區(qū)）、油白菜等，與大白菜（結(jié)球白菜）是近親，同屬蕓薹一種，和西方的圓白菜也較近，同屬十字花科蕓薹屬。 原產(chǎn)于我國(guó)，南北各地均有分布，在我國(guó)栽培十分廣泛。小白菜是蕓薹屬（芥屬）栽培植物，莖葉可食，一、二年生草本植物，高25～70cm，常作一年生栽培。</p>

 </div>

 <hr style="width: 650px;color: gray;margin-left: 0">

 <div class="box">

  <h2>小米air</h2>

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

  <p>2015年10月9日，IT之家消息，關(guān)于小米筆記本，早前只是坊間傳聞，所以并沒(méi)有多少人當(dāng)真。然而，上個(gè)月臺(tái)灣英業(yè)達(dá)董事長(zhǎng)突然爆料稱旗下的ODM制造商英華達(dá)正在幫助小米開(kāi)發(fā)一款筆記本電腦。小米筆記本從最開(kāi)始的坊間傳聞到臺(tái)灣英業(yè)達(dá)董事長(zhǎng)爆料正在幫助小米開(kāi)發(fā)這款筆記本，再到傳聞聯(lián)想副總裁魏俊，已經(jīng)可以說(shuō)是板上釘釘了，小米筆記本很快就要正式亮相。</p>

 </div>

 <hr style="width: 650px;color: gray;margin-left: 0">

 <div class="box">

  <h2>玩具槍</h2>

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

  <p>手槍是一種單手握持瞄準(zhǔn)射擊或本能射擊的短槍管武器，通常為指揮員和特種兵隨身攜帶，用在50米近程內(nèi)自衛(wèi)和突然襲擊敵人?，F(xiàn)代手槍的基本特點(diǎn)是：變換保險(xiǎn)、槍彈上膛、更換彈匣方便，結(jié)構(gòu)緊湊，自動(dòng)方式簡(jiǎn)單?，F(xiàn)代軍用手槍主要有自衛(wèi)手槍和沖鋒手槍。自衛(wèi)手槍射程一般為50米，彈匣容量8~15發(fā)，發(fā)射方式為單發(fā)，重量在1公斤左右。</p>

 </div>

</body>

</html>

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

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

效果圖：

detial.png

說(shuō)明：此效果圖主要使用了圖文混排的技術(shù)，用多個(gè)<div>排列組合。

3、此段代碼使用了<table>表格和<a>和偽類的使用，實(shí)現(xiàn)簡(jiǎn)單的界面布局：

實(shí)例

<!DOCTYPE html>
<html>
<head>
 <title>購(gòu)物車</title>
 <meta charset="utf-8">
 <style type="text/css">
  table {
   width: 600px;
   margin: auto;
   /*background-color: lightgray;*/
   border-collapse: collapse;
         text-align: center;  
   font-family: 楷體;
  }
  table, th, td {
   border: 1px solid black;
  }
  td {
         padding: 10px;
     }
     a {
      text-decoration-line: none;
      color: green;
     }
     a:hover {
      text-decoration-line: underline;;
      color: brown;
     }
     table tr:first-child {
      font-size: 1.2rem;
      font-weight: bolder;
      background-color: red;
     }
     table caption {
      font-size: 1.5rem;
      font-weight: bolder;
      margin-top: 80px;
      margin-bottom: 20px;
     }
 </style>
</head>
<body>
 <table>
  <caption>購(gòu)物車列表</caption>
  <tr>
   <th>ID</th>
   <th>商品名</th>
   <th>單價(jià)</th>
   <th>數(shù)量</th>
   <th>操作</th>
  </tr>
  <tr>
   <td>1</td>
   <td>小白菜</td>
   <td>1斤/15元</td>
   <td>10斤</td>
   <td><a href="">添加</a> | <a href="">刪除</a></a></td>
  </tr>
  <tr>
   <td>2</td>
   <td>跑步機(jī)</td>
   <td>1臺(tái)/955元</td>
   <td>1臺(tái)</td>
   <td><a href="">添加</a> | <a href="">刪除</a></td>
  </tr>
  <tr>
   <td>3</td>
   <td>小米air</td>
   <td>1臺(tái)/4999元</td>
   <td>2臺(tái)</td>
   <td><a href="">添加</a> | <a href="">刪除</a></td>
  </tr>
  <tr>
   <td>4</td>
   <td>玩具</td>
   <td>1支/20元</td>
   <td>5支</td>
   <td><a href="">添加</a> | <a href="">刪除</a></td>
  </tr>
  <tr>
   <td>5</td>
   <td>飛機(jī)</td>
   <td>15架/900萬(wàn)</td>
   <td>1架</td>
   <td><a href="">添加</a> | <a href="">刪除</a></td>
  </tr>
 </table>
</body>
</html>

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

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

效果圖：

shoppingcar.png

說(shuō)明：此界面簡(jiǎn)單的使用了表格完成了布局，表格布局顯示更加的規(guī)范。

手抄：

shouchao1.png

shouchao2.png

說(shuō)明：此次手抄內(nèi)容主要是對(duì)html5新增的語(yǔ)義化的布局標(biāo)簽的知識(shí)，包括：<header><footer><main><aside><article><nav><section>role屬性等

總結(jié)：

（1）本次學(xué)習(xí)的新內(nèi)容是，html5中新增的語(yǔ)義化的布局標(biāo)簽，其實(shí)標(biāo)簽理解不難，重在會(huì)用，要活學(xué)活用才是真的的道理。

（2）本次主要對(duì)老師講解的網(wǎng)站案例進(jìn)行了 完善，運(yùn)用了學(xué)到的html的知識(shí)，完成了一個(gè)簡(jiǎn)單的網(wǎng)站心里還是很開(kāi)心的，至少寫(xiě)出了一個(gè)簡(jiǎn)單作品，這使我的信心大增，會(huì)更加努力的。

批改狀態(tài)：合格

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

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

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