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

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

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

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

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

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

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

第一部分：主要是HTML

代码

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

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

重点：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 简单总结

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

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

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

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

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

css3 calc&lpar;&rpar;：css简单的数学运算-加减乘除

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

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html

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

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

CSS简单使用

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

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

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

css简单实现带箭头的边框