妙味,结构化模块化 整站开发my100du
*********************************************************************
重要:重新审视的相关知识
/*
妙味官网:www.miaov.com
技术交流:bbs.miaov.com 1.ps查看圆角度数,border-radius:; 选择->修改-> 平滑6px
2.渐变
-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-height
12.各个模块的距离要和设计师给的一样设计图大小,做一个小模块都要在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)的表示收集的他人优秀文章,其余的则为原创。欢迎转载,但请在显要位置显示本文链接,并保留本段声明,否则追究法律责任,谢谢! |
妙味,结构化模块化 整站开发my100du的更多相关文章
- CMM模型,结构化开发方法和面向对象开发方法的比较,UML(统一建模语言),jackson开发方法
CMM模型 一.CMM简介 CMM,英文全称为Capability Maturity Model for Software,即:软件成熟度模型. CMM的核心是把软件开发视为一个过程.它是对于软件在定 ...
- 记一次完整的pc前端整站开发
我所做的项目是一个线上的旅游平台,当然不是大家耳熟能详的那些旅游平台了,项目刚开始也没有必要去评价它的好坏,在这里我就不多说了~这是线上地址有兴趣的同学可以去看看(www.bookingctrip.c ...
- App 组件化/模块化之路——构建开发架构思路
App 组件化/模块化开发架构思路 随着业务的发展 App 开发技术也越来越成熟,对开发者来说 App 代码量也迅速地增长到一个数量级.对于如何架构 App 已经每个开发者面临的实际问题.好的架构可以 ...
- DEDE整站动态化或整站静态化设置方法,织梦栏目批量静态/动态方法
跟版网建站接到一个朋友提问,100多各栏目全部要从动态变成静态,里面的文章也要静态化,如何更快捷的设置dede的静态化或者动态化呢? 直接用DEDE后台的SQL命令行工具, SQL语句: DEDE整站 ...
- 【转】移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- Android 组件化/模块化之路——在展示层搭建MVP结构
Android 组件化/模块化之路——在展示层搭建MVP结构 什么是MVP Model–View–Presenter (MVP) 源于 Model–View–Controller (MVC) 的结构设 ...
- .NET Core开发日志——结构化日志
在.NET生态圈中,最早被广泛使用的日志库可能是派生自Java世界里的Apache log4net.而其后来者,莫过于NLog.Nlog与log4net相比,有一项较显著的优势,它支持结构化日志. 结 ...
- 【整站源码分享】分享一个JFinal3.4开发的整站源码,适合新手学习
分享这个源码是14年开发上线的<威海创业者>站点的全套整站源码,前后端都在一个包里.当时开发使用的是JFinal1.4,最近改成了JFinal3.4.使用的JSP做的页面.有一定的参考价值 ...
随机推荐
- RPC服务框架dubbo(四):Dubbo中Provider搭建
1.新建Maven Project, 里面只有接口(dubbo-service) 1.1 为什么这么做? RPC框架,不希望Consumer知道具体实现.如果实现类和接口在同一个项目中,Consume ...
- 安卓-APP安装后多个图标的解决
原因是在不同Activity的intent中配置了多个LAUNCHER. <intent-filter> <action android:name="android.int ...
- web压力测试指标
1.TPS每秒钟完成的web请求响应数量TPS=并发数/响应时间TPS是衡量系统性能的重要指标 2.并发数时间段内,系统同时处理的web请求响应数量 3.响应时间所有web请求处理完毕的时间 4.吞吐 ...
- Nginx - Windows下Nginx初入门,附CentOS下Nginx的安装
公司刚使用nginx,预先学习下.鉴于机器没有Linux环境,在Windows熟悉下. 下载 目前(2015-07-11),nginx的稳定版本是1.8.0,在官网下载先,windows版的nginx ...
- CSS(七):浮动
一.float属性取值:left:左浮动right:右浮动none:不浮动 先看下面的一个例子: <!DOCTYPE html> <html lang="en"& ...
- Scala + Play + Sbt + Protractor = One Build
欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play framework做后端API,前端用Angular JS. 因为用了Scala和Play,构 ...
- C++ c++与C语言的区别(空结构体)
//区别⑨:空结构体声明(C++版本) #include<iostream> using namespace std; struct A{}; class B{}; void main() ...
- 假设A.jsp内设定一个<jsp:useBean>元素:
假设A.jsp内设定一个<jsp:useBean>元素: <jsp:useBean id=”bean1” class=”myBean” /> 下列哪一个为真?(选择1项) A. ...
- Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。
一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:
- VB.NET多线程入门
近期项目中遇到了一个处理速度慢阻塞用户界面操作的问题,因此想用多线程来解决. 在处理数据的循环中,新建线程,在新建的线程中处理数据.多线程同一时候处理数据,以此来达到加速的目的,使用户界面操作变得流畅 ...