Web前端基础(9)一个静态页面Demo

今天我们来练习做一个纯 html 和 css 的静态页面。demo 显示地址 http://dp2px.com/demo/boyahudong

头部导航条

<div class="header">
	<div class="inner_c">
		<h1><img src="images/logo.png" /></h1>
		<div class="nav">
			<ul>
				<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 class="last"><a href="#">网页栏目</a></li>
			</ul>
		</div>
		<a href="#" class="jrwm">加入我们</a>
	</div>
</div>

在布局中我们将头部单独定义一个 div ,因为浏览器宽度不确定, 然后将我们要做的头部都放到 inner_c 中。然后划分为 3 个部分。首先定义出 inner_c 区域的宽高。

.header .inner_c{
	width: 1000px;
	height: 58px;
	margin: 0 auto;
}
  1. logo 显示区域,定义区域宽高,然后浮动。

    .header .inner_c h1{
    	padding-left: 15px;
    	width: 170px;
    	height: 58px;
    	float: left;
    	padding-right: 40px;
    }
    
  2. 菜单显示区域,同样定义区域宽高,浮动。

    .header .inner_c .nav{
    	width: 607px;
    	height: 58px;
    	float: left;
    }
    
  3. 加入我们超链接。

头部的全部 css 样式:

*{
	margin: 0;
	padding: 0;
}
body{
	/*默认字体,这个属性能够继承,所以写给body*/
	font-family: "Microsoft YaHei","SimSun";
}
.header{
	/*这里没有width,因为这个盒子要通栏*/
	/*在标准流里面,div是一个块级元素,没有width相当于撑满父亲 */
	height: 58px;
	background-color: #191D3A;
}
.header .inner_c{
	width: 1000px;
	height: 58px;
	margin: 0 auto;
}
.header .inner_c h1{
	padding-left: 15px;
	width: 170px;
	height: 58px;
	float: left;
	padding-right: 40px;
}
.header .inner_c .nav{
	width: 607px;
	height: 58px;
	float: left;
}
.header .inner_c .nav ul{
	/*去掉小圆点*/
	list-style: none;
}
.header .inner_c .nav ul li{
	float: left;
	width: 100px;
	height: 58px;
	border-left: 1px solid #252947;
	text-align: center;
	line-height: 58px;
}
.header .inner_c .nav ul li.last{
	border-right:1px solid #252947;
}
.header .inner_c .nav ul li a{
	display: block;
	width: 100px;
	height: 58px;
	text-decoration: none;
	color:white;
	font-size: 14px;
}
.header .inner_c .nav ul li a:hover{
	background-color: #252947;
}
.header .inner_c .jrwm{
	float: left;
	width: 100px;
	height: 34px;
	background-color: #38B774;
	margin-left: 48px;
	position: relative;
	top: 12px;
	left: 0;
	text-align: center;
	line-height: 34px;
	color:white;
	text-decoration: none;
	font-size: 12px;
	/*圆角边框:*/
	border-radius: 4px;
}
.header .inner_c a.jrwm:hover{
	background-color: orange;
}
<div class="banner">
<div class="content">
	<div class="inner_c">
		<div class="product">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</div>

我们采用色块来快速的对广告位和 banner 进行定位布局。然后做出色块的位置和样式调整,最后再具体到细节中。

css样式

.content{
	/*这个content没有宽度,是因为要撑满父亲*/
	height: 700px;
	background:url(images/indexmainbg.jpg) no-repeat center bottom;
}
.content .inner_c{
	width: 1000px;
	height: 700px;
	margin: 0 auto;
	padding-top: 50px;
}
.content .inner_c .product{
	height: 229px;
	border-bottom: 1px solid gray;
	position: relative;
}
.content .inner_c .product ul{
	list-style: none;
}
.content .inner_c .product ul li{
	float: left;
	width: 218px;
	height: 229px;
	margin-right: 43px;
}
<div class="footer">
	<div class="inner_c">
		<div class="left_part">
			<a href="#">网站地图</a>
			<span>|</span>
			<a href="#">免责声明</a>
		</div>
		<div class="right_part">
			所有伟大都源于一个勇敢的开始,欢迎访问“地痞兔劈叉(dp2px.com)”
			<img src="images/govIcon.gif" class="jinghui"/>
		</div>
	</div>
</div>
所有伟大都源于一个勇敢的开始,欢迎访问地痞兔劈叉

css 样式:

.footer{
	height: 91px;
	background-color: #191D3A;
}
.footer .inner_c{
	width: 1000px;
	margin: 0 auto;
}
.footer .inner_c .left_part{
	float: left;
	width: 300px;
	height: 91px;
	line-height: 91px;
}
.footer .inner_c .left_part a{
	text-decoration: none;
	color:gray;
	font-size: 12px;
	line-height: 91px;
}
.footer .inner_c .right_part{
	float: left;
	width: 700px;
	height: 91px;
	text-align: right;
	color:gray;
	font-size: 12px;
}
.footer .inner_c .right_part .jinghui{
	width: 40px;
	position: relative;
	top: 20px;
}

demo 演示地址:http://dp2px.com/demo/boyahudong/