网页布局:CSS实现一列二列三列和混合布局

常见网站布局

网站常见的布局方式主要有一列布局,二列布局,三列布局和混合布局。

一列布局

效果图:

一列布局

代码:

  • CSS:
    body{margin:0;padding: 0;}
    .top{height:100px;background: blue;}
    .main{width:800px;height:300px;background: #ccc;margin:0 auto;}
    .foot{width: 800px;height:100px;background: red;margin: 0 auto;} 
  • HTML:
    <div class="top"></div>
    <div class="main"></div>
    <div class="foot"></div>
  • 说明:

页面中有三块div,头底和中间内容部分,三部分都设置了固定的高度,顶部的宽度不设置,在实际开发中main部分一般不设置固定高度,而是可随着内容的多少而多高,可以参考新浪网

二列布局

效果图:

二列布局

代码:

  • CSS:
body{margin:0;padding: 0;}
.main{width:600px;margin:0 auto;}
.left{width: 200px;height:300px;background: #ccc;float:left;}
.right{width:400px;height:300px;background: #ddd;float:right;}

  • HTML:
<div class="main">
    <div class="left"></div>    
    <div class="right"></div>
</div>

  • 说明:

二列布局的宽高一般是固定的,所以一般外面再套一层main,用这个main来固定宽高。

三列布局

效果图:

三列布局

代码:

  • CSS:
body{margin:0;padding: 0;}
.left{width: 200px;height:500px;background: #ccc;position:absolute;left: 0;top: 0;}
.middle{background: blue; height: 500px;margin:0 200px 0 200px;}
.right{width:200px;height:500px;background: red;position: absolute;right: 0;top: 0;}

  • HTML:
<div class="left"></div>    
<div class="middle">sdfsdfsdfsdfsdf</div>
<div class="right"></div>

  • 说明:

三列布局,让left绝定定位到左侧,right绝定定位到右侧,中间不设宽度,则可以随浏览器自适应,这里要用absolute的方式来定位,用float难以实现。

混合布局

效果图:

混合布局

代码:

  • CSS:
body{margin:0;padding: 0;}
.top{height:100px;background: blue;}
.head{height: 100px;width: 800px;background: #f60;margin: 0 auto;}
.main{width:800px;height:300px;background: #ccc;margin:0 auto;}
.left{width:200px;height: 300px;background: #eee;float: left;}
.right{width:600px;height: 300px;background: #369;float: right;}
.foot{width: 800px;height:100px;background: red;margin: 0 auto;}

  • HTML:
<div class="top">
    <div class="head"></div>
</div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="foot"></div>

  • 说明:

常见网站的布局都是混合布局,上面的混合布局例子在原先的一列布局上做了修改,在main下划分了左右块,top下加了head块。可以根据需要,在leftright块下再划分为其它块。

持续集成:Jenkins+maven+svn+IntelliJ IDEA

本文初衷

  • 记录我在本地机上搭建持续集成的过程
  • 了解Jenkins的基本使用
  • 工作过的公司都没有使用持续集成,所以我没有生产环境的使用经验。

持续集成是什么

持续集成工具有哪些

所使用到的工具

本文主要演示在Windows环境下,以Jenkins来搭建Java开发持续集成环境,除Jenkins以外,用到的其它工具有以下:

Jenkins简单入门

官网有详细的文档:

网络好文:

一. 下载和运行

访问Jenkins官网,下载对应系统的安装包,我用得是windows10,下载后为一个war包: jenkins.war,要启动Jenkins,主要有两种方式,一种是在cmd中运行以下命令:

java -jar jenkins.war

另一种是用web服务器来启动,将jenkins.war包放于tomcat的webapps目录下,启动tomcat即可。

我用tomcat来启动,启动成功后,打开浏览器访问http://localhost:8080/jenkins即可进入jenkins配置页面,如下图: Jenkins初始页

Jenkins启动成功后,在C:\Users\username\下会有一个.jenkins文件夹,用于存放Jenkins的任务,插件,配置等信息。

二. 创建第一个任务

在Jenkins中创建第一个任务这前,先在IntelliJ IDEA中建一个Maven项目:helloJenkins,并将上传至svn中:https://herohuang/svn/myProjects/helloJenkins/trunkhelloJenkins项目

接着点击创建一个新任务,进入如下所示页面,Item名称随便取,这里我取为helloJenkins,下面选择第一个选项,构建一个自由风格的软件项目。 创建item

三. 进入配置界面

进入当前项目配置的详细页面,假设现在要执行的构建动作是使得helloJenkins项目定时期自动打成war包,则需要在这个页面的以下几个地方作配置:

1. 高级项目选项

高级项目选项,选择使用自定义的工作空间,目录填写当前项目所在的本地目录,显示名称可以不填。 高级项目选项

2. 源码管理

我用的是svn,所以这里选择SubversionRepository URL填写项目的svn地址,其它默认。 svn地址

3. 构建触发器

构建触发器有三种方式,我选择Build periodically表示定时地触发构建,日程表填写定时的规则,使用crontab表达式,为了方便测试,这里我填* * * * *,注意中间有空格,表示每隔一分种就构建一次。 构建触发器

4. 构建

构建的方式,因为我用得是maven,这里选择Invoke top level Maven targets,Goals填写maven命令:clean package打包项目。 构建

5. 查看构建结果

根据上面设置的规则,每隔一分种就会自动构建一次,在左侧栏下的Build History面板可以看到构建历史,或则点击立即构建来查看结果。 构建历史

点击某个构建版本,进入可查看详细的构建结果 控制台输出 如果构建成功,则在项目目录下会发现多出一个target目录(编译目录设为此目录),其中会有mavenclean package命令生成的war包。


本文标题:持续集成:Jenkins+maven+svn+IntelliJ IDEA
文章作者:[Acheron](http://www.herohuang.com)
发布时间:2016年04月10日 - 20时48分
最后更新:2016年04月10日 - 20时52分 
许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。