java工程师走向前端学习心路历程（一）

最新推荐文章于 2024-07-29 14:22:26 发布

qingliang_hu

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量1.1k

点赞数 1

分类专栏： web css html 文章标签： java float div 阿里巴巴 class html

本文链接：https://blog.csdn.net/qingliang_hu/article/details/7299561

版权

web css html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

no.1、工欲善其事必先利其器——准备篇

拜师{

老师的作用不言而喻。。。

古语有曰：“三人行，必有我师”，身边的那个ta或许就是你的老师。

}

文档{
前端知识库：http://wd.alibaba-inc.com/doc
w3cschool：http://www.w3school.com.cn/
JQuery_API：下载个api或者到http://www.w3school.com.cn/jquery/jquery_reference.asp直接调试。
}

工具：
photoshop{
用来切图

#photoshop破解法，1、先用注册机注册下，然后关闭ps，然后在hosts里加入如下绑定，重启。试了很多方法，这个比较靠谱
127.0.0.1 activate.adobe.com
127.0.0.1 practivate.adobe.com
127.0.0.1 ereg.adobe.com
127.0.0.1 activate.wip3.adobe.com
127.0.0.1 wip3.adobe.com
127.0.0.1 3dns-3.adobe.com
127.0.0.1 3dns-2.adobe.com
127.0.0.1 adobe-dns.adobe.com
127.0.0.1 adobe-dns-2.adobe.com
127.0.0.1 adobe-dns-3.adobe.com
127.0.0.1 ereg.wip3.adobe.com
127.0.0.1 activate-sea.adobe.com
127.0.0.1 wwis-dubc1-vip60.adobe.com

127.0.0.1 activate-sjc0.adobe.com

hosts在哪？？？我的电脑：“C:\Windows\System32\drivers\etc”目录下自己找。。。

}

Dreamware{
编写HTML、CSS、js，这是个不错的工具
}

浏览器{
   装备必须齐全，这年讲头拼爹，咱拼的是装备：
       IE系列，win7环境(install-ietester)、xp环境（IEDevToolBarSetup）
       firefox，装备firebug那是必须的！
       chrome
       。。。
       前端要考虑各大浏览器兼容性问题，so，你懂的。。。
}

—————————————————————————— 我是分隔线————————————————————————————————————————

no.2、学而时习之——入门篇

大厦都是由一砖一瓦构成的，不必急于求成，先从最熟悉的html开始
目前所知道的DIV布局和table布局，

一个典型的div布局如：

myIndex.html

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="gbk"/>  
        <title>阿里巴巴化妆品批发大市场</title>  
        <meta name="description" content="阿里巴巴批发大市场"/>  
        <meta name="keywords" content="阿里巴巴,采购批发,1688,行业门户,网上贸易,b2b,电子商务"/>  
        <link href="css/menu.css" rel="stylesheet"/>
        
        <link href="http://style.china.alibaba.com/css/lib/fdev-v4/core/fdev-float.css" rel="stylesheet"/>
        <script src="http://style.china.alibaba.com/js/lib/fdev-v4/core/fdev-min.js" type="text/javascript"></script>  
        <script src="js/menu.js" type="text/javascript" ></script>  
        <base target="_blank"/>  
    </head>

<body>
<div id="doc" class="markup-page w952">
     <!-- 头部 -->
     <div id="header">
        ...
     </div>
     
     <!-- 内容 -->
     <div id="content">
          <!-- 第一列 -->
            <div class="grid-5">
               第一列
            </div>
            <!-- 第二列 -->
            <div class="grid-13">
                第一列
            </div>
            <!-- 第三列 -->
            <div class="grid-6 grid-fixed">
              第三列
            </div>            
     </div>
     
     <!-- 底部 -->
     <div id="footer">
        <div class="layout">
            <div class="grid-24">
                   <h4>阿里巴巴版权所有@alibaba.com</h4>
                  </div>
           </div>
     </div>
</div>
</body>
</html>

上述代码中的三列都加有样式 grid-5、grid13、grid6，这不是乱写的，反应的是栅格化设计的思想。grid-5即五个栅格、grid-13为13个栅格、grid-6为6个栅格。

加到一块刚好等于24，而每个栅格占40像素（其中栅格宽32px+右外边距8px），那么24*40-8=952px（px为像素的单位符号），这里减8是因为最右边一个栅格不需要右外边距。952px即一张页面的标准宽度。

看到这个地方或许你还不知道右外边距是什么，来一张图片吧！你心里或许在想，马上就来。。。

看图后，聪明的你肯定已经知道了右边实线和虚线之间的这段距离就是右外边距，专业的说法就是margin-right，同理，左、上、下外边距就是margin-left、margin-top、margin-bottom。这些统称外边距。同理padding（内边距）可以不用解释了吧？

接着布局的话题，上述布局的html代码中有一段“

<div class="grid-6 grid-fixed">

”或许你有疑惑？没错两个样式可以同时作用于一个元素身上，grid-6依然是占6个栅格，而grid-fixed里有一段样式margin-right: 0; 就是把右边的外边距给去掉了！

讲了这么久的样式、栅格再不上点栅格的源代码来太对不起观众了。。。

layout.css

/* CSS Document */
#header, #content, #footer, .layout {
}
#header:after, #content:after, #footer:after, .layout:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
}
.grid-fixed {
    margin-right: 0 !important;
}

.layout .grid-1 {
    float: left;
    margin-right: 8px;
    width: 32px;
}
.layout .grid-2 {
    float: left;
    margin-right: 8px;
    width: 72px;
}
.layout .grid-3 {
    float: left;
    margin-right: 8px;
    width: 112px;
}
.layout .grid-4 {
    float: left;
    margin-right: 8px;
    width: 152px;
}
.layout .grid-5 {
    float: left;
    margin-right: 8px;
    width: 192px;
}
.layout .grid-6 {
    float: left;
    margin-right: 8px;
    width: 232px;
}
.layout .grid-7 {
    float: left;
    margin-right: 8px;
    width: 272px;
}
.layout .grid-8 {
    float: left;
    margin-right: 8px;
    width: 312px;
}
.layout .grid-9 {
    float: left;
    margin-right: 8px;
    width: 352px;
}
.layout .grid-10 {
    float: left;
    margin-right: 8px;
    width: 392px;
}
.layout .grid-11 {
    float: left;
    margin-right: 8px;
    width: 432px;
}
.layout .grid-12 {
    float: left;
    margin-right: 8px;
    width: 472px;
}
.layout .grid-13 {
    float: left;
    margin-right: 8px;
    width: 512px;
}
.layout .grid-14 {
    float: left;
    margin-right: 8px;
    width: 552px;
}
.layout .grid-15 {
    float: left;
    margin-right: 8px;
    width: 592px;
}
.layout .grid-16 {
    float: left;
    margin-right: 8px;
    width: 632px;
}
.layout .grid-17 {
    float: left;
    margin-right: 8px;
    width: 672px;
}
.layout .grid-18 {
    float: left;
    margin-right: 8px;
    width: 712px;
}
.layout .grid-19 {
    float: left;
    margin-right: 8px;
    width: 752px;
}
.layout .grid-20 {
    float: left;
    margin-right: 8px;
    width: 792px;
}
.layout .grid-21 {
    float: left;
    margin-right: 8px;
    width: 832px;
}
.layout .grid-22 {
    float: left;
    margin-right: 8px;
    width: 872px;
}
.layout .grid-23 {
    float: left;
    margin-right: 8px;
    width: 912px;
}
.layout .grid-24 {
    float: left;
    width: 952px;
}

暂且不看前面那个雷同的占位者“.layout”和重复者“float:left;”，我相信这24个递增的栅格你肯定能看明白！

没错，这就是我们之前将的那段24*40-8=952px的源代码。

其实大家都是做java开发出身的，既然碰到了占位者“.layout”和重复者“float:left;”肯定很想知道他们是什么东东！没错，.layout就是个父亲，他有24个孩子（。。真能生！）。float:left顾名思义24个孩子集体向左看齐，站成一排，很乖！

qingliang_hu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
java工程师走向前端学习心路历程（一）

no.1、工欲善其事必先利其器——准备篇拜师{ 老师的作用不言而喻。。。古语有曰：“三人行，必有我师”，身边的那个ta或许就是你的老师。}文档{前端知识库：http://wd.alibaba-inc.com/docw3cschool：http://www.w3school.com.cn/JQuery_API：下载个api或者到http://
复制链接

扫一扫

专栏目录