html+css简单的实现360搜索引擎首页面
今天主要学习了是如何实现的，以及我在写这个页面的时候我所遇到的一些困难。
主要实现是用代码的，不说废话了，其实我是想说我走的坑有哪些。
1.代码的基础不好，元素的一些属性不熟悉，对于HTML和css还没有一个更深层次的一个理解。
2.注意一些类选择器和ID选择器的名是否对一致。
3.在导航栏那一部分的布局和内外边距的距离，以及在右面的导航栏里的一些标签处理。
4.加载图片img标签的运用还不是很流畅，图片的大小问题，图片的位置问题以及按钮的一些写法，还有下面的input标签的用法和css的属性，都是很欠缺的。
5.对最下面的导航栏的理解很实用方法海不是太了解。
第一部分：主要是HTML
代码
1 <div id="header" > 2 <div class="nav_1"> //导航栏部分 3 <a>360导航</a> 4 <a>资讯</a> 5 <a>视频</a> 6 <a>图片</a> 7 <a>良医</a> 8 <a>地图</a> 9 <a>百科</a> 10 <a>文库</a> 11 <a>英文</a> 12 <a>更多</a> 13 </div > 14 <div class="nav_2"> 15 <a>邯郸 :</a> 16 <a>多云 29°C</a> 17 <a>良 83</a> 18 <a>|</a> 19 <a>设置</a> 20 <a>换肤</a> 21 <a>提醒</a> 22 <a>登录</a> 23 </div> 24 </div> 25 <div class="container"> //img图片部分 26 <div class="img_out"><img src="D:/360.jpg" 150px alt="360搜索浏览器" ></div> 27 <div class="input_out"> //input 输入框 28 <input type="text"> 29 <button>搜索</button> //button按钮部分 30 </div> 31 </div> 32 33 <div class="able_1"> //底部导航栏 34 <span>360浏览器客户端官网</span> 35 <span>意见反馈</span> 36 <span>违法举报</span> 37 <span>使用帮助</span> 38 <span>使用协议</span> 39 <span>隐私条款</span> 40 <span>免责声明</span> 41 <span>站长平台</span> 42 <span>推广合作</span> 43 <span>360搜索联盟</span> 44 </div> 45 <div class="abel_2"> 46 <span>©2019 360.CN</span> 47 <span> 奇虎360旗下搜索服务 </span> 48 <span> 京ICP备08010314号-19</span> 49 <span> 京公网安备11000002000022号</span> 50 </div>
其实写到这里还好，其实HTML代码还好说没那么难，就是到css这个地方就不知道怎么开始画了，一用到css那就难了，其实我这篇文章专门给刚学习的小白看的大佬请绕过，一会
我会详细的说下css那些地方我做错的地方，HTML应该都能读懂吧，如果有不会的自行百度。
重点：css
1 <style type="text/css";> 2 *{ 3 margin:0; 4 padding: 0; 5 box-sizing: border-box; 6 } 7 #header 8 { 9 width: 100%; 10 height: 50px; 11 }
我最开始写代码的时候没有写*这个东西导致我的页面不是跟屏幕不对齐，加了上面的样式就好多了，#header这个选择器，我最开始只知道px这个参数而且也没写别的海给了一些没用的参数，这是修改后的了，还有一点box-sizing：border-box这个元素很重要，因为它可以去掉你浏览器的边框和内边距的值，所以这个很好用。
.nav_1 { color: black; //颜色，黑色 float: left; //浮动向右 width: 500px; //宽度 } .nav_2 { color: black; float: right; width: 500px; text-align: right; //重点，就是因为我自己不知道还有这个属性，所以我的页面怎么看怎么不是从右往左看的，它是文本的水平对齐的方式的一种 }
这段代码主要是对应我的HTML代码中的导航栏部分，这部分我可是吃了不少亏，我自己怎么设置都是不是不对齐就是歪的或者变成两行文字，后来师傅帮我改的其实也很简单上面我会给注释。
1 .container 2 { 3 width: 100%; 4 } 5 .input_out{ //图片的尺寸和边距 6 width: 645px; 7 height: 50px; 8 margin: 0 auto; 9 font-size: 0; 10 } 11 .input_out input{ //input输入框 12 width: 540px; 13 height: 50px; 14 margin-right: 0; 15 margin-left: 0; 16 margin-top: 0; 17 vertical-align: top; //垂直对齐一个图片或者一个标签 18 } 19 .input_out button{ //按钮的设置 20 width: 105px; 21 height: 50px; 22 font-size: 18px; 23 background-color: #19b955; 24 outline: none; //轮廓的属性 25 border:none; 26 color:white; 27 }
说下整体的思路吧，我在这就没写明白，先设置宽度是100%，然后设置图片的长和宽在设置它的内外边距的大小和字体的尺寸，设置输入框的宽高左右外边距和上边距，
设置button按钮的宽高字体的大小，背景的颜色还有它的轮廓是为空的和边框颜色。
其实这个地方是重点因为对于我个人来说我对于图片来说是很蒙的。
.img_out { width: 250px; height: 160px; margin:0 auto; }
再补充一两句，最上面的代码是图片的第一行代码，主要的功能是设置图片的尺寸和内外边距。
下面的两个选择器的就是对齐上面的元素居中，如果有看不懂得自行百度。