HTML+CSS案例

这个文章主要是将前面学习的CSS和HTML进行一个串联。

最终样式：


图片和各种间距的测量采用photoshop。

1、分析

1.1 整体结构

通过观察上图可以发现整体结构可以分为四个部分：

头部+中间轮播图+精品推荐+底部

1.2 部分结构

对于头部：用一个大盒子，里面包裹4个小盒子，分别实现 logo 、导航栏、个人中心、搜索框。
对于中间轮播图：要实现左侧导航栏、小圆点模拟轮播图、小课表部分。
对于精品推荐：要完成精品推荐导航栏、精品推荐大模块（包含头、身体）。
对于底部样式：需要一个logo、还有一个列表。

2、代码部分

2.1 初始化_CSS

		/*初始化部分*/
		/*清除内外边距*/
		* {
   
			margin: 0;
			padding: 0;
		}
		/*去掉列表样式小点*/
		ul {
   
			list-style: none;
		}
		/*清除浮动*/
		.clearfix:before, .clearfix:after {
   
			display: table;
			content: "";
		}
		.clearfix:after {
   
			clear: both;
		}
		.clearfix {
   
			*zoom: 1;
		}

		a {
   
			color: #050505;
			text-decoration: none;
		}
		.container {
   
			/*盒子水平居中*/
			/*因为我们的版心宽度都是1200 都要居中对其，我们就声明一个公共类*/
			width: 1200px;
			margin:0 auto;

		}
		/*整个页面背景色*/
		body {
   
			background-color: #f3f5f7;
		}

2.2 头部

2.2.1 头部_HTML

	<!-- 页面头部分 -->
	<header>
		<nav>
			<!-- logo部分 -->
			<div class="logo">
				<img src="images/logo.png">
			</div>
			<!-- 导航栏部分，一般都用li来做 -->
			<div class="navbar">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
			</div>
			<!-- 个人中心 -->
			<div class="user">
				<img src="images/登录状态.png" alt="">
			</div>
			<!-- 搜索框部分 -->
			<div class="search">
				<!-- 应该在一个表单里 -->
				<form action="">
					<input type="text" placeholder="请输入关键词">
					<input type="submit" value="">
				</form>
			</div>
			
		</nav>
	</header>

2.2.2 头部_CSS

		/*头部部分*/
		header {
   
			height: 100px;
			overflow: hidden;
		}
		nav {
   
			width: 1366px;
			height: 42px;
			/*盒子水平居中对齐*/
			margin: 26px auto;
		}
		header nav .logo {
   
			float: left;
		}
		header nav .navbar {
   
			float: left;
			height: 42px;
			/*这个行高给父亲，因为可以继承*/
			line-height: 42px;
			margin-left: 50px; 

		}
		.navbar li {
   
			/*让首页课程一行显示*/
			float: left;
		}
		.navbar li a {
   
			/*给padding值让它撑开块，上下0左右8*/
			padding: 0 12px;
			/*a是行内元素给高需要转换为块级*/
			display: block;
			height: 42px;
		}
		.navbar li a:hover {
   
			/*鼠标放入有底边框*/
			border-bottom: 2px solid #00a4ff;
		}
		/*搜索框部分*/
		.search {
   
			width: 420  px;
			height: 38px;	
			float: right;
			
		}
		/*属性选择器，type为text的文本框*/
		.search input[type=text] {
   
			width: 340px;
			height: 38px;
			float: left;
			padding-left: 20px;
			border: 1px solid #00a4ff;
		}
		.search input[type=submit] {
   
			width: 50px;
			height: 40px;
			float: left;
			background: url(images/fa-search.png) no-repeat center center #00a4ff;
			border: 1px solid #00a4ff;
		}
		.user {
   
			float: right;
			height: 42px;
			line-height: 42px;
			margin: 0 15px 0 35px;
		}
		.user img{
   
			margin: 0 8px;
		}

2.3、中间轮播图

2.3.1 中间轮播图_HTML

	<!-- banner部分 -->
	<div class="banner">
		<div class="banner-in container">
			<!-- 左侧导航栏 -->
			<div class="sildebar">
				<ul> >
					<li><a href="#">前端开发 <span>></span></a