CSS 閱讀筆記-台北e大[PHP全動態購物網站設計實務]首頁CSS完全複製cp_html_css.html範例備份(2015/12/30)

CSS 閱讀筆記-台北e大[PHP全動態購物網站設計實務]首頁CSS完全複製cp_html_css.html範例備份(2015/12/30)

Comments 0 Comment

CSS 閱讀筆記–台北e大[PHP全動態購物網站設計實務]首頁CSS完全複製cp_html_css.html範例備份(2015/12/30)

 

資料來源:http://elearning.taipei.gov.tw

 

css\screen.css

@charset “utf-8”;

/* CSS Document */

<style
type=”text/css”>

p
,h1,h2,h3,h4,h5,h6,ol,ul,li,table,th,td,tr{

  margin:
0px;

  padding:
0px;

}

 

body {

  font-family:
”
新細明體“,
“Times New Roman”;

  font-size:
100%;

  margin:
0px;

  padding:
0px;

  background-image:
url(../images/template_img/bg.png);

  background-repeat:
repeat;

  background-color:
#FFBBE9;

}

p ,h1,h2,h3,h4,h5,h6,ul,ol,li,table,tr,td,th{

  margin:
0px;

  padding:
0px;

}

 

#wrapper {

  width:
900px;

  margin-right:
auto;

  margin-left:
auto;

}

#wrapper #header {

  background-image:
url(../images/template_img/template_01.jpg);

  background-repeat:
no-repeat;

  height:
100px;

  width:
900px;

}

#wrapper #header #icon_table tr td p
a {

  font-family:
”
新細明體“,
“Times New Roman”;

  font-size:
0.8em;

  color:
#912B91;

  text-decoration:
none;

}

#wrapper #header #icon_table {

  float:
right;

  margin-right:
120px;

}

#wrapper #header #icon_table tr td a
img {

  border-top-style:
none;

  border-right-style:
none;

  border-bottom-style:
none;

  border-left-style:
none;

}

#wrapper #navigation table tr td p {

  font-family:
”
新細明體“,
“Times New Roman”;

  font-size:
0.8em;

  text-align:
center;

  color:
#670167;

}

 

#wrapper #navigation {

  background-image:
url(../images/template_img/template_02.jpg);

  background-repeat:
no-repeat;

  height:
30px;

  width:
900px;

  margin:
0px;

}

#wrapper #navigation table tr td a
img {

  border-top-style:
none;

  border-right-style:
none;

  border-bottom-style:
none;

  border-left-style:
none;

}

#wrapper #navigation table tr td p a
{

  text-decoration:
none;

  color:
#FFF;

}

 

#wrapper #content {

  width:
900px;

}

#wrapper #content #left {

  background-color:
#FFF;

  width:
225px;

  float:
left;

}

#wrapper #content #right {

  background-image:
url(../images/template_img/template_04.jpg);

  background-repeat:
repeat-y;

  float:
left;

  width:
675px;

  height:
815px;

}

#wrapper #footer {

  background-image:
url(../images/template_img/template_05.jpg);

  background-repeat:
no-repeat;

  height:
30px;

  width:
900px;

  float:
left;

  margin:
0px;

  padding:
0px;

}

</style>

#wrapper #navigation table p   {

  font-family:
”
新細明體“,
“Times New Roman”;

  font-size:
0.8em;

  color:
#650065;

  text-align:
center;

  margin:
0px;

}

#wrapper #footer #footer_text {

  margin-top:
10px;

  margin-right:
0px;

  margin-bottom:
0px;

  margin-left:
0px;

}

#wrapper #footer #footer_text tr td
p {

  font-family:
”
新細明體“,
“Times New Roman”;

  font-size:
0.9em;

  color:
#FFF;

}

#wrapper #footer #footer_text tr td
p a {

  text-decoration:
none;

  color:
#FECCFF;

}

 

 

#wrapper #footer #footer_text tr td
h5 {

  font-family:
”
新細明體“,
“Times New Roman”;

  color:
#FFF;

  text-align:
right;

}

 

cp_html_css

<html>

  <head>

     <meta
http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />

     <!–
InstanceBeginEditable name=”doctitle” –>

     <title>CP
CSS
框架測試</title>

     <!–
InstanceEndEditable –>

     <link
href=”css/screen.css” rel=”stylesheet”
type=”text/css” media=”screen” />

     <!–
InstanceBeginEditable name=”head” –>

     <style
type=”text/css”>

     #wrapper
#content #right #news_form {

       width:
500px;

       margin-right:
auto;

       margin-left:
auto;

       margin-top:
20px;

       margin-bottom:
20px;

     }

     #wrapper
#content #right #news_form table tr td h3 {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
1em;

       color:
#670167;

       text-align:
center;

       margin-top:
5px;

       margin-bottom:
5px;

     }

     #wrapper
#content #right #news_form table tr td h4 {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
0.9em;

       color:
#670167;

       text-align:
center;

       margin-top:
5px;

       margin-bottom:
5px;

     }

     #wrapper
#content #right #news_form #news_table {

       border-top-width:
1px;

       border-top-style:
dotted;

       border-top-color:
#990100;

       border-right-width:
1px;

       border-right-style:
dotted;

       border-right-color:
#990100;

     }

     #wrapper
#content #right #news_form #news_table tr td {

       border-bottom-width:
1px;

       border-left-width:
1px;

       border-bottom-style:
dotted;

       border-left-style:
dotted;

       border-bottom-color:
#990100;

       border-left-color:
#990100;

     }

     #wrapper
#content #right #news_form #news_table tr td h5 {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
0.9em;

       color:
#A336A3;

       margin-top:
5px;

       margin-bottom:
5px;

       margin-left:
5px;

     }

     .totalnum
{

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
0.8em;

       color:
#900;

       float:
right;

     }

     #wrapper
#content #right #newslist_tab {

       margin-right:
auto;

       margin-left:
auto;

       margin-top:
20px;

       margin-bottom:
20px;

       border-top-width:
1px;

       border-right-width:
1px;

       border-bottom-width:
1px;

       border-left-width:
1px;

       border-top-style:
dotted;

       border-right-style:
dotted;

       border-top-color:
#CB66CC;

       border-right-color:
#CB66CC;

       border-bottom-color:
#CB66CC;

       border-left-color:
#CB66CC;

     }

     #wrapper
#content #right #newslist_tab tr td {

       border-top-width:
1px;

       border-right-width:
1px;

       border-bottom-width:
1px;

       border-left-width:
1px;

       border-bottom-style:
dotted;

       border-left-style:
dotted;

       border-top-color:
#CB66CC;

       border-right-color:
#CB66CC;

       border-bottom-color:
#CB66CC;

       border-left-color:
#CB66CC;

     }

     #wrapper
#content #right #newslist_tab tr td h3 {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
1em;

       text-align:
center;

       margin:
10px;

       color:
#C6C;

     }

     #wrapper
#content #right #newslist_tab tr td h4 {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
0.9em;

       text-align:
center;

       margin:
5px;

       color:
#C6C;

     }

     #wrapper
#content #right #newslist_tab tr td p {

       font-family:
”
新細明體“,
“Times New Roman”;

       font-size:
0.9em;

       color:
#801A80;

       text-align:
left;

       margin-top:
5px;

       margin-bottom:
5px;

       margin-left:
5px;

     }

     .iconsimg
{

       margin-right:
auto;

       margin-left:
auto;

       margin-top:
2px;

       margin-bottom:
2px;

       border-top-style:
none;

       border-right-style:
none;

       border-bottom-style:
none;

       border-left-style:
none;

       text-align:
center;

     }

     #wrapper
#content #right #newslist_form {

       width:
600px;

       margin-top:
20px;

       margin-right:
auto;

       margin-bottom:
20px;

       margin-left:
auto;

     }

     </style>

     <!–
InstanceEndEditable –>

  </head>

  <body>

 

     <div
id=”wrapper”><!–ALL start–>

       <div
id=”header”>

         <table width=”230″
border=”0″ cellpadding=”0″ cellspacing=”0″
id=”icon_table”>

          <tr>

            <td>

               <a
href=”index.php”><img
src=”images/template_img/icon1.png” width=”30″
height=”30″ alt=”
回到首頁”
title=”
回到新聞首頁“/></a>

            </td>

            <td>

               <a
href=”javascript:window.external.AddFavorite(‘http://www.fol.com.tw’,”)”><img
src=”images/template_img/icon2.png” width=”30″
height=”30″ alt=”
加到最愛”
title=”
將芙兒加到我的最愛“/></a>

            </td>

            <td>

              <a
href=”shoppinginfo.html”><img
src=”images/template_img/icon3.png” width=”30″
height=”30″ alt=”
購物資訊”
title=”
購物相關說明” /></a>

            </td>

            <td>

               <a
href=”shopping.php”><img
src=”images/template_img/icon4.png” width=”30″
height=”30″ alt=”
購物車”
title=”
購物車功能” /></a>

            </td>

            <td>

               <a
href=”contentus.php”><img
src=”images/template_img/icon5.png” width=”30″
height=”30″ alt=”
聯絡我們”
title=”
聯絡芙兒” /></a>

            </td>

            <td>

               <p><a
href=”adminpage/adminlogin.php”>
管理員登入</a></p>

            </td>

          </tr>

          <tr><!–留空白用–>

            <td
colspan=”6″> </td>

          </tr>

         </table>

       </div><!–header
end–>

      

       <div
id=”navigation”>

          <table
width=”720″ border=”0″ cellspacing=”0″
cellpadding=”0″>

            <tr>

               <td
width=”225″>

                 <p>您好，歡迎來到芙兒。<a href=”memberlogin.php”>登入會員</a></p>

               </td>

               <td>

                 <a
href=”dress.php”><img
src=”images/template_img/button_01.png” width=”70″
height=”29″ /></a>

               </td>

               <td>

                 <a
href=”longdress.php”><img src=”images/template_img/button_02.png”
width=”70″ height=”29″ /></a>

               </td>

               <td>

                 <a
href=”formaldress.php”><img
src=”images/template_img/button_03.png” width=”70″
height=”29″ /></a>

               </td>

               <td>

                 <a
href=”coat.php”><img src=”images/template_img/button_04.png”
width=”70″ height=”29″ /></a>

               </td>

               <td>

                 <a
href=”other.php”><img
src=”images/template_img/button_05.png” width=”70″
height=”29″ /></a>

               </td>

               <td>

                 <a
href=”accessories.php”><img src=”images/template_img/button_06.png”
width=”70″ height=”29″ /></a>

               </td>

               <td>

                 <a
href=”uniform.php”><img
src=”images/template_img/button_07.png” width=”75″
height=”29″ /></a>

               </td>

            </tr>

          </table>

       </div><!–navigation–>

      

       <div
id=”content”>

      

          <div
id=”left”>

            <table
width=”225″ border=”0″ cellspacing=”0″
cellpadding=”0″><!–
利用table
width
指定整體表個寬度–>

               <tr>

                 <td>

                    <img
src=”images/template_img/banner_02.jpg” width=”225″
height=”225″ />

                 </td>

               </tr>

               <tr>

                 <td>

                    <img
src=”images/template_img/banner_03.jpg” name=”member_img”
width=”225″ height=”100″ border=”0″
usemap=”#member_imgMap” id=”member_img” />

                 </td>

               </tr>

               <tr>

                 <td>

                    <img
src=”images/template_img/banner_04.jpg” width=”225″
height=”100″ />

                 </td>

               </tr>

               <tr>

                 <td>

                    <img
src=”images/template_img/banner_05.jpg” width=”225″
height=”250″ />

                 </td>

               </tr>

               <tr>

                 <td
align=”center” valign=”middle”><!–
因為圖片大小不同所以用 align=”center”定義內容的水準對齊方式 valign=”middle”内容的垂直排列方式–>

                    <img
src=”images/template_img/banner_01.jpg” width=”159″
height=”140″ alt=”
徵才廣告”
/>

                 </td>

               </tr>

            </table>

          </div><!–content_left
end–>

         

          <div
id=”right”><!–
在CSS中有指定高度，所以有透個這個高度值確定身體的長度–>

            <form
id=”newslist_form” name=”newslist_form”
method=”post” action=””>

               <table
width=”600″ border=”0″ cellpadding=”0″
cellspacing=”0″ id=”newslist_tab”>

                 <tr>

                    <td
colspan=”3″>

                      <h3>最新消息</h3>

                    </td>

                 </tr>

                 <tr>

                    <td
width=”157″>

                      <h4>公告日期</h4>

                    </td>

                    <td
width=”399″>

                      <h4>標題</h4>

                    </td>

                    <td
width=”42″>

                      <h4>查看</h4

                   </td>

                 </tr>    

                 <tr>

                    <td>

                      <p> </p>

                    </td>

                    <td>

                      <p> </p>

                    </td>

                    <td
align=”center”>

                      <a
href=”newsdetail.php?<img src=”images/icons_img/Chat.png”
width=”20″ height=”20″ class=”iconsimg”
title=”
查看內容“/></a>

                    </td>

                 </tr>

               </table>

            </form>

          </div><!–content_right
end–>

         

       </div><!–content
end–>

      

       <div
id=”footer”><!–
在CSS中有指定高度–>

          <table
width=”900″ border=”0″ cellpadding=”0″
cellspacing=”0″ id=”footer_text”>

            <tr>

               <td
width=”552″>

                 <p>│<a href=”aboutus.html”>關於芙兒</a>│<a
href=”webindex.html”>
網站地圖</a>│<a href=”privacy.html”>隱私權保護</a>│客服專線：0800-888-999</p>

               </td>

               <td
width=”348″>

                 <h5>COPYRIGHT
© FOL. ALL RIGHTS RESERVED</h5>

               </td>

            </tr>

          </table>

       </div><!–footer
end–>

      

     </div><!–ALL
end–>    

 

  </body>

 

</html>

 


 


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *