HTML初级应用——简单的页面拼写（1）

来源：互联网发布：梭哈网络用语什么意思编辑：程序博客网时间：2024/05/20 22:27

 HTML标签的脑残级应用，纯属小白开发自己总结经验所用，除非从来没听说过HTML，其他人完全没有参看必要。 在小公司呆着就是没有头脑，一会干这个一会干那个。但是无论干什么能干好也是不错的。既然来拼页面了 就力求拼的好一点.

1. 实现效果

UI给我的时候就是这个样子的。

点我点我点我，我是这个样子的

2.创建思路

拼这个的时候，连HTML标签还背不过（现在也背不过），基本一步一百度。还好大神够多，磕磕绊绊到也实现了。
因为没有受过专业的前端开发培训和学习过页面拼接的基本法。所以基本都是瞎来，可能还有很多问题，但是进步是一点点来的，解决了不少问题值得记录一下，以后有用的到的地方也方便。
1. 划分区域
我简单的划分为三个区域
这里写图片描述
即为三个div。
然后我又发现div的命名我不会于是就参考了一下点我看DIV +CSS规范命名大全集合

然后创建css，创建html。我发现这么说特别的啰嗦，算了直接总结一下发现的问题和经验得了。

3.问题和总结

1.背景图片的自动拉伸

因为浏览器会随着屏幕大小自适应，如果背景图片不能自适应就会很难看。
所以需要设定背景的自适应大小，且不平铺。设置如下：

.main { background-image: url(../Images/background.png); background-repeat: no-repeat; background-size: 100% 100%; }

2.div横向显示

因为默认的div是向下排列的，哪怕是宽度足够，也会自动向下显示。需要把想要横排的div的float设置成left,之后只有左边宽度足够，就会依次从左往右排。（如果设置为right，及依次从右往左排）

注意：因为 float是浮动属性，如果只有一个div设置了浮动属性，那么，它会区别于其他div自己定位。其他div会无视它的存在，正常排序，可能产生覆盖浮动div的情况。

小例子

<html><head><style type="text/css">.div1{width:100px;height:200px;background-color:red;float:right;}.div2{width:100px;height:200px;background-color:blue;float:right;}.div3{width:100px;height:200px;background-color:yellow;float:right;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body></html>

清除浮动格式：因为元素浮动之后，在界面上不占实际上的长度和宽度，会导致下方的元素位置异常，所以在下方的元素样式中添加 clear:both;可以清除上面的浮动样式。

3.div定位

对于新手来说，这块很容易糊。弄着弄着就乱七八糟了。
我自己弄几个div块研究了一会，发现一些规律，总结一下。

常用的div位置 position 有absolute和absolute两种。
字面理解的话，relative是相对定位、absolute是绝对定位。

据我观察，对一个div设置定位的时候，受到直观影响的并不是当前div而是同级的下一个div。即，如果设置a为相对定位，那么接下来的b是相对于a定位。如果设置a为绝对定位，那么b无视a的存在，在父级div中相对定位。

小例子

<html><head><style type="text/css">.div{width:500px;height:600px;border:1px solid #F00;left:200px;position:absolute;}.div1{width:100px;height:200px;background-color:red;position:relative;}.div2{width:100px;height:200px;background-color:blue;position:absolute;margin-top:20px;}.div3{width:100px;height:200px;background-color:yellow;float:left;position:relative;margin-top:40px;}</style></head><body><div class="div"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body></html>

4.设置背景透明度

关于设置透明度的代码，这位大神有很详细的解释点我点我点我！点我看背景透明度

我只采用了最简单的一种：

    background-color:rgba(0,161,233,0.8);

rgba(r,g,b,a) 其中 R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间后面的0.8及为透明度为80%。

详细解释请移步点我看rgba的相关内容哦

5.设置二维动态效果（css2D效果）

本来想弄个3D旋转效果的，结果发现涉及部分js内容，就改为2D了。
旋转效果：

.image {    transition: width 2s, height 2s;    -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */    -o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */}.image:hover {    transform: rotate(360deg);    -moz-transform: rotate(360deg); /* Firefox 4 */    -webkit-transform: rotate(360deg); /* Safari and Chrome */    -o-transform: rotate(360deg); /* Opera */}

image为目标图片，image:hover指的是图片的鼠标悬浮事件。

5.结束语

大概就写了这么多，以后再丰富还会再补充的，小白初次写代码，内容比较简单，全是自己理解，难免有所纰漏，还望路过的各位大神指正，
拜谢！
源码地址：http://pan.baidu.com/s/1bSGI5o 密码：drfu

0 0