*********************************************************************

重要:重新审视的相关知识

/*
    妙味官网:www.miaov.com技术交流:bbs.miaov.com1.ps查看圆角度数,border-radius:;  选择->修改-> 平滑6px2.渐变-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";  IE9+background:#f9f9f9;  IE 6 7 8可见3.初始化样式,样式分为:公共提取和私有样式4.IE6 7下的margin-buttom失效,外层包裹用padding-buttom实现5.完整整个布局,就像盖房子的框架已好,接下来就是添砖加瓦,上涂料细节,美化了6.box-shadow:1px 0px 2px rgba(176,176,176,0.3) ;}7.从ps里面量图片宽高时,不要量边框,通常是1px;8.利用边框三角形绘制(ie6不支持).triangle_up{position:absolute; width:0px; height: 0px; overflow:hidden; border-left:20px solid transparent; border-right: 20px solid transparent; border-bottom:20px solid #ca0339;}9.psw网格线 :编辑->首选项->参考线,网格,切线,可以调整密度。F8信息框,F7显示图层M矩形选框10.background:#fff url() repeat-x left top fixed(设置固定背景图片); 可以完全取background-image.11.ps测行高,上一行的行底到下一行的行底= line-height12.各个模块的距离要和设计师给的一样设计图大小,做一个小模块都要在ps上测试,否则到后期会偏差很多;13. 360。<sup>。</sup> 重新认识 绝对absolute,相对relative定位;14.公共tab,加上position:relative,解决ie6.tab { height: 25px; border-bottom:1px solid #dadada; padding:0 10px;}.tab ul { height:26px; margin-bottom:-2px; position:relative; background:pink;}15.结构化布局:结构一致的先把公共的部分提取出来,私有的用命名空间增加对应区域样式;16.做精灵图时:要分块分区,不是一味的将所有小图都放在一张图片上,合成时要注意规则排放,方便定位;17..list_section li a{ float:left; color:#333; text-indent: 14px;}  /*解决 a 上添加 text-indent(起作用的条件)18.ie6 li里面有浮动,会有3 4px的bug  解决vertical-align:middle;19.列表公共模块(模块化思想)20. .pic_list li { overflow:hidden; }21.随时截屏,放到ps里面,透明度降低,与设计图对比重合度,再量距离;23.单词间距 word-spacing:10px;24.ie6 要求高不得小于19px,用溢出隐藏解决;.today_info span{ width: 8px; height: 14px; overflow: hidden;25.鼠标移入移除:.bbs .active;鼠标未移入原本不需要显示的让他display:none 隐层; 设置.bbs .active 鼠标移入时,display:block显示;26.img{width: ; height: ;} 图片来要定义图片大小,防止后台上传的图片大小不一致;27.要写上空的value,否则会在添加默认"提交";<input type="submit" class="btn"value="" />*/

*************************************************************************************************************

1.界面展示

源码,相关视频链接

  2.1感谢妙味课堂视频:http://2017.miaov.com/v_show/1074

  2.2我的源码链接:链接: http://pan.baidu.com/s/1i4RQn5N 密码: gw8h (所有资源)

*************************************************************************************************************************

2.部分jq动画功能

  切换搜索框

***********************************************************

updata文字弹性滑动

***********************************************************

options选项卡

**********************************************************

fade焦点图自动轮播

***********************************************************

    日历提醒

***********************************************************

BBS高亮显示

***********************************************************

鼠标半透明提示

*****************************************************************************************************************************

3.声明

  2.1  IE6+,chrome fixfox。IE8以下没有阴影,圆角,IE8没有阴影

  2.2  感谢妙味,提供的学习资源;

  2.3  使用jQuery1.11.0

【作者】:轻轻走143
【出处】:http://www.cnblogs.com/qingqingzou-143/
【声明】:所有博文标题后加(share)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢!

转载于:https://www.cnblogs.com/qingqingzou-143/p/6742982.html

妙味,结构化模块化 整站开发my100du相关推荐

  1. 慕课网实战项目《WebAPP书城整站开发》笔记一:底部边栏样式实现

    推荐IMOOC实践课程: <WebAPP 书城整站开发> 效果图             下边栏正常状态             下边栏变化状态             任务分析:   ( ...

  2. 结构化开发方法和面向对象开发方法的比较

    1. 两者基本思想的比较 1.1结构化方法的基本思想 结构化方法是一种传统的软件开发方法,它是由结构化分析.结构化设计和结构化程序设计三部分有机组合而成的.结构化设计方法是以自顶向下,逐步求精,模块化 ...

  3. c语言是结构化 模块化,c语言是完全模块化和结构化的语言,怎么理解,什么是模块化和结构化...

    满意答案 佩佩韩衣吧 2013.06.12 采纳率:55%    等级:12 已帮助:29322人 所谓模块化,简单的理解,就是说你的程序是由相互之间相对独立的模块组成.那么具体的说,一个稍微大一点的 ...

  4. Beego使用orm自动创建表结构(结构化目录--亲团队开发)

    关于 Beego 框架,这里不再赘述.beego官方网站 一.什么是orm,为什么要用orm? orm (Object-relational mapping),中文翻译为对象关系映射,是一种为了解决面 ...

  5. 妙味课堂 Html5实战打怪游戏开发教程

    <H5游戏打怪游戏开发> ├1-移动端H5游戏开发--第一集,多层圆环背景_.mkv ├2-移动端H5游戏开发--第二集,第一屏移动端布局_.mkv ├3-移动端H5游戏开发--第三集,第 ...

  6. 【WebGIS全栈】从0到1开发整站——旅游足迹地图网站

    介绍 本专栏起初定位群体为初学者,目标是认识 WebGIS,以及快速上手 WebGIS 前端开发,Demo 也是比较基础的,为了能进阶学习,现在计划提升一下Demo的难度,开发一个完整的足迹网站. 专 ...

  7. 我被“非结构化数据包围了”,请求支援!

    阿里妹导读:非结构化数据的内容占据了当前数据海洋的80%.换句话来说,就是我们都被"非结构化数据"包围了.由于非结构化数据的信息量和信息的重要程度很难被界定,因此对非结构化数据的使 ...

  8. 电子病历结构化发展路线图谱

    电子病历结构化发展路线图谱 2014-04-06 随着医院信息化的发展,国内医院信息化建设重点逐步从管理信息系统转到临床信息系统.在临床信息系统的应用中发现,所有的临床信息最终都要反映到患者病历中.病 ...

  9. 天猫整站Springboot 从零开始搭建(四(2,3))——后台分类管理功能开发

    3 后台分类管理 3.1概述 到这里就开始讲解功能开发了. 开发整站的顺序,通常来说还是按照依赖性来进行,前端需要的数据,都要先通过后台的功能维护在数据库中,才可以拿到. 所以,先进行后台功能的开发, ...

最新文章

  1. rtsp 分辨率信息_SDP在RTSP、国标GB28181、WebRTC中的实践
  2. 服务器操作系统字符集,设置服务器字符集
  3. 【ArcGIS风暴】何为动态投影?这次全面为您揭开ArcGIS中动态投影的神秘面纱!
  4. 基础数学落后与高端人才流失
  5. Vue项目开发过程中解决跨域问题(vue.config.js结合axios)
  6. android 扫描重复文件,Android Gradle在APK META-INF中复制的重复文件
  7. 【IEEE独立出版/EI稳定检索】信息科学、计算机技术与交通运输征稿倒计时
  8. 世界级的安卓测试开发流!
  9. Java面试准备(一)
  10. 家庭局域网的组建(2台或2台以上)
  11. 最新WordPress微信小程序社区论坛源码多端应用
  12. #Python#错误之ModuleNotFoundError: No module named ‘yaml‘
  13. PostGIS系列课程之空间约束(三)
  14. 正太分布函数和反函数 标量值函数 (借鉴)
  15. vscode 代码格式化及快捷键
  16. Python 3 怎么快速搭建服务器
  17. 每日自动签到签退的程序
  18. 笔试题33——双队列解决全排列拼接问题
  19. 万代南梦宫在中国推出游乐设施新店铺
  20. pfSense book之DNS解析

热门文章

  1. 医院系统实施-经验整理(持续更新)
  2. vue + node + webrtc 实现多人音视频通话
  3. rawResponse must be successful response
  4. Spring Boot教程(二十):Spring Boot使用String Task定时任务
  5. chrome浏览器安装markdown浏览插件
  6. Android安卓签名打包原理,步骤详细讲解(debug,release区别.V1,V2区别)
  7. MTK手机平台添加资源和菜单的方式(转)
  8. 实战破解某高校校园网密码——你的账号安全吗?
  9. 三线国产手机“剑走偏锋”
  10. mysql到pg怎么高效_利用Navicat高效率postgresql转mysql数据库