欢迎使用CSDN-markdown编辑器
2016-06-03 17:02
323 查看
UI设计图转页面——问题及收获(5.31-6.3)
1.字体垂直居中(将高度设置为行高,可以自动实现文本垂直居中;)
2.从设计图中抠出来的图标,应用背景图片来进行设置(URL引入图片,再加入水平及垂直偏移量),再设置其显示的宽度及高度,图片就可以在网页中显示了(ps:应当注意,要设置背景图片的元素是否是行内元素,如果是,需使其display属性设置为inline-block或block。
3.将背景图片抠出来放在sprite图中,应合理排放。
4.网页的布局,如居中布局等,为方便后期维护应采用自适应布局;
5.右侧边框无法显示,因为未设置元素的高度;
6.类名的设置要有规律,为避免类名重复带来的不必要的麻烦(找不到问题根源在哪里;)
7.设置样式时,尽量少使用标签,多使用类名;
8.绝对定位元素的居中显示,可以使用{ left:50%; transform:translateX(-50%); }
9.为适应显示浏览器边框大小的变化,可设置页面主体内容宽度为最小宽度(min-width),当拖动浏览器边框使其显示范围小于最小宽度时,元素显示最小宽度;当拖动浏览器边框使其显示范围大于最小宽度时,元素会自动伸展,显示当前浏览器边框的宽度;
10.当使用绝对定位元素,使其覆盖某元素时,可设置透明度,使下方元素显示出来;
11.设计时,应先分析页面的整体布局,及使用的布局方法。
1.字体垂直居中(将高度设置为行高,可以自动实现文本垂直居中;)
2.从设计图中抠出来的图标,应用背景图片来进行设置(URL引入图片,再加入水平及垂直偏移量),再设置其显示的宽度及高度,图片就可以在网页中显示了(ps:应当注意,要设置背景图片的元素是否是行内元素,如果是,需使其display属性设置为inline-block或block。
3.将背景图片抠出来放在sprite图中,应合理排放。
4.网页的布局,如居中布局等,为方便后期维护应采用自适应布局;
5.右侧边框无法显示,因为未设置元素的高度;
6.类名的设置要有规律,为避免类名重复带来的不必要的麻烦(找不到问题根源在哪里;)
7.设置样式时,尽量少使用标签,多使用类名;
8.绝对定位元素的居中显示,可以使用{ left:50%; transform:translateX(-50%); }
9.为适应显示浏览器边框大小的变化,可设置页面主体内容宽度为最小宽度(min-width),当拖动浏览器边框使其显示范围小于最小宽度时,元素显示最小宽度;当拖动浏览器边框使其显示范围大于最小宽度时,元素会自动伸展,显示当前浏览器边框的宽度;
10.当使用绝对定位元素,使其覆盖某元素时,可设置透明度,使下方元素显示出来;
11.设计时,应先分析页面的整体布局,及使用的布局方法。
相关文章推荐
- 溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space
- js重写alert样式
- 很不错的CSS样式
- CSS list-style 属性
- textarea无边框文本透明背景文本样式
- 当我们在使用CSS的时候ID与Class有何不同?
- POI 设置Excel样式(转)
- CSS3制作漂亮的照片墙
- css+div
- css实现简单的水平垂直居中
- CSS样式学习笔记
- 总结一些每次写都要百度的样式 and so on
- css实现div高度填满整个空间
- CSS visibility 属性
- web响应式布局一些基本css 持续更新
- CSS3的REM设置字体大小
- CSS中的Position属性 overflow 属性
- CSS实现单行、多行文本溢出显示省略号(…)
- 来来来,看看别人的CSS样式重置表
- CSS3的nth-child选择器