码蚁之家
ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码

栏目分类

热门排行

最近更新

div+css网页粗略布局(1/3)

来源：网络整理     时间:2016-04-10     关键词:CSS,div

本篇文章主要介绍了"div+css网页粗略布局"，主要涉及到CSS,div方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 我们打开浏览器看到各大网站的导航首页如图，是怎么做出来的呢？比如就拿素描来说吧，看到一个参照物首先不是一开始就画，而是先确定几何构物线，确定物体大致范围比例框架...

我们打开浏览器看到各大网站的导航首页如图，是怎么做出来的呢？

比如就拿素描来说吧，看到一个参照物首先不是一开始就画，而是先确定几何构物线，确定物体大致范围比例框架。网页也是的，这就是div+css布局。

这时打开ide或是notepad++之类的编辑工具，开始编写代码

以及截图测量工具faststone capture，用于取色，测量等

我们先别急着编码，我们画个大致的框架，更好方便我们布局

有了设计图之后，便开始按比例尺寸编写div+css布局

打开测量工具，取出标尺，以及编辑工具

    

编写html代码，做个类似草稿的效果，再创建一个.css，过会编写



             
      
home                                                  


火狐主页
                                           搜索栏
广告
网页导航
洋葱新闻 官方新闻 读书推荐 关于我们

现在开始编写.css文件

*{
margin:0px;                       /*外边距初始值置0*/
padding:0px;                     /*内边距初始值置0*/
}

测量工作开始了，主页条的宽度和高度

      

#spe{                               /*id选择器以#打头*/
width:1366px;
height:39px;
border:1px solid black;            /*边框为1px，黑色*/
background:#00A2E8;                /*颜色的hex值，16进制*/
}

测量搜索栏


#sea{
width:1366px;
height:109px;
border:1px solid black;
background:#99D9EA;
}

测量广告位

    

#ads{
width:1016px;
height:63px;
border:1px solid black;
background:#ED1C24;
}

我们发现广告盒子偏离了，原先的预想，这时就用到盒子的外边距margin-left

测量出左边距到目标位像素距离

1 2 3 下一页
上一篇：如何使用js懒加载图片|如何使用jquerylazyloadjs|网页优化|如何提高网页加载速度 下一篇：递归和闭包的深刻理解

相关图片

相关文章

首 页 | 关于我们 | 联系我们 | 隐私声明 | 合作伙伴 | 帮助中心 | 手机版

Copyright © 2015-2016 , 版权所有 码蚁之家 codes51.com 粤ICP备14062022号
声明：《div+css网页粗略布局》由码蚁之家搜集整理于网络，
如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!联系邮箱：mxgf168#qq.com(#改为@)