Web前端學習記錄(十一)

原創 fakerth 2020-07-03 22:34

實現用戶模擬登陸：

w：不得不說，這次的代碼量很多。
y：哦？就這？
w：……
w：先看一下預覽截圖吧。
在這裏插入圖片描述
輸入用戶名admin密碼admin後：
在這裏插入圖片描述
先上main.html的代碼：

main.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>漫步時尚廣場後臺管理系統</title>
  <script type="text/javascript">
		window.onload=function(){
			var flag=0;//保存用戶狀態（用戶未登錄）
			do{
				//使用數組保存用戶名和密碼
				var array=[["admin","admin"],["itshixun","itshixun"],
							["guoqy","123"]];
				var userName = prompt("請輸入用戶名：");
				var userPwd = prompt("請輸入密碼：");
				for (var i=0; i<array.length; i++) {
					if (array[i][0]==userName&&array[i][1]==userPwd) {
						alert("用戶登陸成功，歡迎<"+userName+">使用本系統!");
						//獲取topFrame框架對應的頁面中的class屬性爲”user”的元素，
						//然後再從中篩選<span>標籤，最後修改標籤中的內容
						topFrame.document.getElementsByClassName("user")[0]
						  .getElementsByTagName("span")[0].innerHTML=userName;
						flag=1;//用戶登錄成功
						break;
					}
					if(userName==null&&userPwd==null){
						flag=2;//用戶取消登錄
					}
				}
				if(flag==0){
					alert("用戶名或密碼錯誤，請重新登錄。");
				}
			}while(flag==0);
		}
	</script>
 </head>
 <frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" 
        id="topFrame" title="topFrame" />
    <frameset cols="187,*" frameborder="no" border="0" framespacing="0">
      <frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize"
         id="leftFrame" title="leftFrame" />
      <frame src="shoplist.html" name="rightFrame" id="rightFrame"
         title="rightFrame" />
    </frameset>
 </frameset>
 <noframes>
    <body>您的瀏覽器不支持框架集 </body>
 </noframes>
</html>

y：哦？就這？
w：還沒完呢！

<frameset rows="88,*" cols="*" frameborder="no" border="0" framespacing="0">
    <frame src="top.html" name="topFrame" scrolling="no" noresize="noresize" 
        id="topFrame" title="topFrame" />
    <frameset cols="187,*" frameborder="no" border="0" framespacing="0">
      <frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize"
         id="leftFrame" title="leftFrame" />
      <frame src="shoplist.html" name="rightFrame" id="rightFrame"
         title="rightFrame" />
    </frameset>
 </frameset>

這一部分，還涉及了另外三個html。
y：所以呢？就這？
w(我還能忍)：先上一個共用的css：

layout.css:
@charset "utf-8";
*{
	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;
}

然後第一個top.html:

top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上方導航欄</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/top.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:url(images/topbg.gif) repeat-x;">
<div class="topleft"> <a href="../index.html" target="_parent"><img src="images/logo.png" title="系統首頁" /></a> </div>
<ul class="nav">
  <li><a href="../index.html" target="_parent" class="selected"><img  src="images/globe.png"title="網站前臺" />
    <h2>網站前臺</h2>
    </a></li>
  <li><a href="index.html"  target="rightFrame"><img src="images/home.png"  title="後臺首頁" />
    <h2>後臺首頁</h2>
    </a></li>
  <li><a href="addgoods.html" target="rightFrame"><img src="images/shop.png" title="添加商品" />
    <h2>添加商品</h2>
    </a></li>
  <li><a href="addmovie.html" target="rightFrame"><img src="images/movie.png" title="添加影視" />
    <h2>添加影視</h2>
    </a></li>
  <li><a href="addfood.html" target="rightFrame"><img src="images/food.png" title="添加餐飲" />
    <h2>添加餐飲</h2>
    </a></li>
</ul>
<div class="topright">
  <ul>
    <li><span><img src="images/help.png" title="幫助"  class="helpimg"/></span><a href="#">幫助</a></li>
    <li><a href="#">關於</a></li>
    <li><a href="login.html" target="_parent">退出</a></li>
  </ul>
  <div class="user"><span>用戶未登錄</span> <i>消息</i> <b>5</b> </div>
</div>
</body>
</html>
top.css:
@charset "utf-8";
.header{
	height:88px;
}
.topleft{
	height:88px;
	background:url(../images/topleft.jpg) no-repeat;
	float:left; 
	width:300px;
}
.topleft img{
	margin-top:12px;
	margin-left:10px;
}
.topright{
	height:88px;
	background:url(../images/topright.jpg) no-repeat right;
	float:right;
}
.nav{
	float:left;
}
.nav li{
	float:left;
	width:87px;
	height:88px; 
	text-align:center;
}
.nav li a{
	display:block;
	width:87px;
	height:88px;
	-moz-transition: none; 
	transition: background-color 0.3s linear; 
	-moz-transition: background-color 0.3s linear; 
	-webkit-transition: background-color 0.3s linear; 
	-o-transition: background-color 0.3s linear; 
}
.nav li a.selected{
	background:url(../images/navbg.png) no-repeat;
}
.nav li a:hover{
	display:block;
	background:#000;
	color:#fff;
	background: none repeat scroll 0% 0% rgb(43, 127, 181);
}
.nav li img{
	margin-top:10px;
}
.nav li a{
	display:block;
}
.nav a h2{
	font-size:14px;color:#d6e8f1;
}
.nav a:hover h2{
	color:#fff;
}
.topright ul{
	padding-top:15px; 
	float:right; 
	padding-right:12px;
}
.topright ul li{
	float:left; 
	padding-left:9px; 
	padding-right:9px; 
	background:url(../images/line.gif) no-repeat right;
}
.topright ul li:last-child{
	background:none;
}
.topright ul li a{
	font-size:13px; 
	color:#e9f2f7;
}
.topright ul li a:hover{
	color:#fff;
}
.topright ul li span{
	margin-top:2px;
	float:left;
	padding-right:3px;
}
.user{
	height:30px;
	background:url(../images/ub1.png) repeat-x;
	clear:both;margin-top:10px;float:right; 
	margin-right:12px;border-radius:30px;  
	white-space:nowrap;position:relative;
}
.user span{
	display:inline-block;
	padding-right:10px; 
	background:url(../images/user.png) no-repeat 15px 10px; 
	line-height:30px; font-size:14px;
	color:#b8ceda; padding-left:20px; 
	padding-left:35px;
}
.user b{
	display:inline-block;
	width:20px;
	height:18px; 
	background:url(../images/msg.png);
	text-align:center; 
	font-weight:normal; 
	color:#fff;font-size:14px;
	margin-right:13px; 
	margin-top:7px; 
	line-height:18px;
}
.user i{
	display:inline-block;
	margin-right:5px;
	font-style:normal;
	line-height:30px; 
	font-size:14px;
	color:#b8ceda;
}

y：你繼續？
w：left.html:

left.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左側導航欄</title>
<link href="css/left.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:#f0f9fd;">
<div class="lefttop"><span></span>功能菜單</div>
<dl class="leftmenu">
  <dd>
    <div class="title"> <span><img src="images/leftico05.png" /></span>購物後臺管理 </div>
    <ul class="menuson">
      <li><cite></cite><a href="addgoods.html" target="rightFrame">添加商品</a><i></i></li>
      <li class="active"><cite></cite><a href="shoplist.html" target="rightFrame">商品列表</a><i></i></li>
      <li><cite></cite>商品類型<i></i></li>
    </ul>
  </dd>
  <dd>
    <div class="title"> <span><img src="images/leftico02.png" /></span>影視後臺管理 </div>
    <ul class="menuson">
      <li><cite></cite><a href="addmovie.html" target="rightFrame">添加影片</a><i></i></li>
      <li class="active"><cite></cite><a href="movielist.html" target="rightFrame">影片列表</a><i></i></li>
      <li><cite></cite>影片類型<i></i></li>
    </ul>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico05.png" /></span>餐飲後臺管理</div>
    <ul class="menuson">
      <li><cite></cite><a href="addfood.html" target="rightFrame">添加美食</a><i></i></li>
      <li class="active"><cite></cite><a href="foodlist.html" target="rightFrame">美食列表</a><i></i></li>
      <li><cite></cite>美食類型<i></i></li>
    </ul>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico04.png" /></span>訂單管理</div>
    <ul class="menuson">
      <li><cite></cite><a href="#">最新訂單</a><i></i></li>
      <li><cite></cite><a href="#">已處理訂單</a><i></i></li>
      <li><cite></cite><a href="#">取消訂單</a><i></i></li>
    </ul>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico04.png" /></span>交易記錄</div>
  </dd>
  <dd>
    <div class="title"><a href="jqueryChart.html"  target="rightFrame"><span><img src="images/leftico06.png" /></span>統計報表</a></div>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico04.png" /></span>權限分配</div>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico08.png" /></span>修改密碼</div>
  </dd>
  <dd>
    <div class="title"><span><img src="images/leftico07.png" /></span>系統設置</div>
  </dd>
</dl>
</body>
</html>
left.css:
@charset "utf-8";
*{
	font-size:9pt;
	border:0;
	margin:0;
	padding:0;
}
body{
	font-family:'微軟雅黑'; 
	margin:0 auto;
	min-width:980px;
}
ul{
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
li{
	display:block;
	margin:0;
	padding:0;
	list-style: none;
}
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;
}

/*left.html*/
.lefttop{
	background:url(../images/lefttop.gif) repeat-x;
	height:40px;
	color:#fff;
	font-size:14px;
	line-height:40px;
}
.lefttop span{
	margin-left:8px; 
	margin-top:10px;
	margin-right:8px; 
	background:url(../images/leftico.png) no-repeat; 
	width:20px; 
	height:21px;
	float:left;
}
.leftmenu{
	width:187px;
	padding-bottom: 9999px;
	margin-bottom: -9999px; 
	overflow:hidden; 
	background:url(../images/leftline.gif) repeat-y right;
}
.leftmenu dd{
	background:url(../images/leftmenubg.gif) repeat-x;
	line-height:35px;
	font-weight:bold;
	font-size:14px;
	border-right:solid 1px #b7d5df;
}
.leftmenu dd span{
	float:left;
	margin:10px 8px 0 12px;
}
.leftmenu dd .menuson{
	display:none;
}
.leftmenu dd:first-child .menuson{
	display:block;
}
.menuson {
	line-height:30px; 
	font-weight:normal; 
}
.menuson li a{
	cursor:pointer;
}
.menuson li.active{
	position:relative; 
	background:url(../images/libg.png) repeat-x; 
	line-height:30px; 
	color:#fff;
}
.menuson li cite{
	display:block; 
	float:left; 
	margin-left:32px; 
	background:url(../images/list.gif) no-repeat; 
	width:16px; 
	height:16px; 
	margin-top:7px;
}
.menuson li.active cite{
	background:url(../images/list1.gif) no-repeat;
}
.menuson li.active i{
	display:block; 
	background:url(../images/sj.png) no-repeat; 
	width:6px; 
	height:11px; 
	position:absolute; 
	right:0;
	z-index:10000; 
	top:9px; 
	right:-1px;
}
.menuson li a{ 
	display:block;
	*display:inline; 
	*padding-top:5px;
}
.menuson li.active a{
	color:#fff;
}
.title{
	cursor:pointer;
}

最後還有shopping_list.html:

shoplist.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>餐飲列表頁面-後臺管理</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/list.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li><a href="main.html">首頁</a></li>
    <li><a href="#">購物後臺管理</a></li>
    <li><a href="#">商品列表</a></li>
  </ul>
  <div class="date_text"><img src="images/leftico04.png">&nbsp;今天是2015年2月10日 星期一 12：00</div>
</div>
<div class="rightinfo">
  <div class="tools">
    <ul class="toolbar">
      <li ><span><img src="images/t01.png" /></span>添加</li>
      <li ><span><img src="images/t02.png" /></span>修改</li>
      <li class="click"><span><img src="images/t03.png" /></span>刪除</li>
      <li><a href="jqueryChart.html"><span><img src="images/t04.png" /></span>統計</a></li>
      <li><span><img src="images/t05.png" /></span>設置</li>
    </ul>
    <iframe src="shop_search.html" scrolling="no" frameborder="0" width="400" height="42"></iframe>
  </div>
  <table class="tablelist">
    <thead>
      <tr>
        <th><input name="" type="checkbox" value="" checked="checked"/></th>
        <th>縮略圖</th>
        <th>商品名稱</th>
        <th>商品類別</th>
        <th>數量(件）</th>
        <th>單價（元）</th>
        <th>發佈時間</th>
        <th>是否審覈</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td class="imgtd"><img src="images/img06.png" /></td>
        <td>RAX 頭層牛皮戶外鞋 男防滑登山鞋減震</td>
        <td>運動</td>
        <td>334</td>
        <td>¥566.00</td>
        <td>2015-06-06 15:05</td>
        <td>已審覈</td>
        <td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink"> 刪除</a></td>
      </tr>
      <tr class="odd">
        <td><input name="" type="checkbox" value="" /></td>
        <td class="imgtd"><img src="images/img07.png" /></td>
        <td>七匹狼休閒褲 春夏新款 男士時尚無褶休閒褲</td>
        <td>男裝</td>
        <td>455</td>
        <td>¥236.00</td>
        <td>2015-06-08 14:02</td>
        <td>未審覈</td>
        <td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">刪除</a></td>
      </tr>
      <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td class="imgtd"><img src="images/img08.png" /></td>
        <td>歐美大牌五分袖收腰顯瘦睫毛蕾絲連衣裙 粉色 </td>
        <td>女裝</td>
        <td>899</td>
        <td>¥136.00</td>
        <td>2015-06-07 13:16</td>
        <td>未審覈</td>
        <td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">刪除</a></td>
      </tr>
      <tr class="odd">
        <td><input name="" type="checkbox" value="" /></td>
        <td class="imgtd"><img src="images/img09.png" /></td>
        <td>銳步REEBOK熱2015新款線上獨家復古GL 2620運動生活休閒鞋男鞋</td>
        <td>運動</td>
        <td>3456</td>
        <td>¥346.00</td>
        <td>2015-06-06 10:36</td>
        <td>已審覈</td>
        <td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">刪除</a></td>
      </tr>
      <tr>
        <td><input name="" type="checkbox" value="" /></td>
        <td class="imgtd"><img src="images/img10.png" /></td>
        <td>新款中大童荷葉邊短袖裙子韓版兒童公主裙女童連衣裙 </td>
        <td>童裝</td>
        <td>678</td>
        <td>¥316.00</td>
        <td>2015-06-05 13:25</td>
        <td>已審覈</td>
        <td><a href="#" class="tablelink">查看</a> <a href="#" class="tablelink">刪除</a></td>
      </tr>
    </tbody>
  </table>
  <div class="pagin">
    <div class="message">共<i class="blue">1256</i>條記錄，當前顯示第&nbsp;<i class="blue">2&nbsp;</i>頁</div>
    <ul class="paginList">
      <li class="paginItem"><a href="#"><span class="pagepre"></span></a></li>
      <li class="paginItem"><a href="#">1</a></li>
      <li class="paginItem current"><a href="#">2</a></li>
      <li class="paginItem"><a href="#">3</a></li>
      <li class="paginItem"><a href="#">4</a></li>
      <li class="paginItem"><a href="#">5</a></li>
      <li class="paginItem more"><a href="#">...</a></li>
      <li class="paginItem"><a href="#">10</a></li>
      <li class="paginItem"><a href="#"><span class="pagenxt"></span></a></li>
    </ul>
  </div>
</div>
</body>
</html>
list.css:
@charset "utf-8";
.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;
}
.imgtable{
	width:100%;
	border:solid 1px #cbcbcb; 
}
.imgtable th{
	background:url(../images/th.gif) repeat-x; 
	height:34px; 
	line-height:34px; 
	border-bottom:solid 1px #b6cad2; 
	text-indent:21px; 
	text-align:left;
}
.imgtable td{
	line-height:20px; 
	text-indent:21px; 
	border-right: dotted 1px #c7c7c7;
}
.imgtable td img{
	margin:10px 20px 10px 0;
}
.imgtable td p{
	color:#919191;
}
.imgtable td i{
	font-style:normal; 
	color:#ea2020;
}
.imgtd{
	text-indent:0;
}
.imgtable tbody tr.odd{
	background:#f5f8fa;
}
.imgtable tbody tr:hover{
	background:#e5ebee;
}
.intro_width{
	width:300px;word-wrap:break-word; overflow:hidden;
}
/*seachform*/
.seachform{ 
	height:42px; 
}
.seachform li{
	float:left; 
	margin-right:15px;
}
.seachform li label{
	padding-right:10px; 
	float:left; 
	line-height:32px;
}
.scinput{
	width:180px; 
	height:32px; 
	line-height:32px; 
	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; 
	text-indent:10px; color:#999;
}
.scbtn{
	width:85px;
	height:35px; 
	background:url(../images/btnbg.png) no-repeat center; 
	font-size:14px;
	font-weight:bold;
	color:#fff; 
	cursor:pointer;
	border-radius:3px; 
}
select{
	background:url(../images/inputbg.gif) repeat-x;
	_background:none;
	_border:none;height:32px; 
	border-top:solid 1px #a7b5bc; 
	border-left:solid 1px #a7b5bc; 
	border-right:solid 1px #ced9df; 
	border-bottom:solid 1px #ced9df;
	padding:5px;
}
.tablelist{
	border:solid 1px #cbcbcb; 
	width:100%; 
	clear:both;
}
.tablelist th{
	background:url(../images/th.gif) repeat-x; 
	height:34px; 
	line-height:34px; 
	border-bottom:solid 1px #b6cad2; 
	text-indent:11px; 
	text-align:left;
}
.tablelist td{
	line-height:35px; 
	text-indent:11px; 
	border-right: dotted 1px #c7c7c7;
}
.tablelink{
	color:#056dae;
}
.tablelist tbody tr.odd{
	background:#f5f8fa;
}
.tablelist tbody tr:hover{
	background:#e5ebee;
}
/*page分頁*/
.pagin{
	position:relative;
	margin-top:10px;
	padding:0 12px;
}
.pagin .blue{
	color:#056dae;
	font-style:normal;
}
.pagin .paginList{
	position:absolute;
	right:12px;
	top:0;
}
.pagin .paginList .paginItem{
	float:left;
}
.pagin .paginList .paginItem a{
	float:left;
	width:31px;
	height:28px;
	border:1px solid #DDD; 
	text-align:center;
	line-height:30px;
	border-left:none;
	color:#3399d5;
}
.pagin .paginList .paginItem:first-child a{
	border-left:1px solid #DDD;
}
.pagin .paginList .paginItem:first-child a{
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
}
.pagin .paginList .paginItem:last-child a{
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
}
.pagin .paginList .paginItem.current,.pagin .paginList .paginItem.current a{
	background:#f5f5f5; 
	cursor:default;
	color:#737373;
}
.pagin .paginList .paginItem:hover{
	background:#f5f5f5;
}
.pagin .paginList .paginItem.more,.pagin .paginList .paginItem.more a:hover{ 
	cursor:default;
}
.pagin .paginList .paginItem.more:hover{
	background:#FFF;
}
.pagin .paginList .paginItem.more a{
	color:#737373;
}
.pagepre{
	background:url(../images/pre.gif) no-repeat center center; 
	width:31px; 
	height:28px;
}
.pagenxt{
	background:url(../images/next.gif) no-repeat center center; 
	width:31px; 
	height:28px;
}

y：我受夠了，ok?
w：no ok！
y：？？？？？？
w：

<iframe src="shop_search.html" scrolling="no" frameborder="0" width="400" height="42"></iframe>

這裏，shop_search.html:

shop_search.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品檢索</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/list.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="seachform">
  <li>
    <div class="vocation">
      <select class="select3">
        <option>商品類別</option>
        <option>女裝</option>
        <option>男裝</option>
        <option>童裝</option>
        <option>運動</option>
      </select>
    </div>
  </li>
  <li>
    <input type="text" class="scinput" value="請輸入商品名稱"/>
  </li>
  <li>
    <input name="searchBtn" type="button" class="scbtn" value="查詢"/>
  </li>
</ul>
</body>
</html>

w：ok！
y：ok？就這？溜了溜了……

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

怎樣讓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