Web前端學習記錄(十六)

原創 fakerth 2020-05-11 05:06
前言：

y離開了，就這樣靜靜地離開了，離開得悄無聲息，如果可以再來一次，w會選擇放手吧，生活還要繼續下去，少了y，少了那一份特殊的快樂。對不起，我喜歡你。會回來吧，也許。

進一步完善商品詳情頁面：

完整頁面：
在這裏插入圖片描述
關於如何用谷歌瀏覽器長截圖：https://blog.csdn.net/weixin_43912621/article/details/105205860.

shoppingDetail.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漫步時尚廣場-商品詳情</title>
<link href="css/detail.css" rel="stylesheet" type="text/css">
<!--解決部分瀏覽器對HTML5不支持-->
<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

</head>
<body>
<article id="main"> 
  <!--頂部區域 start-->
  <header class="top_bg">
    <div class="top_content">
      <div class="floatl"><img src="images/star.jpg">收藏 | HI，歡迎來訂購 ！<a href="#" class="orange">[請登錄]</a> <a href="#"  class="orange"> [免費註冊]</a></div>
      <div class="floatr">客戶服務<img src="images/arrow.gif">&nbsp;網站導航<img src="images/arrow.gif">&nbsp;<span class="droparrow"><span class="shopcart"></span>我的購物車<span class="orange">0</span>件<img src="images/arrow.gif"  /></span></div>
    </div>
  </header>
  <!--頂部區域 end--> 
  <!--logo和banner start-->
  <div class="logo"><img src="images/logo.jpg" ><img src="images/banner.jpg" ></div>
  <!--logo和banner  end--> 
  <!--菜單導航 start-->
  <nav class="nav_bg">
    <div class="nav_content">
      <ul class="menu_nav">
        <li ><a href="shoppingIndex.html" class="white">首頁</a></li>
        <li><a href="shoppingShow.html"  class="white">最新上架</a></li>
        <li>品牌活動</li>
        <li>原廠直供</li>
        <li>團購</li>
        <li>限時搶購</li>
        <li>促銷打折</li>
      </ul>
    </div>
  </nav>
  <!--菜單導航 end--> 
  <!--中間部分 start-->
  <section>
    <div class="main">
      <nav>
        <ul class="menu">
          <li><span class="title">女裝</span></li>
          <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >下裝</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >連衣裙</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >內衣</a><span class="right_arrow"></span></li>
          <li><span class="title">男裝</span></li>
          <li><span class="red_dot"></span><a href="#" >T恤</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >短褲</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >襯衫</a><span class="right_arrow"></span></li>
          <li><span class="title">童裝</span></li>
          <li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >褲子</a><span class="right_arrow"></span></li>
          <li><span class="title">運動</span></li>
          <li><span class="red_dot"></span><a href="#" >運動褲</a><span class="right_arrow"></span></li>
          <li><span class="red_dot"></span><a href="#" >跑步鞋</a><span class="right_arrow"></span></li>
        </ul>
      </nav>
      <!--購物分類end--> 
      <!--中間區 start-->
      <div class="middle">
        <h1 class="pic_title">商品詳情</h1>
        <div class="left_pic">
          <div id="box">
          	<img src="images/showdetail/dd1.jpg" width="400" height="400" id="showGoodsPicture">
            <div id="shade"></div>
          </div>
          <ul class="small_piclist" id="goodsList">
            <li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd2.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd3.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd4.jpg" onclick="changeGoodsImage(this)"></li>
            <li><img src="images/showdetail/dd5.jpg" onclick="changeGoodsImage(this)"></li>
          </ul>
          <!--canvas不能通過樣式設置大小，只能通過屬性設置-->
          <canvas id="canvas" width="400px" height="400px"></canvas>
        </div>
        <div class="right">
          <h1 class="font16">冬季新款牛仔外套女中長款加厚<br/>
            女冬裝連帽毛領加絨牛仔棉衣女風衣</h1>
          <img src="images/showdetail/pic_mess.jpg"> </div>
        <div class="clear"></div>
        <ul class="tab" id="goodsTabs">
          <li  class="tab_active" onClick="changeGoodsInfo(this)">商品詳情</li>
          <li onClick="changeGoodsInfo(this)">商品評價</li>
          <li onClick="changeGoodsInfo(this)">成交記錄</li>
        </ul>
        <article class="tab_content1">
          <ul class="particulars">
            <li title=" 修身">服裝版型: 修身</li>
            <li title=" 甜美">風格: 甜美</li>
            <li title=" 瑞麗">甜美: 瑞麗</li>
            <li title=" 中長款">衣長: 中長款</li>
            <li title=" 長袖">袖長:長袖</li>
            <li title=" 常規">袖型: 常規</li>
            <li title=" 帶帽">領型:帶帽</li>
            <li title=" 拉鍊">衣門襟:拉鍊</li>
            <li title=" 純色">圖案: 純色</li>
            <li title=" 81%(含)-90%(含)">成分含量:81%(含)-90%(含)</li>
            <li title=" 棉">質地: 棉</li>
            <li title=" 25-29週歲">適用年齡: 25-29週歲</li>
            <li title=" 2015年冬季">年份季節:2015年冬季</li>
            <li title=" 深藍色 藍色">顏色分類: 深藍色 藍色</li>
            <li title=" M L XL 2XL">尺碼:M L XL 2XL</li>
          </ul>
          <section> <img src="images/showdetail/detail1.jpg"> <img src="images/showdetail/detail2.jpg"> <img src="images/showdetail/detail3.jpg" class="img_border"> <img src="images/showdetail/detail4.jpg" class="img_border"> <img src="images/showdetail/detail5.jpg" class="img_border"><img src="images/showdetail/detail6.jpg" class="img_border"></section>
        </article>
        <article class="tab_content2 none"><img src="images/showdetail/pinglun.jpg"/></article>
        <article class="tab_content3 none">
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <th>買家</th>
                <th>淘寶價</th>
                <th>數量</th>
                <th>付款時間</th>
                <th>款式和型號</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td> a**男 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-31 20:08:39 </td>
                <td><div>
                    <p>顏色分類:深藍色[胸前格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 閨**你 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-27 14:05:17 </td>
                <td><div>
                      <p>顏色分類:藍色[口袋格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> w**0 (匿名)</td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-23 12:33:54 </td>
                <td><div>
                   <p>顏色分類:深藍色[胸前格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> a**u (匿名)</td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-23 12:04:19 </td>
                <td><div>
                     <p>顏色分類:藍色[口袋格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 落**1 (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-22 21:39:27 </td>
                <td><div>
                  <p>顏色分類:深藍色[胸前格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
              <tr>
                <td> 6**s (匿名) </td>
                <td><em class="price2">¥198.00</em></td>
                <td>1</td>
                <td> 2015-07-12 15:00:30 </td>
                <td><div>
                   <p>顏色分類:藍色[口袋格紋]</p>
                    <p>尺碼:L</p>
                  </div></td>
              </tr>
            </tbody>
          </table>
        </article>
        <!--品牌活動-->
        <article>
            <h1 class="pic_title">看了又看</h1>
            <ul class="pic_list4">
              <li><img src="images/showdetail/ss1.jpg" title="2015新款條紋顯瘦V領短袖露背寬鬆連身褲"/>
                <p>2015新款條紋顯瘦V領短袖露背寬鬆連身褲</p>
              </li>
              <li><img src="images/showdetail/ss2.jpg" title="2015女士新款百搭休閒闊腿褲高腰紅色短褲"/>
                <p>2015女士新款百搭休閒闊腿褲高腰紅色短褲</p>
              </li>
              <li><img src="images/showdetail/ss3.jpg" title="女版街頭個性休閒口袋純色衛衣吊帶哈倫褲"/>
                <p>女版街頭個性休閒口袋純色衛衣吊帶哈倫褲</p>
              </li>
              <li><img src="images/showdetail/ss4.jpg" title="韓版簡約百搭五分袖喇叭袖圓領打底短袖"/>
                <p>韓版簡約百搭五分袖喇叭袖圓領打底短袖</p>
              </li>
              <li><img src="images/showdetail/ss5.jpg" title="卡瑪婭秋裝新款女裝 圓領純棉上衣棉T恤" />
                <p>卡瑪婭秋裝新款女裝 圓領純棉上衣棉T恤</p>
              </li>
            </ul>
        <article>
      </div>
      <!--中間區 end--> 
      <!--右側熱門推薦 start-->
      <aside class="right_nav">
        <h1 class="notice_title"> 熱門推薦 </h1>
        <ul class="pic_list3">
          <ul>
            <li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
              <p class="price2">￥56.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
              <p class="price2">￥97.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
              <p class="price2">￥89.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
              <p class="price2">￥93.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
              <p class="price2">￥58.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
              <p class="price2">￥69.00元</p>
            </li>
            <li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
              <p class="price2">￥78.00元</p>
            </li>
          </ul>
        </ul>
      </aside>
    </div>
  </section>
  <!--右側熱門推薦 end--> 
  <!--中間部分 end-->
  <footer>
    <div class="clear"></div>
    <div class="foot">
      <div class="foot_title">
        <ul class="foot_pic">
          <li><img src="images/gray1.jpg" ></li>
          <li><img src="images/gray2.jpg" ></li>
          <li><img src="images/gray3.jpg" ></li>
          <li><img src="images/gray4.jpg" ></li>
          <li><img src="images/gray5.jpg" ></li>
        </ul>
      </div>
      <ul class="foot_list">
        <li>
          <div class="floatl">
            <p class="red1"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">新手指導</li>
            <li>用戶註冊</li>
            <li>電話下單</li>
            <li>購物流程</li>
            <li>購物保障</li>
            <li>服務協議</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red2"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">支付方式</li>
            <li>貨到付款</li>
            <li>商城卡支付</li>
            <li>支付寶、網銀支付</li>
            <li>優惠券抵用</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">配送方式</li>
            <li>閃電發貨</li>
            <li>滿百包郵</li>
            <li>配送範圍及時間</li>
            <li>商品驗收及簽收</li>
            <li>服務協議</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">售後服務</li>
            <li>退換貨協議</li>
            <li>關於發票</li>
            <li>退換貨流程</li>
            <li>退換貨運費</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">關於帳號</li>
            <li>修改個人信息</li>
            <li>修改密碼</li>
            <li>找回密碼</li>
          </ul>
        </li>
        <li>
          <div class="floatl">
            <p class="red3"></p>
            <p class="line1"></p>
          </div>
          <ul class="floatl">
            <li class="font16 padding-bottom">優惠活動</li>
            <li>競拍須知</li>
            <li>搶購須知</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="foot_line"></div>
      <p align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<Br/>
        中國青島 高新區河東路8888號  青軟教育集團    諮詢熱線：400-658-0166  400-658-1022 </p>
      <p align="center"><img src="images/foot_pic.jpg"></p>
      <div class="clear"></div>
    </div>
  </footer>
</article>
</body>
</html>
detail.css:
@charset "utf-8";
body{
	font-size:12px;
	font-family:microsoft yahei;
	margin:0;
	color:#000;
}
*{
	padding:0;
	margin:0;
}
li,ul{
	list-style:none;
}
a{
	color:#000;
	text-decoration:none;
}
a:hover{
	color:#ce2626;
	text-decoration:none;
}
img{
	border:none;
}
.font14{
	font-size:14px;
	font-weight:700;
}
.font16{
	font-size:16px;
	font-weight:700;
}
.clear{
	clear:both;
}
.floatl{
	float:left;
}
.floatr{
	float:right;
}
.main{
	margin:10px auto;
	width:1200px;
}
/*頭部*/
.top_bg{
	border-bottom:1px solid #ccc;
	font-size:12px;
	font-family:"宋體";
	line-height:30px;
	background:#f7f7f7;
	height:30px;
	line-height:30px;
}
.top_content{
	width:1200px;
	margin:0 auto;
}
.logo{
	margin:5px auto;
	width:1200px;
}
.nav_bg{
	background:#ce2626;
	width:100%;
	color:#fff;
}
.nav_content{
	width:1200px;
	margin:0 auto;
	height:40px;
	line-height:40px;
}
.menu_nav{
	width:700px;
	float:left;
	margin-left:200px;
}
.menu_nav li{
	font-size:16px;
	font-weight:700;
	color:#fff;
	width:80px;
	float:left;
	text-align:center;
	margin-right:15px;
}
.orange{
	font-weight:700;
	color:#f60;
}
.nav_active{
	background:#b12121;
}
a.white{
	color:#fff;text-decoration:none;
}
a.white:hover{
	color:#ff0;
	text-decoration:none;
}
.shopcart{
	background:url(../images/shoppingcart.png) 	no-repeat;
	width:16px;
	height:16px;
	display:inline-block;
	float:left;
	margin:5px 5px 0 0;
}
/*左側導航*/
.right_arrow{
	background:url(../images/arrow_r.jpg) 	no-repeat;
	width:20px;
	height:20px;
	display:inline-block;
	float:right;
}
.menu{
	width:220px;
	float:left;
	border:1px solid #e5e4e1;
}
.menu li{
	float:left;
	width:220px;
	border-bottom:1px solid #e5e4e1;
	height:33px;
	line-height:33px;
	background:#fafafa;
	font-size:14px;
	text-align:left;
}
.menu li .title{
	height:33px;
	background:#e5e4e1;
	font-size:15px;
	text-indent:20px;
	text-align:left;
	width:100%;
	line-height:33px;
	display:inline-block;
}
.red_dot{
	font-size:25px;
	margin-right:10px; 
	width:8px;
	height:8px;
	display:inline-block;
	background:url(../images/red_dot.gif) no-repeat;
	margin-left:10px;
}
/*中間部分*/
.middle{
	float:left;
	width:690px;
}
.pic_title{
	background:#ff9c01;
	line-height:35px;
	font-size:14px;
	text-indent:20px;
	text-align:left;
	width:680px;
	float:left;
	color:#fff;
	margin:0 10px 10px;
}
/*右側公告*/
.right_nav{
	width:280px;
	border:1px solid #eee;
	float:right;
}
.notice_title{
	background:#eee;
	line-height:35px;
	font-size:14px;
	text-indent:20px;
	text-align:left;
}
/*foot*/
.foot{
	width:100%;
	background:#efefef;
	height:310px;
	margin-top:15px;
}
.foot_title{
	background:#6a6665;
	width:100%;
	height:40px;
	padding-top:8px;
}
.foot_pic{
	margin:0 auto;
	width:1200px;
}
.foot_pic li{
	width:210px;
	float:left;
	text-align:center;
}
.padding-bottom{
	padding-bottom:10px;
}
.padding-top{
	padding-top:10px;
}
.foot_line{
	border-bottom:1px solid #ccc;
	font-size:12px;
	margin-top:10px;
}
.line1{
	background:url(../images/line1.jpg) no-repeat;
	width:20px;
	height:100px;
	display:inline-block;
}
.red1{
	background:url(../images/red1.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block;
}
.red2{
	background:url(../images/red2.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block;
}
.red3{
	background:url(../images/red3.jpg) no-repeat;
	width:35px;
	height:31px;
	display:block;
}
.foot_list>li{
	float:left;
	width:170px;
}
.foot_list{
	width:1100px;
	margin:0 auto;
	padding-top:20px;
}
.foot_list li ul{
	padding-left:10px;
}
.pic_list3 li{
	margin:5px;
	float:left;
	width:83px;
}
.pic_list3 li img{
	border:1px solid #ccc;
}
.pic_list4{
	margin-left:18px;
}
.pic_list4 li{
	margin:5px;
	float:left;
	width:123px;
}
.pic_list4 li img{
	border:1px solid #ccc;
}
.small_piclist li{
	float:left;
	margin-right:10px;
}
.small_piclist li img{
	width:70px;
	height:70px;
	border:1px solid #ccc;
}
.left_pic{
	margin-left:10px;
	float:left;
}
.tab{
	margin:10px;
	border-bottom:1px solid #ccc;
	height:35px;line-height:35px;
}
.tab li{
	width:90px;
	float:left;
	font-size:14px;
	text-align:center;
}
.tab_active{
	border-top:3px solid red;
	width:100px;
	font-weight:700;
	background:#f2f2f2;
	height:33px;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
}
.none{
	display:none;
}
.particulars li{
	display:inline;
	float:left;
	height:24px;
	line-height:24px;
	margin-right:20px;
	overflow:hidden;
	text-indent:5px;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:206px;
}
.price2{
	font-size:12px;
	font-weight:700;
	color:red;
	text-align:center;
}
.tab_content3{
	width:670px;
	margin:0 auto;
}
.tab_content3 table th{
	height:30px;
	background:#f2f2f2;
	text-align:center;
}
.tab_content3 table td{
	text-align:center;
	height:40px;
	border-bottom:1px dashed #ccc;
}
.right{
	float:left;
}
article,footer,header,nav,section{
	display:block;
}
.tab_content1 section{
	text-align:center;
	width:700px;
}
.img_border{
	border:1px solid #ccc
	margin-top:10px;
}
/* 放大鏡部分 */
.left_pic{
    position:relative;
    margin-left:10px;
    float:left
}
#box{
    position: relative;
    margin-bottom: 10px;
    width: 400px;
    height: 400px;
}
#shade{
    position: absolute;
    top: 0px;
    z-index: 1000;
    width: 200px;
    height: 200px;
    filter: alpha(Opacity=70); /*IE設置透明度*/
    -moz-opacity: 0.7; /*火狐設置透明度*/
    opacity: 0.7; /*chrome設置透明度*/
    background-color:#FFC;
    display: none;
}
#canvas{
    position: absolute;
    left: 410px;
    top: 0px;
    display: none;
    background-color:wheat;
    display: none;
}
通過HTML5表格對添加商品頁面進行重構：

預覽如下：
在這裏插入圖片描述

addgoods.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加商品頁面-後臺管理系統</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/add.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="place"><span>位置：</span>
  <ul class="placeul">
    <li><a href="main.html" target="_parent">首頁</a></li>
    <li><a href="#">添加商品</a></li>
  </ul>
</div>
<div class="formbody">
  <div  class="usual">
    <div class="tabson">
        <form id="addgoodsForm" method="post" action="http://www.itshixun.com">
          <ul class="forminfo">
            <li>
              <label>商品縮略圖<b>*</b></label>
              <input name="thumbImage" id="thumbImage" type="file"  multiple="multiple"/>
            </li>
            <li>
              <label>商品名稱<b>*</b></label>
              <input name="goodsName" id="goodsName" type="text" class="dfinput" value="請填寫商品名稱"   
                required="required" style="width:500px;"/>
            </li>
            <li>
              <label>商品類別<b>*</b></label>
              <div class="vocation">
                <select class="select3" name="goodsType" id="goodsType">
                  <option>男裝</option>
                  <option>女裝</option>
                  <option>童裝</option>
                  <option>運動</option>
                  <option>其他</option>
                </select>
              </div>
            </li>
            <li>
              <label>商品單價<b>*</b></label>
              <input name="unitPrice" id="unitPrice" class="dfinput" type="number"  required="required"  style="width:100px;"/>元 </li>
            <li>
              <label>團購價<b>*</b></label>
              <input name="groupPrice" id="groupPrice" class="dfinput" type="number"   required="required" style="width:100px;"/>元 </li>
            <li>
              <label>商品數量<b>*</b></label>
              <input name="goodsNumber" id="goodsNumber" type="number" class="dfinput"  required="required" style="width:100px;"/>
              件 </li>
            <li>
              <label>發佈日期<b>*</b></label>
              <input name="publishDate" id="publishDate" type="date" class="dfinput"  required="required" style="width:120px;"/>
            </li>
            <li>
              <label>是否審覈<b>*</b></label>
              <div class="vocation">
                <select class="select3" name="isChecked" id="isChecked">
                  <option>已審覈</option>
                  <option>未審覈</option>
                </select>
              </div>
            </li>
            <li>
              <label>商品描述<b>*</b></label>
              <textarea name="goodsDescription" rows="3" id="content"  style="width:500px;height:100px;"></textarea>
            </li>
            <li>  <label>&nbsp;</label>
              <input type="submit" class="btn" id="btnPublish" value="馬上發佈"/>
            </li>
          </ul>
        </form>
    </div>
  </div>
</div>
</body>
</html>
add.css:
@charset "utf-8";
/* CSS Document */
.place{
	height:40px;
	 background:url(../images/righttop.gif) repeat-x;
}
.place span{
	line-height:40px; 
	font-weight:bold;
	float:left; 
	margin-left:12px;
}
.placeul li{
	float:left; 
	line-height:40px; 
	padding-left:7px; 
	padding-right:12px; 
	background:url(../images/rlist.gif) no-repeat right;
}
.placeul li:last-child{
	background:none;
}
.rightinfo{
	padding:8px;
}
.tools{
	clear:both; 
	height:35px; 
	margin-bottom:8px;
}
.toolbar{
	float:right;
}
.toolbar li{
	background:url(../images/toolbg.gif) repeat-x; 
	line-height:33px; 
	height:33px; 
	border:solid 1px #d3dbde; 
	float:left; 
	padding-right:10px; 
	margin-right:5px;
	border-radius: 3px;  
	cursor:pointer;
}
.toolbar li span{
	float:left; 
	margin-left:10px; 
	margin-right:5px; 
	margin-top:5px;
}
.toolbar1{
	float:right;
}
.toolbar1 li{
	background:url(../images/toolbg.gif) repeat-x; 
	line-height:33px; 
	height:33px; 
	border:solid 1px #d3dbde; 
	float:left; 
	padding-right:10px; 
	margin-left:5px;
	border-radius: 3px; 
}
.toolbar1 li span{
	float:left; 
	margin-left:10px; 
	margin-right:5px; 
	margin-top:5px;
}
select{
	background:url(../images/inputbg.gif) repeat-x;
	height:32px; 
	border-top:solid 1px #a7b5bc; 
	border-left:solid 1px #a7b5bc; 
	border-right:solid 1px #ced9df; 
	border-bottom:solid 1px #ced9df;
	padding:5px;
}
.sort{
	padding-left:3px;
}
.table1 tr td{
	padding:3px;
}
.table1 tr td b{ 
	color:red;
	margin-left:5px;
}
/*form*/
.formbody{
	padding:10px 18px;
}
.formtitle{
	border-bottom:solid 1px #d0dee5; 
	line-height:35px; 
	position:relative; 
	height:35px; 
	margin-bottom:28px;
}
.formtitle span{
	font-weight:bold;
	font-size:14px; 
	border-bottom:solid 3px #66c9f3;
	float:left; 
	position:absolute; 
	z-index:100; 
	bottom:-1px; 
	padding:0 3px; 
	height:30px; 
	line-height:30px;
}
.forminfo{
	padding-left:23px;
}
.forminfo li{
	margin-bottom:13px; 
	clear:both;
}
.forminfo li label{
	width:86px;
	line-height:25px; 
	display:block; 
	float:left;
}
.forminfo li i{
	color:#7f7f7f; 
	padding-left:20px; 
	font-style:normal;
}
.forminfo li b{
	color:red;
	margin-left:5px;
}
.forminfo li cite{
	display:block; 
	padding-top:10px;
}
.dfinput{
	width:345px; 
	height:25px; 
	line-height:25px; 
	border-top:solid 1px #a7b5bc; 
	border-left:solid 1px #a7b5bc; 
	border-right:solid 1px #ced9df; 
	border-bottom:solid 1px #ced9df;
	text-indent:10px;
}
.textinput{
	border-top:solid 1px #a7b5bc; 
	border-left:solid 1px #a7b5bc; 
	border-right:solid 1px #ced9df; 
	border-bottom:solid 1px #ced9df; 
	background:url(../images/inputbg.gif) repeat-x; 
	padding:10px; 
	width:504px; 
	height:135px; 
	line-height:20px; 
	overflow:hidden;
}
.btn{
	width:137px;
	height:35px; 
	background:url(../images/btnbg.png) no-repeat; 
	font-size:14px;
	font-weight:bold;
	color:#fff; 
	cursor:pointer;
}
layout.css:
@charset "utf-8";
/* CSS Document */
*{
	font-size:9pt;
	border:0;
	margin:0;
	padding:0;
}
body{
	font-family:'微軟雅黑'; 
	margin:0 auto;
}
ul,li{
	display:block;
	margin:0;padding:0;
	list-style:none;
}
img{
	border:0;
}
.date_text{
	font-size:12px; 
	float:right;
	line-height:45px; 
	padding-right:20px;
}
dl,dt,dd{
	margin:0;
	padding:0;
	display:block;
}
a,a:focus{
	text-decoration:none;
	color:#000;
	outline:none;
}
a:hover{
	color:#00a4ac;
	text-decoration:none;
}
table{
	border-collapse:collapse;
	border-spacing: 0;
}
cite{
	font-style:normal;
}
h2{
	font-weight:normal;
}
.floatl{
	float:left;
}
.floatr{
	float:right;
}
input{
	font-family:Tahoma,'微軟雅黑','宋體';
}
.orange14{
	font-size:14px;
	font-weight:bold; 
	color:orange;
}
textarea{
	border:1px solid #a7b5bc;
	width:500px;
	height:60px;
}
後記：願有人能陪你顛沛流離

世上安得雙全法，不負AC不負卿；
願風裁盡塵中沙，與君咫尺共天涯；
弱而不該凌雲志，窮且不墜青雲志；
我要成爲你的蓋世英雄。
所有人都不相信，帶着懷疑和猜忌；
而你堅持着本心，一路披荊又斬棘；
不管閒言和碎語，選擇相信了自己；
這纔是成爲英雄的路！！！

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

怎樣讓div中的字上下左右居中

<div style="height: 30px;line-height: 30px;text-align: center;"> 讓我居中 </div>使line-height和height一樣就能讓字上下居中

shaochengand 2020-07-08 11:56:57

TOMCAT下配置項目路徑

對工程的部署一般是將工程的壓縮文件放在tomcat安裝目錄的webapps下，訪問時通過鍵入：http://localhost:8080/xx(假定爲本機訪問，xx是部署時的應用工程的訪問名字）。 而如果直接鍵入：http://loca

shaochengand 2020-07-08 11:56:57

Axios--基礎知識

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

HTML5入門之常用標籤

html5標準網頁聲明 <!DOCTYPE html> 必要結構 <html > <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

blackcatkiller 2020-07-08 10:51:12

uniapp的相關介紹

1.pages.json   官網地址：https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8     pag

大佬养成记 2020-07-08 07:55:30

uniapp的那些坑

1.selectedColor不起作用      1.查看位置是否寫對，與lis同級                    2.是否爲16進制，selectedColor寫的rgb不支持  3.是否被其他樣式覆蓋，其他地方也設置過sele

大佬养成记 2020-07-08 07:55:14

javascript之基於tensorflow的posenet項目

1）源代碼如下： git clone https://github.com/tensorflow/tfjs-models 2）編譯： tfjs-models>yarn tfjs-models>cd posenet tfjs-models\

嵇康 2020-07-08 04:18:10

Web前端-Vue--vue-cli腳手架

Vue-cli腳手架搭建: 拿到新電腦第一次配置環境要做的步驟(以前沒有配置過環境): 安裝npm命令:      1.去nodejs官網下載node.exe  官網地址:https://nodejs.org/zh-cn/ 2. node

yanghainan0318 2020-07-08 01:18:38

Web前端-Vue--路由，本地mock數據搭建，keep-alive，active-class，重定向redirect

路由    路由的最基本配置:     1.下載vue-router模塊(我們搭建vue項目時 已經勾選下載 所以在這不需要重複下載)     2.在main.js 使用import語句 引入vue-router模塊     3.讓vue

yanghainan0318 2020-07-08 01:18:38

前端小白快速入門 之（一）HTML5 詳解

作者：浪子花夢 , 個人簡介：一個有趣的程序員 ~ 從今天開始，我將開始學習前端、ASP.NET 的一些知識，莫把假期浪費，大家一起衝！ 衝！ 衝！ 此文只針對向我一樣初學的小白，將詳細講解一些基礎且重要的HTML5 的知識

浪子花梦 2020-07-08 00:22:12

vscode如何快速生成標準的html代碼

步驟： 一、先輸入一個英文狀態下的 !             二、點擊 tab 鍵             三、自動生成標準的html代碼（見圖）                          

浅笑安然~ 2020-07-07 21:50:48

初入前端項目實訓-音樂之家

主要內容：介紹html和css，使用html和css實現一個簡單的音樂播放網頁，後面有源碼； 工具：Dreamweaver 說明：自己在學習的過程的一些記錄，和大家一起分享，若有錯誤之處和不當之處還望大家指出   d1：html文本標記語

风云庐陵水 2020-07-07 19:57:39

html5前端圖片壓縮，只需幾行底層代碼搞定，大小可配置

        /**          * 圖片壓縮，大仙造          * 技術交流495120021          * @param fil          * @param id          */      

jly_灵宝娃 2020-07-07 14:42:11

深度理解瀏覽器前端優化

優化關乎速度和滿意度。 從用戶體驗（UX）角度，我們希望前端網頁可以快速加載 從開發體驗（DX）角度，我們希望前端是快速，簡潔，規範的 瀏覽器都做了什麼? 我們希望瀏覽器打開一個簡單的網頁 <!DOCTYPE html> <h

June.1 2020-07-07 11:48:23

html 編碼規範

https://segmentfault.com/a/1190000002465212#articleHeader7    html 編碼 規範

微笑吃橘子 2020-07-07 10:28:55