8.12-8.13网站构建实战日记

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

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

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

 

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

8.12-8.13网站构建实战日记_第1张图片

8.12-8.13网站构建实战日记_第2张图片

8.12-8.13网站构建实战日记_第3张图片 



	
		
		My 58同城
		
	
	
	
			
			
			
			
此图片打开错误
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;
}

 

你可能感兴趣的:(前)