8.12-8.13网站构建实战日记

了解了58同城的大体构建,建议多用div分块较为方便,从这次历时两天的实战中,我深深的体会到了前端在构建网站时,必须要从大体着手细节,而不是走一步再想下一步,在入手构建之前,我先用画图软件构建出了大体的分块布局,相对位置,从大的分块中再一一实现小的细节分块,这考验了一个网站开发者的清晰思路还有构建能力。

现在只是利用在HTML与CSS的基础知识上进行构建,还没有加入JavaScript的动态效果,我相信再往后的学习JS中,也能够对网站的建立更加熟悉熟练。

我写的大体的类似58的界面,在链接的Style中我觉得我运用的有点麻烦,不简洁,在之后的改进中会做改进,变得简洁而不繁琐重复。

 

以下是我这不到两天时间的成果截图及其源代码:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My 58同城</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	
	<body>
			<div id="daohang1">
				<ul class="one">
					<li>济南</li>      
					<li><a href="#">[切换城市]</a></li>   
					<li>晴    35 ~ 26℃      良</li>
				</ul>
				<ul class="two">
					<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>
					<li><a href="#">最近浏览</a></li>
					<li><a href="#">网站导航</a></li>
				</ul>		             
			</div>
			<div id="daoyin">
				
					<div class="A">
					<img src="img/1.png"/>
					</div>
					<div class="B">
						<form>
							<input type="text" name="搜索" value="搜索关键词" style="border:2px solid rgb(255,85,46);width:550px; height:40px"/>
							<input type="button" name="搜索" value="搜索" style="background-color: rgb(255,85,46);width:80px; height:50px"/>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" name="免费发布信息" value="免费发布信息" style="background-color: rgb(255,85,46);width:150px; height:50px">
						</form>
					
				</div>    
				<div id="mulu">
					<nav>
					<ul class="three">
						<li><a href="#">首页</a></li>
						<li><a href="#">58APP</a></li>
						<li><a href="#">商家APP</a></li>
						<li><a href="#">58公众号</a></li>
						<li><a href="#">小程序</a></li>
						<li><a href="#">金融</a></li>
						<li><a href="#">安居客</a></li>
						<li><a href="#">中华英才</a></li>
						<li><a href="#">58车</a></li>
						<li><a href="#">58同镇</a></li>
						<li><a href="#">我要推广</a></li>
					</ul>
					</nav>
				</div>
			</div>
			<div id="num1">
			    <div id="aa">
			    <ul>
			    	<li><img src="img/2.png" alt="此图片打开错误" /><br><a href="#">招聘</a><br><a href="#"><span>全职 / 兼职 / 简历</span></a></li>
			    	<li><img src="img/3.png" alt="此图片打开错误" /><br><a href="#">房产</a><br><a href="#"><span>租房 / 二手房</span></a></li>
			    	<li><img src="img/4.png" alt="此图片打开错误" /><br><a href="#">二手车</a><br><a href="#"><span>3万内 / SUV / 货车</span></a></li>
			    	<li><img src="img/5.png" alt="此图片打开错误" /><br><a href="#">二手市场</a><br><a href="#"><span>手机 / 设备 / 回收</span></a></li>
			    	<li><img src="img/6.png" alt="此图片打开错误" /><br><a href="#">宠物</a><br><a href="#"><span>狗 / 猫 / 鱼 / 用品</span></a></li>
			    	<li><img src="img/7.png" alt="此图片打开错误" /><br><a href="#">本地商务</a><br><a href="#"><span>工商 / 租赁 / 加盟</span></a></li>
			    	<li><img src="img/8.png" alt="此图片打开错误" /><br><a href="#">本地服务</a><br><a href="#"><span>搬家 / 教育 / 修家电</span></a></li>
			    </ul>
			    </div>
			    <div id="bb">
			    	<ul>
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">济南本地服务</a></li><br>
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">快速办证</a></li>
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">生活家</a></li>
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">留学排行</a></li>
			    		<br>
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">家政服务</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">搬家指南</a></li>
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">大扫除</a></li>
			    		<hr />
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">搬家</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">居民/公司/小型</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">长途/设备</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">保姆</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">月嫂/育儿嫂/钟点工</a></li><br />
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家务</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">保洁/配送/回收/开锁/鲜花</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">维修</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家电/房屋/家具/电脑/数码</a></li>
			    	</ul>
			    	<ul>
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">装修建材</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">除甲醛</a></li>
			    		<hr />
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家装装修/设计/效果图</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">建材</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">家具/家纺</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">厂房/餐厅/酒店/自建房</a></li>			    		
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">商务服务</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
			    		<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">注册公司</a></li>
			    		<hr />
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">财务</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">会计</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">法律</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">商标专利</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">广告传媒</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">设计策划</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">印刷包装</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">喷绘/制卡</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">投资担保</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">物流专线</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">快递</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">租赁</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">网站建设</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">网站维护</a></li>
			    		
			    	</ul>
			    	<ul>
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">餐饮美食</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">美食</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">外卖</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">快餐/团膳</a></li>
			    		<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">休闲娱乐  </a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">健身</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">酒吧</a></li>
			    		<li><a href="#"><span style="font-size: 16px;color:rgb(68,173,233);margin: 0px;padding: 0;">KTV</a></li>
			    	</ul>
			    </div>
			</div>
			<div id="num2">
			    <div id="cc">
			    	<ul>
			    	<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:rgb(68,173,233);margin: 0px;padding: 0;">跳蚤市场</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: rgb(68,173,233);margin: 0px;padding: 0;">官方质检iPhone</a></li>
			    	<hr />
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">宠物狗/泰迪/宠物猫</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">摩托车/自行车/电动车</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手手机/苹果</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">台式机/配件</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手笔记本</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">平板电脑/iPad</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">数码产品/相机</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">二手家电/空调/冰箱</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">服装/鞋帽/箱包</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">母婴/儿童用品/玩具</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">艺术品/收藏品</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">图书/音像/软件</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">文体/户外/乐器</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color:red;margin: 0px;padding: 0;">二手设备</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">礼品转让/二手求购</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">其他跳蚤/更多</a></li><br>
			    	</ul>
			    </div>
			    <div id="dd">
			    	<ul>
			    	<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">二手车</a></li>&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">平行进口车</a></li>
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">0首付购车</a></li>
			    	<hr />
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">0-3万 3-5万</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">5-8万 8-10万</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">10-15万</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">15-20万</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">>20万</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">轿车/跑车SUV/MPV面包车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">个人好车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">练手车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">底价新车</a></li><br>
                    <hr />
			    	<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">全部品牌</a></li>&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">急售</a></li><br> 
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">大众</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">别克</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">福特</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">标致</a></li>

			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">丰田</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">本田</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">现代</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">日产</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">五菱</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">吉利</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">奇瑞</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">雪佛兰</a></li>			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">马自达</a></li>			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">比亚迪</a></li>
			    	<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">新车</a></li>&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">选车</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">降价</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">底价新车</a></li>
			    	<hr />
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">A6L/CDX</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">哈弗H6/730</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">卡罗拉/福克斯指南者/GL6 </a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">租车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">货车/大巴/中巴/面包</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">买车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">4S店/过户/美容装饰</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">拼车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">长途专车/上下班/包车</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">学车</a></li>			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">驾校/教练/陪练/代驾</a></li>			    	
			    	</ul>
			    </div>
			    <div id="ee">
			    	<ul>
			    	<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:#FF0000;margin: 0px;padding: 0;">济南招聘</a></li>&nbsp;
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">济南求职简历</a></li>
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">急速招聘</a></li>
			    	<li><a href="#"><span style="font-size: 12px;color: red;margin: 0px;padding: 0;">热门兼职</a></li>
			    	<hr id="ihr"/>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">包吃包住</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">夏季招聘会</a></li>&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">周末双休</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">职位晋升</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">五险一金</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">应届生专区</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">热门兼职</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">求职安全</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">高薪职位</a></li>&nbsp;		    	
			    	<br> 
			    	<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">求职神器</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">求职服务 </a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">应聘快车道</a></li>&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">职业测评</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">更多服务</a></li>
			    	<br>
			    	<li><a href="#"><span style="font-size: 12px;color: rgb(170,170,170);margin: 0px;padding: 0;">热门职业</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">销售</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">销售代表/电话销售/网络销售</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">普工/技工</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">普工/操作工/电工/切割/焊工</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">餐饮</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">服务员/餐饮管理/厨师</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">超市/零售</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">营业员/促销/导购/收银员/店长</a></li>			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">人事/行政</a></li>			    	
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">文员/前台/人事专员/行政专员</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: red;margin: 0px;padding: 0;">司机/交通</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">商务司机/货运司机</a></li><br>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">仓储/物流</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">快递员/仓库管理员/装卸/搬运</a></li>
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">客服</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			    	<li><a href="#"><span style="font-size: 16px;color: rgb(68,173,233);margin: 0px;padding: 0;">客服专员/电话客服/售前/售后</a></li>
			    	</ul>
			    </div>
			    <div id="ff">
			    	<ul>
			    	<li><a href="#"><span style="font-size: 20px;font-family:'微软雅黑';color:red;margin: 0px;padding: 0;">便民服务</a></li><br> 
			    	<hr id="ahr"/>
			    	    <ul id="three">
			    	    <li><a href="#">职场取经</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">实用工具</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">车辆出行</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">生活经验</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">结婚生子</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">旧物回收</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">健康生活</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<li><a href="#">采购批发</a></li>
				        </ul>
			    	</ul>
			    </div>
			    <div id="gg">
			    	<a href="#"><img src="img/13.jpg" alt="此图片打开错误" style="width: 1205px;" /></a>
			    </div>
			    <div id="hh">
			    	<a href="#"><img src="img/14.png" alt="此图片打开错误" style="margin-left: 65px;margin-top: 65px;" /></a>
			        <div id="left">
			        	<ul>
			        		<li><a href="#"><span style="font-size: 25px;color: black;">帮助中心</a></li><br><br>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">常见问题</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">更多帮助</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">意见反馈</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">隐私权条款</a></li>
			        	</ul>
			        </div>
			        <div id="center">
			        	<ul>
			        		<li><a href="#"><span style="font-size: 25px;color: black;">服务支持</a></li><br><br>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">推广服务</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">渠道招商</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">先行赔付</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">举报平台</a></li>
			        	</ul>
			        </div>
			        <div id="right">
			        	<ul>
			        		<li><a href="#"><span style="font-size: 25px;color: black;">会员服务</a></li><br><br>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">会员介绍</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">推广热线</a></li>
			        		<li><a href="#"><span style="font-size: 16px;color: rgb(170,170,170);">开通招聘会员</a></li>
			        	</ul>
			        </div>
			    </div>
			</div>
			<div id="footer">
				<hr id="ifooter"/>
				<ul>
					<li><span style="font-size: 14px;color: rgb(170,170,170);">友情链接:<li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">济南房地产网|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">青岛装饰网|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">济南旅游|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">笔记本维修|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">深圳旅游攻略|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">遵义人才网|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">上海公交|</a></li>
					<li><a href="#"><span style="font-size: 14px;color: rgb(170,170,170);">更多...</a></li>
				</ul>
				<footer>京公网备案信息11010502000809|京ICP证060405|京ICP备10012705号-2|津网文【2016】0811-010号|乙测资字11018014|联系我们|反欺诈联盟<br> </footer>
				<footer id="ifo">违法信息举报:4008135858 jubao@58ganji.com|员工舞弊举报:wb@58.com </footer>
			</div>
			
	</body>
</html>
body{background-color: rgb(248,248,248);}
#daohang1
{
	margin: 0;padding: 0;
}

#daohang1
{
	border-bottom:1px solid rgb(221,221,221);height: 30px;background-color: white;  
}
a
{
	text-decoration: none;color:black;
}
a:hover
{
	color:red;
}
.one li
{
	display:inline-block;font-size: 16px;color: black;margin-top: 10px;
    margin-left: 30px;
}

.two{float: right;margin-top: -40px;}
.two li
{
	display:inline-block;font-size: 16px;color: black;
	margin-right: 30px;
}

 .A
{
	background-color: white;width: 200px;height: 22px;
	margin-left: 65px; 
}

 .B
{
	margin-left: 420px;margin-top: -22px;
	background-color: white;width: 850px;height: 77px;
}

#mulu
{
	background-color: white;width: 1205px;height: 20px;
	margin-left:65px;margin-top: 0px;
}
nav ul
{
	margin: 0;padding: 0;
}
nav ul li 
{
	display: inline-block;list-style: none;
}
nav ul li a
{
	color: black;text-decoration: none;padding: 30px;
}

 #aa
{
	background-color: white;width: 900px;height: 130px;
    margin-left:65px;margin-top: 8px;
    position: relative;
}
ul li
{
	display: inline-block;list-style: none;font-size: 14.5px;text-align:center;line-height: 25px;
}
ul li a
{
	color: black;text-decoration: none;padding: 3px;
}
span
{
	color: rgb(68,173,233);
}
span:hover
{
	color: red;text-decoration: underline;
}
#bb
{
	background-color: white;width: 290px;height: 620px;
    
    position: absolute;right: 70px;top: 160px;
}
#bb ul li
{
	display: inline-block;list-style: none;font-size: 14.5px;text-align:left;line-height:28px;	
}
hr
{color:gainsboro;width: 215px;text-align: center;}
#cc
{
	background-color: white;width: 270px;height: 473px;
	margin-left:65px;margin-top: 15px;
}
 ul li
{
	display: inline-block;list-style: none;font-size: 14.5px;text-align:center;line-height: 25px;
}
 ul li a
{
	color: black;text-decoration: none;padding: 3px;
}
#dd
{
	background-color: white;width: 260px;height: 473px;
	margin-left:350px;margin-top: -489px;
}
#ee
{
	background-color: white;width: 340px;height: 473px;
	margin-left:625px;margin-top: -489px;
}
#ihr
{
	color:gainsboro;width: 286px;text-align: center;
}
#ff
{
	background-color: white;width: 1205px;height: 120px;
	margin-left:65px;margin-top: 0px;
}
#ahr
{
	color:gainsboro;width: 1120px;text-align: center;
}
#three
{
	color: blue;text-decoration: none;padding: 25px;margin:auto;
}
#three li a:hover
{
	background-color: red;color:white;
}
#gg
{
	background-color: dodgerblue;width: 1205px;height: 30px;
	margin-left:65px;margin-top: 15px;
}
#hh
{
	background-color: white;height: 230px;
	margin-left:0px;margin-right:0px;margin-top: 35px;
}
#left ul li
{
	display: block;
}
#left
{
	margin-left:-250px;margin-top: -130px;
}
#center ul li
{
	display: block;
}
#center
{
	margin-left:250px;margin-top: -180px;
}
#right ul li
{
	display: block;
}
#right
{
	margin-left:750px;margin-top: -180px;
}
#footer
{
	background-color:white ;height: 130px;margin-top:-10px;
}
#ifooter
{
	width: auto;
}
footer
{
	text-align: center;
}
#ifo
{
	text-align: center;
}

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
东南亚位于我国倡导推进的“一带一路”海陆交汇地带,作为当今全球发展最为迅速的地区之一,近年来区域内生产总值实现了显著且稳定的增长。根据东盟主要经济体公布的最新数据,印度尼西亚2023年国内生产总值(GDP)增长5.05%;越南2023年经济增长5.05%;马来西亚2023年经济增速为3.7%;泰国2023年经济增长1.9%;新加坡2023年经济增长1.1%;柬埔寨2023年经济增速预计为5.6%。 东盟国家在“一带一路”沿线国家中的总体GDP经济规模、贸易总额与国外直接投资均为最大,因此有着举足轻重的地位和作用。当前,东盟与中国已互相成为双方最大的交易伙伴。中国-东盟贸易总额已从2013年的443亿元增长至 2023年合计超逾6.4万亿元,占中国外贸总值的15.4%。在过去20余年中,东盟国家不断在全球多变的格局里面临挑战并寻求机遇。2023东盟国家主要经济体受到国内消费、国外投资、货币政策、旅游业复苏、和大宗商品出口价企稳等方面的提振,经济显现出稳步增长态势和强韧性的潜能。 本调研报告旨在深度挖掘东南亚市场的增长潜力与发展机会,分析东南亚市场竞争态势、销售模式、客户偏好、整体市场营商环境,为国内企业出海开展业务提供客观参考意见。 本文核心内容: 市场空间:全球行业市场空间、东南亚市场发展空间。 竞争态势:全球份额,东南亚市场企业份额。 销售模式:东南亚市场销售模式、本地代理商 客户情况:东南亚本地客户及偏好分析 营商环境:东南亚营商环境分析 本文纳入的企业包括国外及印尼本土企业,以及相关上下游企业等,部分名单 QYResearch是全球知名的大型咨询公司,行业涵盖各高科技行业产业链细分市场,横跨如半导体产业链(半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件)、光伏产业链(设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端)、新能源汽车产业链(动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩)、通信产业链(通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI)、先进材料产业链(金属材料、高分子材料、陶瓷材料、纳米材料等)、机械制造产业链(数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机)、食品药品、医疗器械、农业等。邮箱:market@qyresearch.com

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值