HTML+CSS 基础实战演练

HTML+CSS 基础实战演练

页面展示

html

	
		
		
		
	
	
		

			

				
				

					
导航一
					
导航二
					
导航三
					
导航四
					
导航五
					
导航六
					
导航七
					

						
						搜索
					
				
			


			

				
				

					

						
						核心业务
						MORE
					
					

						电子商户类网站建设
						

							
							

								

									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
								
							
						
					
					

						电子商户类网站建设
						

							
							

								

									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
								
							
						
					
					

						电子商户类网站建设
						

							
							

								

									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
								
							
						
					
					

						电子商户类网站建设
						

							
							

								

									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
									
网站自拟标题
								
							
						
					
				

				

					

						
						文章观点
						MORE
					
					

						

							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
							
这是一篇好文章
						
					

					

						
						联系我们
						MORE
					
					

						

							
电话：XXXXXXXXXXX
							
邮箱：[email protected]
							
地址：浙江省杭州市江干区九堡晨光绿苑南苑XX
								
          幢X单元XXX
						
					
				

			


			

				©:2006-2018 福建福州市国通星驿科技网络有限公司 copyright http://www.xiebin.com
			
		
	

CSS代码

/* 初始化代码 网上拷贝的*/
body {
	font-size: 62.5%;
}

/* for IE/Win */
html>body {
	font-size: 15px;
}

/* for everything else */

/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;margin: 0;
}

table {
	border-collapse: collapse;border-spacing: 0;
}

fieldset,img {
	border: 0;
}

img {
	display: block;
}

address,caption,cite,code,dfn,th,var {
	font-weight: normal;font-style: normal;
}

ol,ul {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;font-size: 100%;
}

q:before,q:after {
	content: '';
}

abbr,acronym {
	border: 0;
}

a {
	text-decoration: none;
}


/*自己写的*/
.container {
	width: 1190px;margin: 0 auto;
}

.header {
	width: 100%;height: 128px;
}


#nav li {
	background-color: lightgray;
	display: inline-block;
	border: 1px solid #000;
	height: 100%;
	width: 8%;
	text-align: center;
	line-height: 50px;
	float: left;
}

a:hover {
	color: white;
}

#nav {
	width: 100%;height: 50px;
}

input,button{
	outline: none;
}

#main {
	margin-top: 30px;
}

.clr {
	clear: both;
}

#footer {
	padding-top: 20px;
	width: 100%;
	text-align: center;
}

.contact {
	height: 35px;
	line-height: 35px;
}

.simulation {
	height: 40px;line-height: 40px
}

.divBgColor {
	background-color: lightgray;
}

.ulBgStyle {
	list-style-type: circle;
}
input,button{
	margin: auto;
	border: 1px solid black;height: 26px;border-radius: 20px;padding: 2px;
}

#lside{
	width: 69%;float: left; border: 1px solid black;margin-top: 10px; height:630px;
}
#rside{
	width: 30%;float: right; font-size: 15px;margin-top: 10px;
}

.mainHeader{
	height: 40px;line-height: 40px;font-size: 15px;
}

.mianMiddleLeft{
	margin-top: 10px;margin-left: 10px;width: 48%;height: 280px;float: left;
}
.mianMiddleRight{
	margin-top: 10px;margin-right: 10px;width: 48%;height: 280px;float: right;
}

.mianTitle{
	font-size:20px;font-weight:bold;height:40px;line-height:40px;
}
.mainImg{
	float:left;margin-left: 10px;margin-top:10px;width:180px;height:200px
}
.more{
	float: right;margin-right: 10px;
}
.imgTitle{
	margin-left: 10px;width: 15px;display: inline
}
.rsideBody{
	background-color: lightgray;margin-top: 2px;width: 100%;
}

网页中的照片

觉得可以，请点个赞