对于css做的杂记

@charset "utf-8";

/*

*Created by lh on 2015/6/17.

*公用基础样式撰写

*/

/*默认样式 start*/

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,cite,em,img,strong,b,i,dl,dt,dd,ol,ul,li,

form,label,table,tbody,tfoot,thead,tr,th,td,canvas,embed,footer,header,menu,nav,time,audio,video{

margin:0;padding:0;list-style: none;

}

body{

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

}

a{text-decoration: none;}

img{border: none;}

label,

select,

button,

input[type="button"],

input[type="reset"],

input[type="submit"],

input[type="radio"],

input[type="checkbox"] {

cursor: pointer;

}

/*默认样式 end*/

/*实现文字隐藏类*/

.hide_font{

display:block;

font-size:0;

line-height:0;

text-indent:-9999px;

}

/*清除浮动的类*/

.clear{

padding: 0;margin: 0;

height:0;

clear:both;

}

/*ie兼容代码见有道云笔记 三角形制作公用基础样式 类*/

.all_triangle{

/*border-color: transparent  transparent red transparent;*/

/*border-width: 0 20px 20px 20px;*/

border-style: solid;

font-size: 0;

line-height: 0;

width: 0;

height: 0;

/*_border-left-color: white; /显示上下三角形时用左右 显示左右三角形时此处一下的代码中 left right 改为 top botttom/*/

/*_border-right-color: white;*/

/*_filter: chroma( color =white);*/

}

/*清楚边框类*/

.clear_BorOut{

border:none;

outline:none;

}

/*清除间隙 下级标签为块级元素 div*/

.clear_space{

font-size: 0;

}

.clear_space>div{vertical-align:middle;}

/*隐藏时 ie7 下失效的 类*/

.font_center{

overflow: hidden;

position: relative;

}

/*浮动 类*/

.float_left{float: left;}

.float_right{float: right;}

/*缩进标题 类*/

.title{

padding:0 5%;

width: 90%;

height: 30px;

}

/*边框与圆角样式*/

.border_radius{

border: 1px solid #f4f4f4;

border-radius: 5px;

}

/*表格 去掉固有样式 类*/

.table_innate_style{

border-spacing: 0;

border-collapse:collapse;

}

/*关于去掉标签字体默认样式 类*/

.font_default{

font-style: normal;

font-weight: normal;

}

时间: 2024-11-04 16:45:36

对于css做的杂记的相关文章

[转载] ul li css 做横向菜单

原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li

用纯CSS做的图片切换

前段时间做了一个用css做的图片切换.  我们先来看下html结构: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </he

纯css做三角形形状

1 /* create an arrow that points up */ 2 div.arrow-up { 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom,

【CSS】如何用css做一个爱心

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300

css做的后台管理页面,不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

纯css做幻灯片效果

css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS做幻灯片</title> </head> <style> @keyframes slide { 0% { backgroun

pure css做的手机版博客园(我自己博客)

源码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <!--缩放比例以及允许缩放--> 6 <meta name="viewport" content="width=device-width, in

css(九--杂记)

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的. 这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素.今天我们先来了解一下行内元素怎么进行水平居中? 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.(父元素和子元素:如下面的html代码中,div是"我想要在父容器中水平居中显示"这个文本的父元素.反

用CSS做的简单弹窗

最近在学习css,学习的时候发现,css是多么博大精深,是那么的神奇. 老师给了一个项目给我们做练习,以下我介绍一个用纯css简单做的弹窗 先看下其效果: 想整理下思路: 首先我设置了两个按钮,一个是打开弹窗,另外是关闭弹窗,这两个按钮用label关联到input:radio. 布局如下: <input type="radio" name="btn" id="close" class="btn"/> <div