ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

html+css简单的实现360搜索引擎首页面

2019-08-23 23:55:00  阅读:108  来源: 互联网

标签:width html css input margin 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;
        }
   .able_1      {         margin-top:350px;         width: 100%;         text-align: center;     }    .abel_2     {         width: 100%;         text-align: center;     }  
 

再补充一两句,最上面的代码是图片的第一行代码,主要的功能是设置图片的尺寸和内外边距。

下面的两个选择器的就是对齐上面的元素居中,如果有看不懂得自行百度。

 

标签:width,html,css,input,margin,360,图片
来源: https://www.cnblogs.com/qijiang123/p/11403204.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有