web前端|html教程
div+css网页粗略布局
web前端-html教程
我们打开浏览器看到各大网站的导航首页如图，是怎么做出来的呢？
影视app e4a源码最新,在ubuntu启用ftp,java 爬虫爬整站,mdash php,淘宝SEO心得lzw
比如就拿素描来说吧，看到一个参照物首先不是一开始就画，而是先确定几何构物线，确定物体大致范围比例框架。网页也是的，这就是div+css布局。
智能手环app源码,vscode关闭缩略图,ubuntu还是suse,tomcat重启单个项目,反爬虫法规,php页面传递数组,现在做seo还是外链,网业务网站样式源码(带后台),算命网站模板lzw
这时打开ide或是notepad++之类的编辑工具，开始编写代码
每天报名 统计 源码,威联通ubuntu密码,黑窗口查看tomcat进程,爬虫python 淘宝,token失效怎么解决php,夏天seolzw
以及截图测量工具faststone capture，用于取色，测量等
我们先别急着编码，我们画个大致的框架，更好方便我们布局
有了设计图之后，便开始按比例尺寸编写div+css布局
打开测量工具，取出标尺，以及编辑工具
编写html代码，做个类似草稿的效果，再创建一个.css，过会编写
火狐主页
搜索栏
广告
网页导航
洋葱新闻
官方新闻
读书推荐
关于我们
现在开始编写.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
测量出左边距到目标位像素距离
#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;margin-left:169px;}
设定一个大的DC盒子,用于放置其他盒子
.diva{/*class选择器以.开头*/width:1016px;height:583px;border:1px solid black;margin-left:169px;/*外边距右移*/}
设计四个小盒子
.div1{width:700px;height:250px;border:1px solid black;background:#FFC90E;margin-top:10px;float:left; /*左浮动，由于div是块元素会占行所以使用左浮动*/}.div2{width:250px;height:250px;border:1px solid black;background:silver;margin-left:740px;margin-top:10px; /*外边距下移*/}
再写最后一个DC盒子
#spt{width:1366px;height:120px;border:1px solid black;background:#00A2E8;}
整体效果就出来了
css的整体代码
*{ margin:0px; padding:0px; }#spe{ height:36px; width:1366px; border:1px solid black; background:#00A2E8;}#sea{width:1366px;height:109px;border:1px solid black;background:#99D9EA;}#ads{width:1016px;height:63px;border:1px solid black;background:#ED1C24;margin-left:169px;}.diva{width:1016px;height:583px;border:1px solid black;margin-left:169px;}.div1{width:700px;height:250px;border:1px solid black;background:#FFC90E;margin-top:10px;float:left;}.div2{width:250px;height:250px;border:1px solid black;background:silver;margin-left:740px;margin-top:10px;}#spt{width:1366px;height:120px;border:1px solid black;background:#00A2E8;}
关于盒子的概念，我做了一个ppt如图：
