html网页之静态主页

制作网页之前一定要了解网页的基本结构：

    <!-- 结构 -->
    <!-- 页面部分 -->
    <!-- nav导航部分 -->
        <!-- logo部分 -->
        <!-- 导航栏部分 -->
        <!-- 个人中心部分 -->
        <!-- 搜索栏部分 -->zhizuo
    <!-- banner部分 -->
        <!-- 左侧导航栏 侧边栏 -->
        <!-- 小课表部分 -->
            <!-- 精装推荐 -->
    <!-- 精装推荐大模块 -->
        <!-- 主题 -->
        <!-- 精装内容展示 -->
    <!-- 尾页模块 -->
        <!-- 左边图文已经公司logo -->
        <!-- 右边就是链接 具体特色的功能列表 -->

 制作网页

ndex.html 这是访问入口，也成为主页

style.css 网站样式装饰元素的文件

 这里用到

标签选择器   div{}

类选择器    .box{}

伪类选择器 .box:first-child{}

伪元素选择器 .clearfix:after{}

后代选择器  div li{}

并集选择器 div,span,h4{}

 制作style.css文件，依照开发经验可以将css分为

公共模块化  比如统配样式 *{}

主模块化      div{}

具体模块化     div li a{}

例如这是本次需要编写的.css文件内容如下：

/*清除默然边距*/
		*{ 
			padding: 0;
			margin: 0;
		}
		/*双伪元素清除浮动*/
		.clearfix:after,.clearfix:before{
			content: "";
			display: table;
		}
		.clearfix:after{
			clear: both; /*清除浮动*/
		}
		.clearfix{ /*ie6 ie7*/
			*zoom: 1;
		}

		/*公共部分*/
		.contener{/*盒子水平居中*/
			width: 1200px;
			margin: 0 auto;
		}

		/*页面头部*/
		body{
			background-color: #f3f5f7; /*整个页面颜色*/
		}

		/*nav导航部分*/
		nav{
			width: 1366px;
			height: 42px;
			margin: 26px auto; /*导航栏水平居中*/
			/*background-color: #ccc;*/
		}
		/*logo图标*/
		.logo{
			float: left;
		}
		header{
			height: 100px;
			overflow: hidden;
		}
		/*导航栏部分*/
		.navbar{
			float: left;
			height: 42px; /*这个高给父亲，子类行高会继承*/
			line-height: 42px; /*字体垂直居中*/
			margin-left: 50px;
		}
		.navbar li{
			float: left; /*让首页  课程这一行显示*/
		}
		.navbar li a{ /*这是a标签的宽高*/
			padding: 0 10px; /*上下0 左右8像素*/
			display: block; /* a标签内元素为块级元素*/
			height: 42px;
		}
		.navbar li a:hover{
			border-bottom: 2px solid #00a4ff; /*鼠标放入底边框*/
		}
		ul{
			list-style: none;
		}
		a{
			color: #050505;
			text-decoration: none; /*取消下划线*/
		}
		/*搜索框部分开始*/
			.search {
				width: 410px;  /* 360 + 50 */
				height: 38px;
				border: 1px solid #00a4ff;
				float: right;
			}
			.search input[type=text] {  /* 属性选择器  type 为 text 的文本框 */
				/* background-color: pink; */
				width: 360px;
				height: 38px;
				float: left;
				padding-left: 20px;
			}
			.search input[type=submit]{/* 属性选择器  type 为 submit 的文本框 */
				width: 50px;
				height: 38px;
				float: left;
				/*background-color: #00a4ff ;*/
				background: #00a4ff url(../images/search_06.png) center center no-repeat;
			}
			input{
				border: 0;/*所有表格的边框宽度为0*/
				box-sizing: border-box; /*css3盒子模型，border和padding都包含在width内部*/
			}
		/*搜索框部分结束*/

		/*个人中心开始*/
		.personal{
			float: right;
			height: 42px;
			line-height: 42px;
			margin: 0 15px 0 35px; /*上0 右15px 下0 左35px*/
		}
		.personal img{
			margin: 0 8px;
		}
		/*个人中心结束*/
		/*banner开始*/
		.banner{
			height: 420px;
			background-color: #1c036c;
		}
		.banner-in{ /*banner背景图片*/
			height: 420px;
			background: url(../images/banner_03.png) 0 0 no-repeat;
			position: relative; /*子绝父相*/
		}
		.slidebar{ /*左侧盒子半透明*/
			height: 420px;
			width: 190px;
			background: rgba(0, 0, 0, .3); /*盒子背景半透明*/
			float: left;
		}
		.slidebar li a{
			color: #ff