开始前端-----第六篇

最新推荐文章于 2023-06-30 22:25:13 发布

qq_40408175

最新推荐文章于 2023-06-30 22:25:13 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/qq_40408175/article/details/78702691

版权

<!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>
<style>
*{margin:0; padding:0;}

.father{
	width:100%; 
	background-color:#fafafa; 
	height:1100px;
	}
/*头部代码*/
.head{
	width:80%; 
	height:30px; 
    margin:0 auto;
	}
.a1 li{
	float:left; 
	list-style:none; 
	margin:7px 0 0 30px; 
	font-size:15px;
	}
.a1 li a{
	color:#666666; 
	text-decoration:none;
	}
.a1 li a:hover{
	color:#C00; 
	text-decoration:underline;
	}
.a2{float:right;}
.a2 li{
	float:right; 
	list-style:none; 
	margin:7px 0 0 30px; 
	font-size:15px;
	}
.a2 li a{color:#666666; text-decoration:none;}
.a2 li a:hover{color:#C00; text-decoration:underline;} 
/*搜索*/ 
.a3{
	width:100%; 
	margin-top:20px; 
	overflow:hidden; 
	margin:0 auto; 
	background-color:#FFF;
	}
.a3 img{float:left; margin:20px 0 0 150px;}
.form{
	float:left; 
	width:350px; 
	height:35px; 
	border:#FF0000 solid 1px; 
	margin:33px 0 0 160px; 
	}
#in{
	width:280px; 
	height:30px; 
	outline:none; 
	border:none; 
	padding-top:2px;
	}
button{
	float:right; 
	width:60px; 
	height:35px; 
	background-color:#FF0000; 
	outline:none; 
	border:none;
    color:#FFFFFF;
    font-size:14px;
      }
/*中部*/
.a4{
	width:100%; 
	height:50px; 
	background-color:#000000; 
	margin-top:20px; 
	opacity:0.8;
	}
.a44{margin-left:150px;}
.a4 li{
	float:left; 
	height:50px; 
	list-style:none; 
	margin-top:-18px; 
	margin-left:30px; 
	font-size:20px; 
	line-height:50px;  
	width:100px; 
	text-align:center;
	}
.a4 li a{color:#FFF; text-decoration:none;}
.a4 li:hover{background-color:#CC0000;}

.a5{width:100%; float:left;}
.a5 img{padding-left:155px;}
.a5 ul{padding-left:155px; background-color:#099;}
.a5 li{
	width:135px;  
	height:30px; 
	float:left; 
	list-style:none; 
	padding-left:40px; 
	line-height:30px;
	background-color:#333;
	}
.a55 img{
	float:right; 
	margin-right:176px; 
	margin-top:-430px; 
	position:relative;
	}
.a5 li a{
	color:#FFF; 
	text-decoration:none; 
	background-color:#333; 
	}
.a5 li a:hover{
				color:red; 
				text-decoration:underline;
				}
/*图片*/
.a6 ul{padding-left:115px; margin-top:40px;}
.a6 li{
	width:300px; 
	height:200px; 
	list-style:none; 
	float:left; 
	padding-left:40px; 
	padding-top:20px;
	}

/*底部*/
.a7{
	width:972px; 
	height:600px;  
	margin-left:155px; 
	background-color:#CCCCCC;
	}
.a77{
	width:150px;  
	margin-left:100px; 
	float:left; 
	margin-top:20px;
	}
span{font-size:24px;}
.a77 li{
	list-style:none; 
	line-height:40px; 
	font-size:18px; 
	}
.a77 li a{
			color:#666; 
			text-decoration:none;
			}
.a77 li a:hover{
				color:red; 
				text-decoration:underline;
				}
</style>



</head>

<body>
<div class="father">
      <div class="head">
            <div class="a1">
                 <ul>
                 <li><a href="">登录</a></li>
                 <li><a href="">注册</a></li>
                 </ul>
             </div>
             <div class="a2">
                  <ul>
                  <li><a href="">我的订单</a></li>
                  <li><a href="">我的国美</a></li>
                  <li><a href="">企业导购</a></li>
                  <li><a href="">网站导航</a></li>
                  </ul>
             </div>
            </div> 
            
     <div class="a3">
               <img src="2.png">
               <div class="form">
                  <form method="post" action="" enctype="application/x-www-form-urlencoded">
                  <input  type="text" placeholder="请输入真划算商品名称" id="in"/>
                    <button>搜 索</button>
                  </form>
                  </div>
                   </div>
              
         <div class="a4">
         　　　　<div class="a44">
                 <ul>
                  <li><a href="">真划算分类</a></li>
                  <li><a href="">首页</a></li>
                  <li><a href="">限时抢</a></li>
                  <li><a href="">浓情冬至</a></li>
                 </ul>
                 </div>
         </div>  
         
         <div class="a5">
         <img src="1.png" width="700px" height="400px" >
         <ul>
             <li><a href="">优惠“粽”动员</a></li>
             <li><a href="">服饰钜惠团</a></li>
             <li><a href="">厨卫大电</a></li>
             <li><a href="">低价钜惠</a></li>
         </ul>
         <div class="a55">
          <img src="3.png" height="430px" width="272px">
         </div>
         </div>  
         
      
         
       <div class="a6">
       <ul>
       <li><a href=""><img src="4.jpeg"></a></li>
       <li><a href=""><img src="5.jpeg"></a></li>
       <li><a href=""><img src="6.jpeg"></a></li>
       <li><a href=""><img src="7.jpeg"></a></li>
       <li><a href=""><img src="6.jpeg"></a></li>
       <li><a href=""><img src="7.jpeg"></a></li>
       </ul>
       </div>  
       </div>
       
       <div class="a7">
         <div class="a77">
           <ul>
                  <li><span>物流配送</span></li>
                  <li><a href="">配送查询</a></li>
                  <li><a href="">配送服务</a></li>
                  <li><a href="">配送费用</a></li>
                  <li><a href="">配送时效</a></li>
                  <li><a href="">签收与验货</a></li>
           </ul>
           </div>
           
           <div class="a77">
               <ul>
      <li><span>支付与账户</span></li>
      <li><a href="">货到付款</a></li>
      <li><a href="">在线支付</a></li>
      <li><a href="">分期付款</a></li>
      <li><a href="">门店支付</a></li>
      <li><a href="">账户安全</a></li>
    </ul> 
    </div>
           
             <div class="a77">
    <ul>
      <li><span>售后服务</span></li>
      <li><a href="">退换货服务</a></li>
      <li><a href="">退款说明</a></li>
      <li><a href="">专业维修</a></li>
      <li><a href="">延保服务</a></li>
      <li><a href="">家电回收</a></li>
    </ul> 
    </div>
           
             <div class="a77">
    <ul>
      <li><span>会员专区</span></li>
      <li><a href="">会员介绍</a></li>
      <li><a href="">优惠券说明</a></li>
      <li><a href="">美豆说明</a></li>
      <li><a href="">国美社区</a></li>
      <li><a href="">商品评价</a></li>
    </ul> 
    </div>
    
             <div class="a77">
    <ul>
      <li><span>购物帮助</span></li>
      <li><a href="">购物保障</a></li>
      <li><a href="">购物流程</a></li>
      <li><a href="">促销优惠</a></li>
      <li><a href="">焦点问题</a></li>
      <li><a href="">联系我们</a></li>
    </ul>
  </div>
 
 </div> 
</body>
</html>

qq_40408175

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
开始前端-----第六篇

国美在线*{margin:0; padding:0;}.father{ width:100%; background-color:#fafafa; height:1100px; }/*头部代码*/.head{ width:80%; height:30px; margin:0 auto; }.a1 li{ float:left; list-style
复制链接

扫一扫