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°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