html+css实现必要等商城页面

最新推荐文章于 2024-06-30 00:15:00 发布

原创最新推荐文章于 2024-06-30 00:15:00 发布 · 468 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

该博客详细介绍了如何使用HTML和CSS技术构建一个基本的商城主页，包括头部导航栏、顶部内容区域以及底部信息。这是一个静态页面的实现，不涉及JavaScript交互。欢迎大家提出宝贵意见。

头部导航栏

<body id="pagebody">
<div class="header header-index"></div>
<div class="nav nav-index">

顶部：

<div class="clearfix">
		<a href="http://www.biyao.com/home/index.html" class="nav-logo">
            <img src="http://static2.biyao.com/pc/common/img/master/logo.png" height="51">
        </a>			
		<div class="nav-search">
			<p>
                <input type="text" id="searchInput" placeholder="请输入要搜索的商品">
                <span id="searchBtn"></span>
            </p>
			<ul style>
                <li>洗面奶</li>
                <li>电动牙刷</li>
                <li>香水</li>
                <li>粉底液</li>
                <li>洗发水</li>
                <li>袜子</li>
                <li>面霜</li>
                <li>皮带男</li>
                <li>眼霜</li>
                <li>男士内裤</li> 
            </ul>   
		</div>
		<div class="nav-tab">
			<ul>
				<li class="na _hover">首页</a></li>
				<li class="na _hover">每日上新</a></li>
				<li class="border-l"></li>
				<li class="nav-tab-last">
					<div class="hover_text">
						了解必要
						<div class="hover_code gzh">
							<div class="cir"></div>
							<span>关注必要微信公众号<br>了解你想了解的一切<br>小必姐在此发福利哦</span>
						</div>
					</div> 
				</li>
				<li class="nav-tab-last" id="appDownload">下载必要APP</li>
				<li class="border-l"></li>
				<li class="nav-tab-last">
					<div class="hover_text">我的必要
						<div class="hover_code app">
							<div class="cir"></div>
							<span>扫码下载必要app<br>手机用户独享海量权益</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>

内容：

<ul class="rightBar" style="margin-left: 550px; display: block;">			
		<li class="toggle"></li>
		<li class="rightBar-xcx-code toggle novice">
			<div class="coupon_red">
				<div class="tis">
					迎新福利<br> 
					微信扫码即得
				</div>
				<div class="rightBar-title">
					15元
				</div>
				<div class="count-down" data-time="7200000" id="count-down"></div>
			</div>
			<div class="rightBar-ercode"></div>
		</li>
        <a href="">
            <li class="rightBar-top"></li>
        </a>
</ul>
<div class="shareCon">
	<div>
		<p>分享<b></b></p>
		<div class="share-main">
			<dl>
				<dt><img class="share-code" src="http://static3.biyao.com/pc/common/img/master/ewm.jpg"/></dt>
				<dd>扫一扫，分享给好友！</dd>
			</dl>
		</div>
	</div>
</div>	
<div class="banner">
	<div class="banner-slider">
		<img src="http://static1.biyao.com/pc/www/img/new_master/banner2.png?v=biyao_ded5987" />
	</div>
	<ul class="nav-list">		
			<li class="nav-main">
				<p>											
					<a href="#">咖啡</a>											
						<span>/</span>						
					<a href="#">饮食</a>											
						<span>/</span>						
					<a href="#">正餐</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
					<a href="#">男装</a>											
						<span>/</span>						
					<a href="#">女装</a>											
						<span>/</span>						
					<a href="#">鞋靴</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
					<a href="#">眼镜</a>											
						<span>/</span>						
					<a href="#">内衣配饰</a>											
						<span>/</span>						
					<a href="#">运动</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
					<a href="#">美妆</a>											
				        <span>/</span>						
		            <a href="#">个护</a>											
					    <span>/</span>
					<a href="#">母婴</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
					<a href="#">生鲜直供</a>											
						<span>/</span>						
                    <a href="#">餐厨</a>											
						<span>/</span>						
                    <a href="#">电器</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
				    <a href="#">箱包</a>										
						<span>/</span>						
					<a href="#">数码办公</a>											
						<span>/</span>						
					<a href="#">汽配</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
					<a href="#">家纺</a>										
						<span>/</span>						
					<a href="#">家具</a>											
						<span>/</span>						
					<a href="#">家装</a>					
				</p>
			</li>		
			<li class="nav-main">
				<p>											
				    <a href="#">健康保健</a>						
						<span>/</span>						
					<a href="#">宠物</a>										
						<span>/</span>						
					<a href="#">礼品</a>					
				</p>
			</li>		
	</ul>
</div>
<div class="platfor">
	<dl><dt></dt><dd>大牌品质</dd></dl>
	<dl><dt></dt><dd>工厂价格</dd></dl>
	<dl><dt></dt><dd>分期支付</dd></dl>
	<dl><dt></dt><dd>顺丰包邮</dd></dl>
	<dl><dt></dt><dd>无忧退款</dd></dl>
</div>
<div class="hotsale">
	<div class="title">
		<h3>热销排行</h3>
	</div>
	<div class="rankings">		
			<div class="commodity">
				<a target="_blank" href="./index.html">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M00/5B/7C/rBACW14_iQGAPDHzAAFphbs4KdM017.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="79.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">79</span>
                                    </span>
                                </div>
								<div class="mack">									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">黛珂同原料制造商</div>
							<div class="content">玻尿酸高保湿面膜10片26ml
								<span class="evaluate">20.6w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M00/6C/18/rBACYV1mJZOAYMEjAAI33pKo7RQ134.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="59.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">59</span>
                                    </span>
                                </div>
								<div class="mack">									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">SK2同原料制造商</div>
							<div class="content">【温和】米酵素洁面乳
								<span class="evaluate">16.9w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M00/58/35/rBACYV45v3CAOkVKAABinPV4D_E761.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="89.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">89</span>
                                    </span>
                                </div>
								<div class="mack">									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">DIOR同原料制造商</div>
							<div class="content">玻尿酸淡纹变色（润唇膏）
								<span class="evaluate">18.1w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M01/5B/B6/rBACVF8jcQWAOwUtAAJLkosdGJ8018.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="36.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">36</span>
                                    </span>
                                </div>
								<div class="mack">									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">希尔顿酒店床品制造商</div>
							<div class="content">S.S.铂金缎毛巾2条装
								<span class="evaluate">12.5w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M01/F7/00/rBACVF7Qg7aAf2NJAACymzJqRIg448.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="59.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">59</span>
                                    </span>
                                </div>
								<div class="mack">
									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
								</div>
							</div>
							<div class="supplier">星巴克咖啡中国产地</div>
							<div class="content">手冲定制咖啡6杯9.9元/杯
								<span class="evaluate">14.0w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
		
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M01/2C/ED/rBACW1-_P7eAd7VIAABsvRc_xo4262.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="58.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">58</span>
                                    </span>
                                </div>
								<div class="mack">
									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">CHANEL同原料制造商</div>
							<div class="content">炫色魅力唇膏口红
								<span class="evaluate">12.8w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
		
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M01/E7/56/rBACVGCKgDSADycJAADrJkEfNyc604.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="108.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">108</span>
                                    </span>
                                </div>
								<div class="mack">						
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>						
								</div>
							</div>
							<div class="supplier">AHC同原料制造商	</div>
							<div class="content">24K黄金璀璨精华（100ml）
								<span class="evaluate">14.1w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
		
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M00/5D/8B/rBACVF5E5yyAV7YVAAGOLNdfqoA107.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="58.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">58</span>
                                    </span>
                                </div>
								<div class="mack">					
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">LABSERIES同原料制造商</div>
							<div class="content">火山泥控油清洁洁面膏洗面
								<span class="evaluate">10.4w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
		
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt>
							<img src="http://bfs.biyao.com/group1/M00/6A/76/rBACVF1l-KqAEcGzAAFuWmii1mY835.jpg" />
						</dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="78.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">78</span>
                                    </span>
                                </div>
								<div class="mack">
									
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>
									
								</div>
							</div>
							<div class="supplier">雅诗兰黛同原料制造商</div>
							<div class="content">赋妍明眸眼霜 淡纹紧致
								<span class="evaluate">16.9w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>
		
			<div class="commodity">
				<a target="_blank" href="#">
					<dl>
						<dt><img src="http://bfs.biyao.com/group1/M00/2A/EC/rBACW14GpziAYJfCAAIHdIMcfiQ262.jpg" /></dt>
						<dd>
							<div class="priceBox">
								<div class="price" price="109.00">
                                    <span style="color: #F7A701; font-size: 10px; padding-left: 2px;">
                                        ￥
                                        <span style="font-size:16px;">109</span>
                                    </span>
                                </div>
								<div class="mack">						
										<span style="color: #FFFFFF;background: #AB7FD1; border-color: #AB7FD1;">爆品</span>
									
										<span style="color: #FB4C81;background: #FFFFFF; border-color: #FB4C81;">一起拼</span>									
								</div>
							</div>
							<div class="supplier">LANCOME同原料制造商</div>
							<div class="content">清滢柔肤水大粉水
								<span class="evaluate">6.9w+条好评</span>
							</div>
						</dd>
					</dl>
				</a>
			</div>		
		<span id="moreModule"></span>
	</div>
</div>
<div class="footer">
    <div class="footer-main clearfix">
    	<ul class="footer-detail clearfix">
    		<li>
    			<div class="gzh"></div>
    			<ul class="clearfix">
    				<li>扫码关注必要微信公众号</li>
    				<li>关注必要微信公众号</li>
    				<li>实时了解必要平台政策</li>
    				<li>人才招聘信息</li>
    			</ul>
    		</li>
    		<li>
    			<div class="app"></div>
    			<ul class="clearfix">
    				<li>扫码下载必要APP</li>
    				<li>随时随地掌握上新信息</li>
    				<li>浏览、购买更便捷</li>
    				<li>体验更多黑科技</li>
    				<li>与必要面对面沟通</li>
    			</ul>
    		</li>
    	</ul>
    </div>

底部：

<div class="footer-info">
    	<p>
    		<a href="#" target="_blank">《用户服务协议》</a>
    		<span>|</span>
    		<a href="#" target="_blank">《隐私政策》</a>
    		<span>|</span>
    		<a href="#" target="_blank">知识产权</a>
    		<span>|</span>
    		<a href="#" target="_blank">平台公示</a>
    		<span>|</span>
    		<a href="#" target="_blank" id="biyaoRules">必要规则</a>
    	</p>
    	<p>
            <span id="year">Copyright © 2022, BIYAO.COM</span>
	    	<span>珠海必要科技有限公司</span>
	    	<span>
	    		<a href="http://static3.biyao.com/pc/www/img/footer/ww.png" target="_blank"><img width="14" height="14" src="http://static4.biyao.com/pc/www/img/footer/whjy.png?v=biyao_f5f3976"></a>
	    		粤网文〔2018〕0969-419号
	        </span>
	    	<span>
	    		<img width="14" height="14" src="http://static.biyao.com/pc/www/img/footer/ghs.png?v=biyao_d0289dc">
	    		<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496139" target="_blank">粤公网安备44049102496139号</a>
	        </span>
	        <span>
	        	 <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备13088531号 </a>
	        </span>
    	</p>
    	<p>
    		<span><a href="http://static1.biyao.com/pc/www/img/footer/by_licence.png" target="_blank">营业执照</a></span>
    		<span><a href="/home/businesslicense" target="_blank">增值电信业务经营许可证 粤B2-20170518</a></span>
    		<span><a href="http://static2.biyao.com/pc/www/img/footer/by_drugs.png" target="_blank">互联网药品信息服务资格证书</a></span>
    		<span><a href="http://static3.biyao.com/pc/www/img/footer/ylqx.png" target="_blank">医疗器械网络交易服务第三方平台备案凭证</a></span>
    		<span><a href="http://static4.biyao.com/pc/www/img/footer/by_food.png" target="_blank">食品经营许可证</a></span>	
    	</p>
    	<p>
    		<span><a href="#">（粤）网械平台备字（2018）第00007号</a></span>
    		<span><a href="http://static.biyao.com/pc/www/img/footer/publish.png" target="_blank">出版物发行业务提供服务的网络交易平台备案</a></span>
    		<span><a href="http://static1.biyao.com/pc/www/img/footer/wlfood.png" target="_blank">网络食品交易第三方备案凭证 备案号GDWS10009</a></span>
    	</p>
    	<p><span>公司地址：珠海市唐家湾镇哈工大路1号1栋E301-15</span><span>公司电话：0756-3635580</span></p>
    	<p>必要商城提示您，产品“由某制造商出品”仅为陈述制造商既往生产经历，并不意味着相应产品与特定品牌产品相同或近似。</p>
    </div>
</div>

以上仅仅为必1要商城的主页面展示（不包含js交互），如有问题欢迎指正~