Zi 字媒體

CSS 閱讀筆記–台北e大[PHP全動態購物網站設計實務]首頁CSS完全複製cp_html_css.html範例備份(2015/12/30)   資料來源:http://elearning.taipei.gov.tw   css\screen.css @charset “utf-8”; /* CSS Document */ 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; } #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        http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />      InstanceBeginEditable name=”doctitle” –>      CP CSS 框架測試      InstanceEndEditable –>      href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />      InstanceBeginEditable name=”head” –>      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;      }           InstanceEndEditable –>            id=”wrapper”>        id=”header”>          border=”0″ cellpadding=”0″ cellspacing=”0″ id=”icon_table”>                                      href=”index.php”> src=”images/template_img/icon1.png” width=”30″ height=”30″ alt=” 回到首頁” title=” 回到新聞首頁“/>                                        href=”javascript:window.external.AddFavorite(‘http://www.fol.com.tw’,”)”> src=”images/template_img/icon2.png” width=”30″ height=”30″ alt=” 加到最愛” title=” 將芙兒加到我的最愛“/>                                       href=”shoppinginfo.html”> src=”images/template_img/icon3.png” width=”30″ height=”30″ alt=” 購物資訊” title=” 購物相關說明” />                                        href=”shopping.php”> src=”images/template_img/icon4.png” width=”30″ height=”30″ alt=” 購物車” title=” 購物車功能” />                                        href=”contentus.php”> src=”images/template_img/icon5.png” width=”30″ height=”30″ alt=” 聯絡我們” title=” 聯絡芙兒” />                                        href=”adminpage/adminlogin.php”> 管理員登入                                 留空白用–>             colspan=”6″>                            end–>               id=”navigation”>           width=”720″ border=”0″ cellspacing=”0″ cellpadding=”0″>                            width=”225″>                  您好，歡迎來到芙兒。登入會員                                                href=”dress.php”> src=”images/template_img/button_01.png” width=”70″ height=”29″ />                                                href=”longdress.php”> width=”70″ height=”29″ />                                                href=”formaldress.php”> src=”images/template_img/button_03.png” width=”70″ height=”29″ />                                                href=”coat.php”> width=”70″ height=”29″ />                                                href=”other.php”> src=”images/template_img/button_05.png” width=”70″ height=”29″ />                                                href=”accessories.php”> width=”70″ height=”29″ />                                                href=”uniform.php”> src=”images/template_img/button_07.png” width=”75″ height=”29″ />                                                           id=”content”>                  id=”left”>             width=”225″ border=”0″ cellspacing=”0″ cellpadding=”0″> 利用table width 指定整體表個寬度–>                                                     src=”images/template_img/banner_02.jpg” width=”225″ height=”225″ />                                                                                     src=”images/template_img/banner_03.jpg” name=”member_img” width=”225″ height=”100″ border=”0″ usemap=”#member_imgMap” id=”member_img” />                                                                                     src=”images/template_img/banner_04.jpg” width=”225″ height=”100″ />                                                                                     src=”images/template_img/banner_05.jpg” width=”225″ height=”250″ />                                                                 align=”center” valign=”middle”> 因為圖片大小不同所以用 align=”center”定義內容的水準對齊方式 valign=”middle”内容的垂直排列方式–>                     src=”images/template_img/banner_01.jpg” width=”159″ height=”140″ alt=” 徵才廣告” />                                                       end–>                     id=”right”> 在CSS中有指定高度，所以有透個這個高度值確定身體的長度–>             id=”newslist_form” name=”newslist_form” method=”post” action=””>                width=”600″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”newslist_tab”>                                      colspan=”3″>                       最新消息                                                                           width=”157″>                       公告日期                                         width=”399″>                       標題                                         width=”42″>                       查看                                                                                                                                                                                                               align=”center”>                       href=”newsdetail.php? width=”20″ height=”20″ class=”iconsimg” title=” 查看內容“/>                                                                           end–>                  end–>               id=”footer”> 在CSS中有指定高度–>           width=”900″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footer_text”>                            width=”552″>                  │關於芙兒│ href=”webindex.html”> 網站地圖│隱私權保護│客服專線：0800-888-999                               width=”348″>                  COPYRIGHT © FOL. ALL RIGHTS RESERVED                                             end–>             end–>