前端入门的第一次博客

标题html,css,js携程网页

第一次写博客，写的不好请谅解。嘎嘎。。。
本人也是前端刚入门不久，希望有大佬可以把不足指点出来。
这次任务是写个携程旅行的一个页面，是这样子的。
网页是这个http://m.ctrip.com/html5/
先说这次感想吧
1.我感觉相对定位很僵硬，后边准备学习使用flex布局
2.本来使用hbuilding来写的，但好像不是很好，准备换vscode
3.现在css还是比较熟悉，但js对我来说还很陌生，继续努力。
我们先来看下css样式吧

//我用绝对定位和相对定位来布局的
*{
				margin: 0px;
				padding: 0px;
			}                        //清楚浏览器原本的边距
		#all{
			width: 100%;
			height: 1330px;
			background-color: #F5F5DC;
		}
		#page{
			width: 540px;
			height: 1330px;
			position: relative;
			margin: 0 auto;
		}
		#search{
			width: 540px;
			height: 45px;
			position: fixed;
			top: 0px;
			left: 50%;
			margin-left:-270px;
			border-bottom: 1px solid #C0C0C0;
			border-top: 1px solid #C0C0C0;
       		padding: 0px;
       		background-color: #FFFAFA;
		}
		#search input{
			width: 480px;
			height: 25px;
			position: relative;
			top: 10px;
			left: 30px;
			border: 1px solid #CCC;
			background: url() no-repeat left center;
		}
		#module{
			width: 540px;
			height: 150px;
			position: absolute;
			top: 60px;
			border: 1px solid #C0C0C0;
			background-color: #FFFAFA;
		}
		#module ul{
			position: relative;
		}
		 .item{
			position: absolute;
			top: 0px;
			left: 0px;
			display: none;
		}

		.tab-btn{
			position: absolute;
			right: 20px;
			bottom: 0px;
			width: 120px;
			height: 30px;
		}
		.tab-btn .btn{
			width: 6px;
			height: 6px;
			background: #868686;
		    border: 2px solid #c3c3c3;
		    float: left;
		    margin: 5px;
		    border-radius: 50%;
		}
		.tab-btn .btn:hover{
			background: #FFFAF0;
			border: 1px solid #000000;
		}
		.active{
			background: #FFFAF0;
		    border: 1px solid #000000;
		}
		ul{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		#nav{
			width: 540px;
			height: 70px;
			position: absolute;
			top: 220px;
			border: 1px solid #C0C0C0;
			list-style-type: none;
			border-radius: 10px;
			background-color: #FFFAFA;
		}
		#nav ul{
			list-style: none;
			text-align: center;
			border: none;
			position: absolute;
			top: 10px;
		}
		#nav li{
			float: left;
			width: 108px;
			height: 50px;
		}
		#form{
			width: 540px;
			height: 300px;
			position: absolute;
			top: 300px;
			border: 1px solid #C0C0C0;
			border-radius: 10px;
			background-color: #FFFAFA;
		}
		#list{
			width: 540px;
			height: 120px;
			border: 1px solid #C0C0C0;
			position: absolute;
			top: 610px;
			border-radius: 10px;
			background-color: #FFFAFA;
		}
		#list ul{
			list-style: none;
			text-align: center;
			border: none;
			position: absolute;
		}
		#list ul li{
			float: left;
			width: 108px;
			height: 60px;
		}
		#sale{
			width: 540px;
			height: 470px;
			border-bottom: 1px solid #C0C0C0;
			border-top: 1px solid #C0C0C0;
			position: absolute;
			top: 740px;
			background-color: #FFFAFA;
		}
		#sale-hd{
			width: 540px;
			height: 50px;
			position: absolute;
			top: 0px;
			border-bottom: 1px solid #C0C0C0;
			border-top: 1px solid #C0C0C0;
		}
		#sale-main{
			width: 540px;
			height: 420px;
			border-bottom: 1px solid #C0C0C0;
			border-top: 1px solid #C0C0C0;
			position: absolute;
			top: 50px;
		}
		#sale-main-1{
			width: 270px;
			height: 180px;
			position: absolute;
			border-bottom: 1px solid #C0C0C0;
			border-right: 1px solid #C0C0C0;
		}
		#sale-main-2{
			width: 270px;
			height: 180px;
			position: absolute;
			left: 270px;
			border-bottom: 1px solid #C0C0C0;
		}
		#sale-main-3{
			width: 270px;
			height: 120px;
			position: absolute;
			top: 180px;
			border-bottom: 1px solid #C0C0C0;
			border-right: 1px solid #C0C0C0;
		}
		#sale-main-4{
			width: 270px;
			height: 120px;
			position: absolute;
			top: 180px;
			left: 270px;
			border-bottom: 1px solid #C0C0C0;
		}
		#sale-main-5{
			width: 270px;
			height: 120px;
			position: absolute;
			top: 300px;
			border-bottom: 1px solid #C0C0C0;
			border-right: 1px solid #C0C0C0;
		}
		#sale-main-6{
			width: 270px;
			height: 120px;
			position: absolute;
			top: 300px;
            left: 270px;
		}
		#footer{
			width: 540px;
			height: 100px;
			position: absolute;
			bottom: 0px;
			border-top: 1px solid #C0C0C0;
			color: #C0C0C0;
			background-color: #FFFAFA;
		}
		#footer-1{
			width: 540px;
			height: 50px;
			position: absolute;
			border-bottom: 1px solid #C0C0C0;
			border-top: 1px solid #C0C0C0;
		}
		#footer-2{
			width: 540px;
			height: 25px;
			position: absolute;
			top: 50px;
			text-align: center;
		}
		#footer-3{
			width: 540px;
			height: 25px;
			position: absolute;
			top: 75px;
			text-align: center;
		}
		a{
			text-decoration: none;
			color: #C0C0C0;
		}
		.block{
			display: block;
		}

这是插入的一个搜索框， 它不随页面滚动而动，所以用fixed

<form>
			<input type="text" placeholder="搜索：目的地/酒店/景点/航班号"/ >
		    </form>

接下来是插入的六张图片，制作轮播图

	<div class="img-wrap">
		  		<ul>
		  		  <li class="item block" id='btn'>
	  		        <img src="1.jpg" width="540" height="150"/>
		  		  </li>
		  		  <li class="item">
		  		  	<img src="2.jpg"  width="540" height="150"/>
		  		  </li>
		  		  <li class="item">
		  		  	<img src="3.jpg"  width="540" height="150"/>
		  		  </li>
		  		  <li class="item">
		  		  	<img src="4.jpg"  width="540" height="150"/>
		  		  </li>
		  		  <li class="item">
		  		  	<img src="5.jpg"  width="540" height="150"/>
		  		  </li>
		  		  <li class="item">
		  		  	<img src="6.jpg"  width="540" height="150"/>
		  		  </li>
		  		</ul>
		  	</div>

在其他的没啥要说的，，我只做了简单的框架而已， 里面没有填充各种图片等
这是图片的按钮

<div class="tab-btn">
		  		<ul>
		  			<li class="btn"></li>
		  			<li class="btn"></li>
		  			<li class="btn"></li>
		  			<li class="btn"></li>
		  			<li class="btn"></li>
		  			<li class="btn"></li>
		  		</ul>
		  	</div>

下来说一下轮播图的js ， 说实话 我对js还是非常的陌生，，就一个轮播图，我花了三天时间在网上找各种视频，代码来参考，最后还是没有搞懂。哎u… 难受

var wrap=document.getElementsByClassName('item');       // 提取声明图片变量
    	var timer=null;
    	var index=0;
    	aaa();                                             //运行该函数
    	function aaa(){
    		timer=setInterval(function(){
    			index++;
    			//console.log(1);
    			change(index);
    		},1000)                  //一秒变一次
    	}
    	function change(index){
    		for(var i=0;i<wrap.length;i++){
    			wrap[i].classList.remove('block');          //轮到的图片显示出来
    		}
    		wrap[index].classList.add('block');                //其他的图片隐藏
    	} 

我现在只能说这么多了， 我的路还很长，，任重而道远，， 加油。
先以后搞区块链这方面吧， 近期先把js学懂吧。