今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难。
主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些。
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°Ca> 17 <a>良 83a> 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.CNspan> 47 <span> 奇虎360旗下搜索服务 span> 48 <span> 京ICP备08010314号-19span> 49 <span> 京公网安备11000002000022号span> 50 div>
其实写到这里还好,其实HTML代码还好说没那么难,就是到css这个地方就不知道怎么开始画了,一用到css那就难了,其实我这篇文章专门给刚学习的小白看的大佬请绕过,一会
我会详细的说下css那些地方我做错的地方,HTML应该都能读懂吧,如果有不会的自行百度。
重点:css
1