网站网页通用底部

朴灿烈づ我的快乐病毒、 2021-12-03 12:07 309阅读 0赞

### 效果： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]

### 代码： ###

<!DOCTYPE html>
    <html>
    
    <head>
    <meta charset="UTF-8">
    <title>标题名</title>
    <style>
    
    
    	*{margin:0px;padding:0px;box-sizing:border-box}
    	body{margin:0 auto;font-size:12px;font-family:"微软雅黑";line-height:normal;min-width:1200px}
    	ul{list-style:none}
    	a{text-decoration:none}
    
    	.footer{width:100%;background-color:#323A45;padding-top:70px;height:auto;overflow:hidden}
    	.other-link{width:1200px;margin:0 auto;height:auto;overflow:hidden}
    	.other-link>div{float:left}
    	.other-link .sucai-contact{float:right}
    	.link-look{width:960px;padding-bottom:45px}
    	.link-list{float:left;width:20%}
    	.link-list h3{height:45px;line-height:20px;font-size:20px;color:#ffffff}
    	.link-list ul li a{line-height:33px;color:#ABACAF;font-size:15px}
    	.link-list ul li a:hover{color:#FF6666}
    	.sucai-contact{width:240px}
    	.bottom-logo{width:132px;height:38px}
    	.bottom-logo a{display:block;width:100%;height:100%;}
    	.sucai-companyname{height:40px;line-height:18px;font-size:18px;color:#ffffff;margin-top:25px}
    	.sucai-phone,.sucai-qq{height:34px;line-height:15px;font-size:15px;color:#ABACAF}
    	.erweima-box{margin-top:34px}
    	.erweima-box>div{float:left;width:100px}
    	.erweima-box>div:first-child{margin-right:30px}
    	.wechat-erwei div:first-child,.phonenet-erwei div:first-child{height:30px;line-height:14px;font-size:14px;color:#ABACAF}
    	.footer-bottom{height:100px;text-align:center;padding-top:27px;border-top:1px solid #42444B}
    	.footer-bottom p{line-height:26px;font-size:14px;color:#6C6E73}
    	.footer-bottom p span{margin-left:17px}
    	.footer-bottom p span.police-icon{display:inline-block;width:25px;height:20px;vertical-align:top}
    	.sucai_wechat,.sucai_web{width:100%;height:100px}
    	.sucai_wechat{background:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=620579142,3051099267&fm=26&gp=0.jpg") no-repeat -250px -206px}
    	.sucai_web{background:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=620579142,3051099267&fm=26&gp=0.jpg") no-repeat -360px -206px}
    </style>
    </head>
    
    <body>
    
    
    
    <div class="footer">
    	<div class="other-link clearfix">
    		<div class="link-look clearfix">
    			<div class="link-list">
    				<h3 class="link-title">标题一</h3>
    				<ul>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    					<li>
    						<a href="#">111</a>
    					</li>
    				</ul>
    			</div>
    			<div class="link-list">
    				<h3 class="link-title">标题二</h3>
    				<ul>
    					<li>
    						<a href="#">222</a>
    					</li>
    					<li>
    						<a href="#">222</a>
    					</li>
    					<li>
    						<a href="#">222</a>
    					</li>
    					<li>
    						<a href="#">222</a>
    					</li>
    				</ul>
    			</div>
    			<div class="link-list">
    				<h3 class="link-title">标题三</h3>
    				<ul>
    					<li>
    						<a href="#" target="_blank" class="c_login">333</a>
    					</li>
    				</ul>
    			</div>
    			<div class="link-list">
    				<h3 class="link-title">标题四</h3>
    				<ul>
    					<li>
    						<a href="#">444</a>
    					</li>
    					<li>
    						<a href="#">444</a>
    					</li>
    				</ul>
    			</div>
    			<div class="link-list">
    				<h3 class="link-title">标题五</h3>
    				<ul>
    					<li>
    						<a href="#">555</a>
    					</li>
    					<li>
    						<a href="#">555</a>
    					</li>
    					<li>
    						<a href="#">555</a>
    					</li>
    				</ul>
    			</div>
    		</div>
    		<div class="sucai-contact">
    			<div class="bottom-logo">
    				<a href="#"></a>
    			</div>
    			<div class="sucai-companyname">公司名</div>
    			<div class="sucai-phone">7*24小时在线电话：xxx-xxx-xxxx</div>
    			<div class="sucai-qq">7*24小时在线 QQ：xxxxxxxx</div>
    			<div class="erweima-box clearfix">
    				<div class="wechat-erwei">
    					<div>微信二维码</div>
    					<div class="sucai_wechat"></div>
    				</div>
    				<div class="phonenet-erwei">
    					<div>手机网站二维码</div>
    					<div class="sucai_web"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div class="footer-bottom">
    		<p>Copyright © sucai Cloud Ltd. All Rights Reserved. 2018 版权所有</p>
    		<p><span>xxxxxxxxxxx</span><span>号
    </span><span><span class="police-icon"></span>粤公网安备 xxxxxxxxxxxx号</span>
    		<span>xxxxxxxxxxxxxxx：B1-0000000</span></p>
    	</div>
    </div>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]: /images/20211203/663a95d636a24bc0ba027adafc78c39c.png