淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1844|回复: 12
收起左侧

码盲学习网页代码专贴 第二节

[复制链接]
  • TA的每日心情
    抱抱
    2016-3-28 11:00
  • 签到天数: 30 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    59

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10116

    发表于 2015-3-13 02:42:33 | 显示全部楼层 |阅读模式
    第二节
    这里用到的都是淘宝上能用的教程,想学全部的绕绕。
    对于上节讲的有不懂的直接问。大家要去下个DW
    这节主要讲浮动float的用法。
    首先大家先看下面的代码
    <div style="width:200px;height:200px;background-color:#999">1</div>
    <div style="width:200px;height:200px;background-color:#FF0">2</div>
    <div style="width:200px;height:200px;background-color:#F00">3</div>
    根据上节讲的应该知道这段代码是什么意思
    得出的在网页上的图像就是
    图片1.png
    然后我们发现是竖着排的
    所以在写代码时候DIV都是竖着排,如何使横着排呢
    在代码的style里面加入float:left就可以,
    <div style="width:50px;height:50px;background-color:#999;float:left">1</div>
    <div style="width:50px;height:50px;background-color:#FF0;float:left">2</div>
    <div style="width:50px;height:50px;background-color:#F00;float:left">3</div>
    得出的图像就是
    图片2.png
    到此结束。
    接着一个DIV里面 可以装多一个DIV  就是
    <div>
    <div></div>
    </div>
    现在来用一下,我们先写一个div出来
    <div style="width:500px; height:500px; background-color:#00F">
    </div>
    这个就是一个500*500像素蓝色低的一个div
    然后我们要在里面加上一个黄色的DIV
    <div style="width:500px; height:500px; background-color:#00F">
    <div style="width:200px; height:200px; background-color:#FF0"></div>
    </div>
    这就完成了得到的图解是
    图片3.png
    那么我们想把黄色块移动到别的地方去的时候呢?
    这个时候我们要加入 position:absolute;在这个的后面加入top:100px;left:100px
    就是position:absolute; top:100px; left:100px
    整段就是
    <div style="width:500px; height:500px; background-color:#00F">
    <div style="width:200px; height:200px; background-color:#FF0; position:absolute; top:100px; left:100px"></div>
    </div>
    得到的图像就是
    图片4.png
    学习结束   
    下节课讲鼠标移动到上面变图
    弹出效果

    评分

    参与人数 3美工币 +38 收起 理由
    hunianzu + 10 感谢分享!
    双子PUXIANG + 20 乐于助人!
    小自C + 8 乐于助人!

    查看全部评分

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    无奈
    2016-1-27 13:48
  • 签到天数: 89 天

    连续签到: 1 天

    [LV.6]渐入佳境

    31

    主题

    599

    帖子

    6749

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6749

    天猫美工最佳新人热心会员

    发表于 2015-3-13 08:30:19 | 显示全部楼层
    好顶赞好顶赞好顶赞

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-3-13 09:18:48 | 显示全部楼层
    虽然挺简单的基础知识,但写的非常棒  点赞  点32个赞
  • TA的每日心情
    不爽
    2015-12-30 12:27
  • 签到天数: 277 天

    连续签到: 1 天

    [LV.8]自成一派

    8

    主题

    311

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    49111

    发表于 2015-3-13 09:51:07 | 显示全部楼层
    写的非常棒  点赞  点32个赞,温故知新

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2016-9-9 10:25
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    2

    主题

    127

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    70027

    发表于 2015-3-13 09:58:49 | 显示全部楼层
    顶顶                    

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-3-28 11:00
  • 签到天数: 30 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    59

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10116

     楼主| 发表于 2015-3-13 10:21:49 | 显示全部楼层
    下节课我做好看点 让你们容易看些

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    2016-11-24 14:05
  • 签到天数: 165 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    757

    帖子

    8万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    81124

    最佳新人热心会员活跃会员

    发表于 2015-3-13 10:44:04 | 显示全部楼层
    谢谢亲。。。赞赞赞。。。
  • TA的每日心情

    2016-8-19 13:52
  • 签到天数: 136 天

    连续签到: 1 天

    [LV.7]炉火纯青

    15

    主题

    244

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    28314

    最佳新人热心会员

    发表于 2015-3-13 19:44:38 | 显示全部楼层
    非常好,简单易懂,谢谢楼主分享。另外,求楼主赶快更新-----你讲的这两课比我看电子书还懂得快....

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-5 06:27 , Processed in 0.141508 second(s), 30 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表