`

CSS常用样式总结积累

    博客分类:
  • CSS
 
阅读更多
1.把一个链接设置成一个按钮

.saveButton{
	    border-radius: 0.5em;
	    box-shadow: 0px 0px 1px ;
	    cursor: pointer;
	    display: inline-block;
	    font: 12px/100% Arial,Helvetica,sans-serif;	    
	    padding: 3px 12px;
	    text-align: center;
	    text-decoration: none;
	}


text-align 设置或检索对象中内容的水平对齐方式

text-decoration 检索或设置对象中的文本的装饰 none表示无下滑线

padding 内补白 上下3px 左右12px

box-shadow 阴影效果 水平阴影 0px 垂直阴影 0px 阴影效果 1px

cursor 设置鼠标移动过去的图标类型

display 设置对象如何显示 inline-block指定对象为内联块元素

2.设置背景图片

.box_top_left{
		width: 42px;
		height: 40px;
		background: url("box_left.png") no-repeat;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	
	.box_top_right{
		width: 10px;
		height: 40px;
		background: url("box_right.png") no-repeat;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	
	.box_top_center{
		height: 40px;
		background: url("box_center.png") repeat-x;
		position: absolute;
		left: 42px;
		top: 0px;
		right: 10px;
	}



width
设置对象的宽度

height 设置对象的高度

background 设置背景 url用于指定背景图片的位置 no-repeat表示背景图像不平铺 repeat-x
背景图像在横向上平铺 repeat-y背景图像在纵向上平铺


position 检索对象的定位方式 absolute位置已固定 left距离左边的位置 top距离上面的位置 right距离右边的位置 bottom距离底部的位置


3.实现tab切换

<div id="tabs0">
		<ul class="menu0" id="menu0">
			<li onclick="setTab(0,0)" class="hover">新闻</li>
			<li onclick="setTab(0,1)">评论</li>
			<li onclick="setTab(0,2)">技术</li>
			<li onclick="setTab(0,3)">点评</li>
		</ul>
		<div class="main" id="main0">
			<ul class="block">
				<li>新闻列表</li>
			</ul>
			<ul>
				<li>评论列表</li>
			</ul>
			<ul>
				<li>技术列表</li>
			</ul>
			<ul>
				<li>点评列表</li>
			</ul>
		</div>
	</div>


#tabs0 {
	height: 200px;
	width: 400px;
	border: 1px solid #cbcbcb;
	background-color: #f2f6fb;
	margin-top: 2px;
}

.menu0 {
	width: 400px;
}

.menu0 li {
	display: block;
	float: left;
	padding: 4px 0;
	width: 100px;
	text-align: center;
	cursor: pointer;
	background: #FFFFff;
}

.menu0 li.hover {
	background: #f2f6fb;
}

#main0 ul {
	display: none;
}

#main0 ul.block {
	display: block;
}


function setTab(m, n) {
		var tli = document.getElementById("menu" + m)
				.getElementsByTagName("li");
		var mli = document.getElementById("main" + m)
				.getElementsByTagName("ul");
		for (i = 0; i < tli.length; i++) {
			tli[i].className = i == n ? "hover" : "";
			mli[i].style.display = i == n ? "block" : "none";
		}
	}


标题中点击的那个tab的 li颜色与内容的颜色相同

点击后的函数遍历li 找到对应的然后改变显示方式

4.按钮样式

.btn {
	display: inline-block;
	padding: 3px 8px;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

class = 'btn'


5.设置背景图片
.examicon-attaches{
	background:url('../images/icon/attaches.png') no-repeat center center;
}
.examicon-onlineexam{
	background:url('../images/icon/onlineexam.png') no-repeat center center;
}
.examicon-eval{
	background:url('../images/icon/eval.png') no-repeat center center;
}
.examicon-help{
	background:url('../images/icon/help.png') no-repeat center center;
}
.examicon-plan{
	background:url('../images/icon/plan.png') no-repeat center center;
}
.examicon-myplan{
	background:url('../images/icon/myplan.png') no-repeat center center;
}


分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Div+CSS网页样式与布局从入门到精通 实例

    在网页设计领域,Div+CSS是构建网页布局和样式的主流技术。本教程"Div+CSS网页样式与布局从入门到精通"旨在帮助初学者掌握这一核心技术,通过实例深入理解其工作原理和应用技巧。下面将详细介绍Div和CSS的基础概念、...

    常用CSS缩写语法总结

    本文将深入探讨一些常用的CSS缩写语法,帮助你优化CSS代码,提高工作效率。 1. 属性简写:CSS允许我们对某些属性进行简写,比如`background`、`font`和`border`等。例如,`background: #fff url(image.png) no-...

    CSS全攻略与CSS实用常用参考源码特效实例

    本资料包“CSS全攻略与CSS实用常用参考源码特效实例”是为帮助开发者深入理解和掌握CSS而精心编排的资源集合,旨在提供全面的指导和丰富的实践案例。 首先,我们来看看“CSS全攻略”部分。这部分内容通常会涵盖以下...

    CSS 样式表设计的基础教程

    **CSS常用属性** 1. **文本样式** - `font-family`: 设置字体 - `font-size`: 设置字体大小 - `font-style`: 设置字体样式(如`italic`) - `font-weight`: 设置字体粗细 - `font-variant`: 控制小型大写字母 ...

    DIV+CSS难点之经验总结(技术文档).

    在网页设计领域,`DIV+CSS`是一种常用的技术组合,用于实现页面布局和样式控制。`DIV`元素作为容器,可以容纳其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的样式、位置和布局。然而,尽管其在理论上相对...

    DIV+CSS 网页布局常用基础知识

    在网页设计中,`DIV+CSS`是一种常见的布局技术,它通过CSS(层叠样式表)来控制HTML中的`&lt;div&gt;`标签和其他元素,实现网页的结构与样式分离,提高页面的可维护性和可访问性。下面我们将深入探讨`DIV+CSS`网页布局的...

    有利于 的CSS排版

    1、CSS文件命名规范 全局样式:global.css;...下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了。)

    css模板工具

    描述中提到的是个人积累的常用CSS,这可能意味着这个压缩包中的"css1"文件是一个个人CSS代码库,包含了一些作者在项目开发过程中经常使用的CSS样式代码片段。这样的代码库对于熟悉作者工作方式的人来说可能会有所...

    div+css.rar_CSS html_CSS DIV html_DIV_DIV CSS_html CSS

    HTML中的`&lt;div&gt;`元素作为布局容器,是CSS布局中常用的基础元素,可以承载各种内容并进行样式控制。 - 通过`class`或`id`属性,HTML元素可以与CSS规则关联,实现精确的样式定位和应用。 3. **CSS布局技巧**: - `...

    Css所有属性

    本篇文章将深入探讨CSS的常用属性以及所有属性,帮助你全面理解和掌握这一强大的样式语言。 首先,我们来关注CSS的**基础属性**: 1. **颜色属性**:包括`color`用于设置文本颜色,`background-color`用于设置背景...

    div css.pdf

    7. **Div+CSS常用编辑工具** - **Sublime Text**:轻量级代码编辑器,支持多种编程语言,包括HTML和CSS。 - **Visual Studio Code**:微软出品的全能编辑器,拥有丰富的插件支持。 - **Atom**:GitHub推出的开源...

    div+css布局中常用方法汇总.pdf

    《div+css布局中常用方法汇总》 在网页设计中,div+css布局是一种常见的页面构建方式,它能够实现灵活的网页布局,并提高网页的可维护性和可访问性。以下是一些div+css布局中常用的技术和技巧: 1. **文本框...

    HTML+CSS网页开发技术精解.pdf

    最终,想要掌握HTML和CSS技术精解,需要通过学习、实践和不断的项目经验积累。这包括理解W3C标准,掌握最佳实践,以及学习如何调试和优化网页性能。网页开发者应持续关注网络技术的发展,如HTML5和CSS3的新特性,...

    XHTML CSS基础知识

    【XHTML CSS基础知识】是网页设计中的核心概念,它们构成了网页的基本结构和表现方式。...CSS,Cascading Style Sheets,用于控制网页元素的...随着经验的积累,你将能熟练地使用XHTML CSS来创建符合Web标准的现代网页。

    常用java标签积累

    - `link`标签用于引入CSS样式表,`&lt;link type="text/css" rel="stylesheet" href="..."&gt;`。 5. jQuery Validate插件: 这是一个强大的表单验证插件,通过配置规则来验证表单字段,如示例中的`$("#registerForm")....

    HTML学习:css命名规则

    ### HTML学习:CSS命名规则详解 ...本文介绍了几种常用的命名规则和技巧,并给出了CSS文件组织的建议。希望初学者能够在实践中不断积累经验,形成自己的一套命名体系,为今后的学习和发展打下坚实的基础。

    韩顺平轻松搞定网页设计(html.css.js)(完整版)

    **DIV+CSS**是一种常用的网页布局技术,主要通过CSS控制DIV元素的布局和样式。 - **盒子模型经典案例**:通过调整CSS中的盒模型属性(如padding、margin等),制作各种复杂的网页布局。 - **仿Sohu首页布局**:通过...

    css十年来笔记

    在长达十年的工作经验中,积累了大量关于CSS(层叠样式表)的实用技巧与心得。本文旨在总结这些经验,并将其提炼为几个重要的知识点,帮助读者更好地理解和运用CSS。 #### 二、CSS基础知识回顾 1. **CSS选择器**:...

Global site tag (gtag.js) - Google Analytics