div css学习心得总结模仿网站篇
2019年11月22日
| 标签:
今天用div css 模仿公司的网站 总结下心得
首先要有大局观 看看网站从上到下 可以横着切成几个部分 例如我的例子中他就分 head main more info footer
这个4个部分 然后要用一个大的div 叫container的把这4个都包起来 方便整个页面的居中定位和以后增加背景色
然后这个4个部分都可以继承这个container的宽度
这里有个知识点 如果div里面没内容的话 div的背景色是不现实
只用增加一个高度属性就可以 每一个部分我们可以增加一个4边的图片的边框 边框的制作也是有技巧 我们也是横着
切3次 顶部边框一个长的，中间边框其实就是左柱 和右柱 向下填充用的是background:url() repeat-y，这里注意下比如说这个head 里面内嵌3个 自身的背景就用边框的左右 里面内嵌的第一个是边框顶部 第2个是边框底部;就可以把这4个
部分加漂亮的外边框（有阴影 有反光的 切3刀就可以）
有了整体定位以后 还有内部的定位问题 如果一个大的div里面嵌套小的div 你要定位的话记得小div用position：relative 这养可以定位 父子关系，兄弟关系的div 及同级别的 是可以用margin定位的
还有ul li的问题li和ul都是内敛元素 可以用display：block来解决 定义高低 同时加上float：left 就可以横着了排列
css精灵 这个技巧很重要 方便把小的icon或者大的点图片合并在一个图里面 再通过background：url以及background：postion来显示 这样5个图片整合在一个图片里面 分别显示的时候 通过postion移动现实就可以配合li使用 效果更加
还有一些小的图表也可以的
今天用div css 模仿公司的网站 总结下心得
首先要有大局观 看看网站从上到下 可以横着切成几个部分 例如我的例子中他就分 head main more info footer
这个4个部分 然后要用一个大的div 叫container的把这4个都包起来 方便整个页面的居中定位和以后增加背景色
然后这个4个部分都可以继承这个container的宽度
这里有个知识点 如果div里面没内容的话 div的背景色是不现实
只用增加一个高度属性就可以 每一个部分我们可以增加一个4边的图片的边框 边框的制作也是有技巧 我们也是横着
切3次 顶部边框一个长的，中间边框其实就是左柱 和右柱 向下填充用的是background:url() repeat-y，这里注意下比如说这个head 里面内嵌3个 自身的背景就用边框的左右 里面内嵌的第一个是边框顶部 第2个是边框底部;就可以把这4个
部分加漂亮的外边框（有阴影 有反光的 切3刀就可以）
有了整体定位以后 还有内部的定位问题 如果一个大的div里面嵌套小的div 你要定位的话记得小div用position：relative 这养可以定位 父子关系，兄弟关系的div 及同级别的 是可以用margin定位的
还有ul li的问题li和ul都是内敛元素 可以用display：block来解决 定义高低 同时加上float：left 就可以横着了排列
css精灵 这个技巧很重要 方便把小的icon或者大的点图片合并在一个图里面 再通过background：url以及background：postion来显示 这样5个图片整合在一个图片里面 分别显示的时候 通过postion移动现实就可以配合li使用 效果更加
还有一些小的图表也可以的
发表评论
| Trackback
