从CUMT校园导航出现的问题看CSS布局设计(一) C…
2018-06-24 02:13:24来源:未知 阅读 ()
先说说做的这个校园导航系统值得一提的内容:
1. 二级菜单栏 、iframe内嵌窗口(样式设计、用hover做效果)
2. 高德地图API (自定义底图样式、弹跳点、信息窗体、线路导航)
3. DOM里的函数 getElementById( ); (看了《JS DOM编程艺术》)
4. 返回顶部 JS实现
然后是小目标:
1. 把博客园的样式自定义调整一下(已完成),算是对前面内容的回顾与联系,同时了解新特性。
2. 用 bootstrap / ps
3. 下学期的自由时间把《JS高级程序设计》过一遍。
进入正题:当初这个页面做完老师只是看了一下,也没有给评价,反倒是在另外一门专业课上展示时一位计算机出身的老师给了不少中肯的建议。首先是没有做自适应窗口,用户更改页面大小后内容排列就变得混乱,其次是可以考虑加后台数据库,让用户登录。同时自己也发现了一些问题,刚开始做的时候JS与CSS没有与HTML分离,都写在了同一个page里。不同类选择器之间的区分也不了解,几乎都是id选择器。还有颜色搭配、设计都比较糟糕,div用的很杂乱。做的那时候不懂,现在想来其实这些都是前端的基本问题。
CSS盒模型,这是排版要用到的核心基础知识。
1. 外边距的合并,两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。行内框、浮动框或绝对定位之间的外边距不会合并。父子级之间的margin传递。
2. 宽高和margin属性值可以设置为auto,auto时宽度会尽可能宽,高度则会尽可能窄,也就是元素的高度尽量恰好包含其内联内容的高度。
3. 弹性布局可用相对单位em,它的单位长度是根据父元素的文本垂直长度 font-size 来决定的(1em默认为16px),使用在线工具PXtoEM(http://pxtoem.com/)可以轻松快捷的根据px计算出所需要的em值。
3. 考虑兼容,在不同浏览器内的表现,要加浏览器前缀 -moz-border-top-colors.
4. box-sizing实际是对应于ie盒模型(border-box,不改变整体大小)和w3c标准盒模型(content-box)
5. box-shadow添加阴影效果,spur调整模糊度,spread确定模糊尺寸。
6. 之后遇到的样式调整细节问题都会补充在这篇里
7. CSS三栏布局7种实现 https://juejin.im/entry/5895703b5c497d0056f247dd
8. CSS像素 https://juejin.im/entry/58b931d1128fe1007e44f918
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS导航栏下划线跟随效果 2020-06-11
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
- Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏 2020-04-16
- flex布局实例--实现底部导航 2020-03-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash