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>box sizing
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;
}
  　.able_1
    {
        margin-top:350px;
        width: 100%;
        text-align: center;
    }
  　.abel_2
    {
        width: 100%;
        text-align: center;
    }
再补充⼀两句，最上⾯的代码是图⽚的第⼀⾏代码，主要的功能是设置图⽚的尺⼨和内外边距。下⾯的两个选择器的就是对齐上⾯的元素居中，如果有看不懂得⾃⾏百度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。