`

CSS3 初始化的思路

 
阅读更多
/*css 初始化 begin */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
	margin: 0;
	padding: 0;
}
fieldset, img, input, button {
	border: none;
	padding: 0;
	margin: 0;
	outline-style: none; /*去掉input 获取焦点后的外框环绕*/
}
ul, ol {
	list-style: none;
}
/*去掉原样式中的小黑点*/
input {
	padding-top: 0;
	padding-bottom: 0;
	font-family: "SimSun", "宋体";
}
select, input {
	vertical-align: middle;
}
/*输入字居中显示*/
select, input, textarea {
	font-size: 12px;
	margin: 0;
}
/*不允许用户缩放*/
textarea {
	resize: none; /*去掉右下角*/
}
/*防止拖动*/
img {
	border: 0;
	vertical-align: middle; /*  去掉图片底部默认的3像素空白缝隙*/
}
table {
	border-collapse: collapse; /*合并外连线*/
}
body {
	font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*unicode(统一码)的写法,宋体的写法*/
	color: #666; /*150%基于当前字体尺寸的百分比行间距*/
	background: #fff;
}
.clearfix:before, .clearfix:after {
	/*清除浮动,最好最标准的写法*/
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
	visibility: hidden;/*保留位置*/
}
.clearfix {
 *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
}
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #C81623;
}
h1, h2, h3, h4, h5, h6 {
	text-decoration: none;
	font-weight: normal;
	font-size: 100%;
}
s, i, em {
	font-style: normal;/*将原有的样式去掉*/
	text-decoration: none;/*去掉下划线,但也可以去掉中划线(贯穿线)*/
}
.col-red {
	color: #C81623 !important;/*京东主色调*/
}
/*公共类*/
.w {
	/*版心 提取 */
	width: 1210px;
	margin: 0 auto;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.al {
	text-align: left;
}
.ac {
	text-align: center;
}
.ar {
	text-align: right;
}
.hide {
	display: none;
}
/*css 初始化 end*/

 

分享到:
评论

相关推荐

    纯JS和CSS3超酷3D翻转幻灯片特效源码.zip

    3. JavaScript文件:实现了幻灯片的逻辑控制,如初始化、事件处理、动画控制等。可能还包含了类或对象,以封装幻灯片组件的功能。 此外,为了实现更丰富的交互,开发者可能还使用了一些现代前端框架或库,如jQuery...

    jquery css3 transform属性实现电子钟表走动代

    3. **jQuery初始化**:在页面加载完成后,使用jQuery获取当前的时间,并根据时间调整指针的位置。`$(document).ready()`函数用于确保在执行任何操作之前,DOM已经完全加载。 4. **旋转指针**:使用CSS3的`transform...

    jquery+css3打造一款ajax分页插件(自写)

    插件的调用非常简单,通过jQuery的$.fn.page函数来初始化分页,传入相应的参数。页面加载时,先获取总的数据量,再调用分页插件进行初始化。 #### 8. 代码重用和扩展性 作者提到可以调用多个page,这意味着插件设计...

    jQuery和css3手机APP新功能展示标记动画特效

    1. **初始化** - 页面加载完成后,`jQuery`的`$(document).ready()`函数会被调用,确保所有元素都已加载完成。 2. **元素选取** - 使用`jQuery`选择器选取需要标记的元素,例如`$('.new-feature')`。 3. **应用动画*...

    CSS3+Animation实现鼠标滑过按钮背景动画特效源码.zip

    在IT行业中,CSS3是网页样式表语言的第三版,它极大地扩展了其前身CSS2的能力,提供了更多现代化的视觉效果和交互体验。本资源"CSS3+Animation实现鼠标滑过按钮背景动画特效源码.zip"正是利用CSS3的动画(Animation...

    CSS工具-CSS工具

    - **技术原理**:主要利用CSS3的`border-radius`属性来实现圆角效果。 #### 四、Ruthsarian Layouts - CSS页面布局模板 - **功能介绍**:提供了6种不同的CSS页面布局模板,涵盖颜色、标题等多个方面。 - **应用场景...

    CSS模板

    - **学习参考**:对于初学者,模板提供了现成的代码实例,可以深入研究并理解CSS布局和样式化技巧。 - **激发创意**:即使是有经验的设计师,也可以从中获得新的设计思路,避免陷入设计瓶颈。 5. **模板的多样性*...

    div css3 transition属性鼠标悬停导航菜单折叠展...

    但基本的思路就是利用CSS3的`transition`属性来实现平滑的过渡效果。 为了更好地理解和实践这个概念,你可以打开提供的压缩文件`texiao7123_1560681127`,里面可能包含了一个示例代码,通过查看和编辑代码,你将更...

    cssLoading-30.zip

    3. CSS3过渡(transition):除了动画,CSS3还引入了过渡效果,它可以在两个样式之间创建平滑过渡。例如,当用户鼠标悬停在元素上时,可以改变元素的颜色或大小,过渡属性可以控制这个变化的速度和持续时间。 4. ...

    CSS标签切换代码实例教程 比较漂亮.

    <li><a href="javascript:void(0)" onclick="javascript:woaicssq(3)">CSS 布局实例 </a></li> <li><a href="javascript:void(0)" onclick="javascript:woaicssq(4)">WEB 标准化</a></li> ;"> ;"> ...

    实用的图片切换代码(css+jQuery)

    // 初始化显示第一张图片 $images.not(':first').hide(); }); ``` 这段代码中,`$(document).ready`确保所有HTML元素加载完成后才执行jQuery代码。`$images`选择器获取所有图片元素,`currentIndex`用于跟踪当前...

    js、jquery、css三种方法实现的瀑布流

    1. **初始化布局**:创建多个列,将元素分配到各个列中。 2. **计算列高**:遍历所有列,找到最高的列。 3. **重新布局**:将新的元素添加到最高列的底部。 4. **监听滚动**:同样,可以监听滚动事件,当到达页面...

    react-css-collapse-源码.rar

    《React CSS Collapse 源码解析》 React CSS Collapse 是一个用于在React应用程序中实现可折叠内容区域的组件库。这个库的核心功能是提供一种优雅的方式...同时,这也是学习React组件化开发和CSS动画的一个优秀实例。

    HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码

    - 初始化时创建`GuaGuaLe`类的实例,该类用于控制刮刮乐的逻辑和显示效果。 - 在`GuaGuaLe`类中,通过监听mouse事件,根据鼠标的位置动态地清除front canvas上的矩形区域,实现刮奖效果。 在实现过程中,需要注意的...

    万年历html单页源码

    【万年历html单页源码】是一种网页开发项目,主要由HTML、CSS和JavaScript技术构建,用于在单一网页上展示完整的日期信息,覆盖多个世纪,...同时,也可以借鉴其设计思路,为自己创建更多个性化和功能丰富的日历应用。

    第34章 项目1-博客前端:封装库--CSS选择器[下]1

    - 初始化`elements`数组用于存储最终匹配的元素,`childElements`用于存储当前层匹配到的元素,`node`数组则存储上一层的元素集合。 - 遍历每个选择器部分,根据其首字符判断选择器类型(ID、类名或标签名): - ...

    纯js和css完成贪吃蛇小游戏demo

    文档中提到的`for`循环用于初始化游戏区域,创建了100个用于蛇身体移动的格子。 - 在创建格子时,使用`document.createElement`创建`div`元素,并通过`document.appendChild`添加到游戏区域中。 最后,设置了两个...

    ExtJs 3.1的一些实例源码.zip

    学习这些示例源码,你可以了解如何初始化ExtJs应用、创建和配置组件、管理数据和事件、以及应用CSS3样式。这将有助于提升你在使用ExtJs 3.1开发Web应用时的技能和效率。对于初学者,可以按照每个示例的逻辑逐步分析...

Global site tag (gtag.js) - Google Analytics