网页部分案例

css

/*样式*/
		/*css初始化*/
        /*body {
            height: 3000px;
        }*/
		* {
			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;    /*取消下划线*/	
		}
		input {
			border: 0; /*所有的表单边框为0*/
			box-sizing: border-box; /*css盒子模型 border 和 padding 都包含到 width 里面去*/  /*对我来说重点记！！！*/
		}
		.container {  /*因为我们的 版心 宽度都是1200 都要居中对齐 我们就声明一个公共类   以后在需要版心与居中对齐将其掉过来即可！！！*/
			width: 1200px;
			margin: 0 auto;  /* 让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。*/

		}
		/*css初始化结束*/
		body {
			background-color: #f3f5f7;   /*整个页面的背景色*/
		} 
        header {
        	height: 100px;
        	/*background-color: skyblue;*/
        	overflow: hidden;   /*解决内外边距和并（塌陷）问题*/
        	/*border-bottom: 5px solid purple;*/        } 
        nav {
        	width: 1366px;   /*宽度暂且定为1366*/
        	height: 42px;
        	/*background-color: purple;*/
        	margin: 26px auto;  /* 盒子水平居中对齐 */

        }
        .logo {
        	float: left;
        }
        .navbar {
        	float: left;
        	height: 42px;
        	line-height: 42px;   /*这个行高给父亲，行高会继承*/
        	margin-left: 50px;
        }
        .navbar ul li {
        	float: left;   /*让首页 课程这个一行显示*/
        	/*line-height: 42px;   父亲给过了所以儿子这个不用写了*/
        }
        .navbar li a {   /*行内元素尽量不要给上下的padding值，给左右即可*/
        	padding:  0 10px;  /*上下为0，左右为8*/
        	
        	display: block;   /*a是行内元素，给高需要转换块级*/
        	height: 42px;      /*高度有了之后会垂直继承*/
        }
        .navbar li a:hover {
        	border-bottom: 2px solid #00a4ff;  /*鼠标放入有底边框*/ 		
        }   
        /*搜索框部分*/
        .search {
        	width: 415px;   /* 360+50*/
        	height: 38px;
        	border: 1px solid #f3f5f7;
        	/*margin-left: 0 10px 0 100px;   自己瞎添的*/
        	float: right;
        }
        .search input[type=text] {   /*属性选择器 type为text的文本框*/
			
			width: 341px;
			height: 35px;
			padding-left: 20px;	
			float: left;
        }  
        .search input[type=submit] {/*属性选择器 type 为 submit 的文本框*/
        	width: 50px;
        	height: 38px;        	
        	float: left;
        	background: #00a4ff url(1.png) center center no-repeat;
        }
        /*搜结*/
        /*个开*/
        .personal {
        	float: right;
        	height: 42px;
        	line-height: 42px; /* 这个行高给父亲，行高会继承*/
        	margin: 0 15px 0 35px;   /*上0 右15 下0 左35*/
        }
        .personal img {
        	margin: 0 8px;
        }
        /*个人中心结束*/
        /*banner start*/
        .banner {     /*通栏不用给宽*/
        	height: 420px;
        	background-color: #1c036c;
        }
        .banner-in {
        	height: 420px;
        	background: url(bj.gif) 0 0 no-repeat; 
            position: relative;  /*子绝父相*/
        }
        .slidebar {
        	height: 420px;
        	width: 190px;
        	background: rgba(0, 0, 0, 0.4);   /*盒子背景半透明*/
			float: left;
        }
        .slidebar li a {
			color: #fff;
			font-size: 14px;
			padding: 0 20px;
			/*a是行内元素，没有大小需要转换*/
			display: block;
			/*height: 45px;*/
			/*行高等于高文字垂直居中*/
			line-height: 45px;
			/*单行垂直居中 根据经验，很多情况下，有了行高就可以不用给高度  因为行高会自然而然撑开盒子 */
        }
        .slidebar li a:hover{    /*链接伪类   a:hover 中间没有空格*/
        	color: #