今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难。

  主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些。

    1.代码的基础不好,元素的一些属性不熟悉,对于HTML和css还没有一个更深层次的一个理解。

    2.注意一些类选择器和ID选择器的名是否对一致。

    3.在导航栏那一部分的布局和内外边距的距离,以及在右面的导航栏里的一些标签处理。

    4.加载图片img标签的运用还不是很流畅,图片的大小问题,图片的位置问题以及按钮的一些写法,还有下面的input标签的用法和css的属性,都是很欠缺的。

    5.对最下面的导航栏的理解很实用方法海不是太了解。

第一部分:主要是HTML

代码

 <div id="header" >
<div class="nav_1"> //导航栏部分
<a>360导航</a>
<a>资讯</a>
<a>视频</a>
<a>图片</a>
<a>良医</a>
<a>地图</a>
<a>百科</a>
<a>文库</a>
<a>英文</a>
<a>更多</a>
</div >
<div class="nav_2">
<a>邯郸 :</a>
<a>多云 29°C</a>
<a>良 83</a>
<a>|</a>
<a>设置</a>
<a>换肤</a>
<a>提醒</a>
<a>登录</a>
</div>
</div>
<div class="container"> //img图片部分
<div class="img_out"><img src="D:/360.jpg" 150px alt="360搜索浏览器" ></div>
<div class="input_out"> //input 输入框
<input type="text">
<button>搜索</button> //button按钮部分
</div>
</div> <div class="able_1"> //底部导航栏
<span>360浏览器客户端官网</span>
<span>意见反馈</span>
<span>违法举报</span>
<span>使用帮助</span>
<span>使用协议</span>
<span>隐私条款</span>
<span>免责声明</span>
<span>站长平台</span>
<span>推广合作</span>
<span>360搜索联盟</span>
</div>
<div class="abel_2">
<span>©2019 360.CN</span>
<span> 奇虎360旗下搜索服务 </span>
<span> 京ICP备08010314号-19</span>
<span> 京公网安备11000002000022号</span>
</div>

其实写到这里还好,其实HTML代码还好说没那么难,就是到css这个地方就不知道怎么开始画了,一用到css那就难了,其实我这篇文章专门给刚学习的小白看的大佬请绕过,一会

我会详细的说下css那些地方我做错的地方,HTML应该都能读懂吧,如果有不会的自行百度。

重点:css

  <style type="text/css";>
*{
margin:;
padding:;
box-sizing: border-box;
}
#header
{
width: 100%;
height: 50px;
}

我最开始写代码的时候没有写*这个东西导致我的页面不是跟屏幕不对齐,加了上面的样式就好多了,#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代码中的导航栏部分,这部分我可是吃了不少亏,我自己怎么设置都是不是不对齐就是歪的或者变成两行文字,后来师傅帮我改的其实也很简单上面我会给注释。

          .container
{
width: 100%;
}
.input_out{      //图片的尺寸和边距
width: 645px;
height: 50px;
margin: 0 auto;
font-size:;
}
.input_out input{ //input输入框
width: 540px;
height: 50px;
margin-right:;
margin-left:;
margin-top:;
vertical-align: top; //垂直对齐一个图片或者一个标签
}
.input_out button{  //按钮的设置
width: 105px;
height: 50px;
font-size: 18px;
background-color: #19b955;
outline: none; //轮廓的属性
border:none;
color:white;
}

说下整体的思路吧,我在这就没写明白,先设置宽度是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;
    }
 
 

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

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

html+css简单的实现360搜索引擎首页面的更多相关文章

  1. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  2. 纯css实现扁平化360卫士logo demo

    前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像 ...

  3. 360搜索引擎取真实地址-python代码

    还是个比较简单的,不像百度有加密算法 分析 http://www.so.com/link?url=http%3A%2F%2Fedu.sd.chinamobile.com%2Findex%2Fnews. ...

  4. css3 calc():css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  5. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  6. 360搜索引擎so自动收录php改写方案——适合phpcms等cms

    360搜索引擎自动收录功能,官方提供了代码,带式,十分坑爹,没有提供批量提交入口,只是提供了一段js代码,关键是 一个js去下载另外一个js,document.write到文档,然后再 重复2遍如此工 ...

  7. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

  8. CSS实现英文或拼音单词首字母大写

    CSS实现英文或拼音单词首字母大写,只需要在css样式中加入: text-transform: capitalize 即可. 测试代码如下: <!doctype html> <htm ...

  9. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

随机推荐

  1. class4_Listbox 列表部件

    最终的运行效果图: #!/usr/bin/env python# -*- coding:utf-8 -*-# --------------------------------------------- ...

  2. Vmware Centos7 配置静态 ip 和 使宿主机和虚拟机互相 ping 通

    NAT 方式1. 配置静态 ipVmware 安装 Centos7 可以参考 https://blog.csdn.net/guo_ridgepole/article/details/78973763 ...

  3. 转——调试寄存器 原理与使用:DR0-DR7

    下面介绍的知识性信息来自intel IA-32手册(可以在intel的开发手册或者官方网站查到),提示和补充来自学习调试器实现时的总结. 希望能给你带去有用的信息. (DRx对应任意的一个调试寄存器. ...

  4. 关于jquery的一些插件

    1.fullPage.js插件 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,在手机上也经常能看到一些活动页面.这些网站用 ...

  5. PHP算法之寻找两个有序数组的中位数

    给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nums2  ...

  6. vue 父子组件传递数据

    单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...

  7. U Must Know The .Net --7

    关键字 1 new 创建对象/调用构造函数 隐藏基类成员 new()约束,表明泛型类声明中的任何参数都必须有公共无参构造函数 new 实现多态 1.1 new class:分配内存,调用构造函数实例化 ...

  8. mysql连接卡死,很多线程sleep状态,导致CPU中mysqld占用率极高

    关闭所有 .................................. .连接: ##把全部的MySQL连接kill掉for i in $(mysql -uroot -p123456 -Bse ...

  9. SQL Server - SQL Server/ bcp 工具如何通信

    问题-BCP通讯 ref: https://stackoverflow.com/questions/40664708/bcp-cannot-connect-to-aws-sql-server-but- ...

  10. 2016.8.15上午纪中初中部NOIP普及组比赛

    2016.8.15上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1333 这次比赛不怎么好,因为这套题目我并不是很擅长. 可同学们 ...