css小例子源码_css是什么举个例子

⑴ 急求一组CSS源代码范例…拜托拜托啦～

不知道可不可以用js,我这里有一个以前收藏起来的贴上来，看看可不可以帮助你,下面是代码（图片可以自己换换）：
<style>
body{
padding: 0px;
margin: 0px;
font: 70% verdana, geneva, arial, helvetica, sans-serif;
color: #000;
text-align: center
}
#outer{
padding: 0px;
margin: 0px;
width: 800px;
text-align: center
}
#focus{
border: #ccc 2px solid;
margin: 0px;
padding: 0px;
padding-top: 15px;
background: url(/images/tile.gif) #eee repeat-y left top;
width:694px;
position: relative;
height: 180px
}
#description{
width:550px;
height:150px;
overflow:hidden;
margin-right:15px;
float:left;
}
.dis{
float:left;
width:40px;
text-align: center;
padding-top:50px;
cursor:pointer;
}
#description ul, #description li {
float:left;
display: inline;
margin: 0;
padding: 0;
height:150px
}
.view_pic a:active,
.view_pic a:visited,
.view_pic a:link {
display: inline;
margin: 0;
padding: 0;
padding-left: 5;
padding-right: 5;
text-decoration: none;
}
.view_pic a:hover {
color: #ffffff;
display: inline;
text-decoration: none;
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=LayerMenu style="display:none ; z-index: 1000; filter: alpha(opacity=0); position: absolute; left:384px; top:69px; width:126px; height:20px;border:1px solid green;background:#e11;padding:2px;font-size:12px"> 抱歉,已经到头了!
</div>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" />
</div>

<div id=description>
<div id="view_pic0" style="height:100px;width:1650px">
<ul id="view_pic" class=view_pic>
<li><a href="#"><img src="png-0001.png"/></a></li>
<li><a href="#"><img src="png-0002.png"/></a></li>
<li><a href="#"><img src="png-0003.png"/></a></li>
<li><a href="#"><img src="png-0004.png"/></a></li>
<li><a href="#"><img src="png-0005.png"/></a></li>
<li><a href="#"><img src="png-0006.png"/></a></li>
<li><a href="#"><img src="png-0007.png"/></a></li>
<li><a href="#"><img src="png-0008.png"/></a></li>
<li><a href="#"><img src="png-0009.png"/></a></li>
<li><a href="#"><img src="png-0010.png"/></a></li>
<li><a href="#"><img src="png-0011.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
</ul>
</div>
</div>

<div class="dis">
<img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
var ele=document.getElementById("description");
var w=ele.clientWidth;
var n=20,t=50;
var timers=new Array(n);
var k=0;doSlide(0);
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)MenuClick()
else{
k+=s;
var x=ele.scrollLeft;
var d=k*w-x;
for(var i=0;i<n;i++)(
function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t);
}
)();
}}
</script>
<SCRIPT language=javascript>
var intDelay=30; //设置菜单显示速度，越大越慢
var intInterval=5;
function MenuClick(){
LayerMenu.filters.alpha.opacity=0;
LayerMenu.style.display="";
GradientShow();
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval;
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay);
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval;
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay);
}
else {
LayerMenu.style.display="none";
}
}
GradientClose()
</SCRIPT>

⑵ 求完美CSS源码根据内容的高度增加而背景增加

div写的话比较麻烦，需要调用JS才能让2个div高度一样，你干脆直接用table写好了，我给你大概写个示例：

<div style="width:215px;">
<table border="0" cellpadding="0" cellspacing="5" width="100%">
<tr>
<td style=" background-color:red; color:#fff; height:50px; text-align:center; position:relative; ">
<div style=" position: absolute; top:0; width:100%; background-color:#000; color:#fff; text-align:center;">subnav</div>
<div style=" position: absolute; bottom:0; width:100%; background-color:#000; color:#fff; text-align:center;">contact</div>
</td>

<td style=" background-color:#000; color:#fff; height:400px; width:100px; text-align:center;">rightcol</td>
</tr>
</table>
</div>

这个我只做了IE的测试，没空做其他版本浏览器的测试，反正实现平行的div等高用table是最快捷的

其实写页面也不是说除了表格其他地方就绝对不用table布局，这种想法比较极端，任何的标签都会有其特有的功能或者说是方便之处，合理的使用才是最好的

⑶ 【满分在线等】求CSS或者html语言，一条虚线源码例子如下图可见！

1、<hr style="color:#ddd" />

2、<h1 style="border-bottom:1px solid #ddd;">温馨提示</h1>

⑷ 《CSS彻底研究》和《CSS/DIV》页面布局设计实例源码那位朋友提供一下

东西太大自己下载
http://www.verycd.com/topics/2797826/
http://www.verycd.com/topics/2741979/

看清楚视频和光盘都有！！！！！！！！！！！！！！！！

⑸ 如何使用CSS网页源码

首先，把css，js和图片放到你的项目文件夹对应位置上，然后把html中的代码复制到你的html文件中，在你的html文件中引入对应的css js文件，注意路径是否正确。然后根据你自己的需要，修改对应的css样式

⑹ css是什么举个例子

css是一种样式，是控制网页上包含的各种元素现实格式的手段。网页上的元素通常有图片，文字等。
比如控制文字的大小，颜色，粗细。控制图片的高度，宽度、透明度等。控制层的位置，浮动等。
总之，css几乎可以控制网页上所有元素的格式。
css的语法很简单。选择器：属性：参数。选择器就是元素的名称（可以这么理解）
上面这个例子是div+css+javascript做成的

⑺ CSS小例子(只显示下划线的文本框，像文字一样的按钮)

只显示下划线的文本框，像文字一样的按钮
body{
background-color:#daeeff;
/*
页面背景色
*/
}
form{
margin:0px;
padding:0px;
font:14px;
}
input{
font:14px
Arial;
}
.txt{
color:#005aa7;
border-bottom:1px
solid
#005aa7;
/*
下划线效果
*/
border-top:0px;
border-left:0px;
border-right:0px;
background-color:transparent;
/*
背景色透明
*/
}
.btn{
background-color:transparent;
/*
背景色透明
*/
border:0px;
/*border:0px
solid
#005aa7;边框取消
*/
cursor:pointer;
}
用户名:
密码:
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]

⑻ 求CSS下拉菜单源码

用CSS 快速定制下拉菜单

访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它实现了网页上下拉菜单, 不仅剩去了很多点击的麻烦, 并开创了一个网页设计的
未来之路.

我们知道, 通过 CSS 可以确切地定义一个 HTML 元素的样式，包括它的颜色、字体、边框、3D效果、滤镜等等，我们在考虑制作下拉菜单时，首先是想到 CSS 的定位技术，它精确的定位能力可以使我们放心的甚至是在三维空间设置位置和可见性。

CSS 定位使用"position"属性的两种方法定位 HTML 元素，这就是相对定位(relative)和绝对定位（absolute),相关的定位属性有9个：

position、left、top、width、height、clip、overflow、z-index、visibility

当使用"absolute(绝对)"定位元素时，该元素就被当作一个矩形覆盖物来格式化，格式化后的矩形区域就变成了一个可以放置其他 HTML 元素的容器，这个容器可以凌驾于 HTML 文档的布局之上，区域下面的文字和图形永远也无法环绕和透过该容器显示出来。这样被绝对定位了的元素我们称之为块级元素，在块级元素内放置的 HTML元素我们称之为子元素。

另外，当我们在移动鼠标时，具有对 HTML 元素有感应的 JAVA 动作是 onmouseup、onMouseOver、onMouseOut.

onmouseup 为鼠标点击之后的释放动作
onMouseOver 为鼠标经过时的动作
onMouseOut 为鼠标离开某区域时的动作.

除此之外，我们建立菜单都是为了表达一定的快捷的操作，通常是超级连接(URL).菜单上的每一条命令都应该对鼠标的行踪、点击有感应。所以，必须建立菜单对鼠标行为的多级捕获。首先是容器本身(块级元素)对鼠标经过时和离开时建立捕获，其次是菜单上各条命令对鼠标行为的捕获。也就是鼠标经过时，菜单打开响应，鼠标离去是菜单关闭。

因为菜单都是在网页调入时动态建立的，为了减轻浏览器的运行负担，加快速度，所以各个菜单只初始化一次，以后的打开和关闭操作仅仅是容器本身(块级元素)的可视与隐藏而已。

菜单的动态建立用 document.write 语句完成。 ---- 也因为是使用 CSS,因此每个菜单的第一句开头应该如此：

document.write ('< STYLE type="text/css" >...后跟菜单定位语法,根据浏览器的不同一般而言，Netscape 用相对定位， IE 用绝对定位要好一些。

然后是建立容器(块级元素) 对鼠标 onMouseOver 、 onMouseOut 的捕获。可以这样写: document.write('< span id=菜单标识 onMouseOver="发生的打开动作" onMouseOut="菜单的关闭动作" >...

其次，以如下方式层层建立菜单及捕获行为。需要注意的是菜单项定义是和鼠标感应操作定义在一块的。

< a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件"> 第一条命令< /a >< br >

< a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件" > 第二条命令< /a >< br >

< a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件" > 第三条命令< /a >< br >

...

如果要把菜单加上边框的话，只须在菜单(块级元素)属性里加上 border: < 粗细 > < 长度 > < 颜色 > < 三维效果 > 即可。例如：

...{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;... 就成为一个立体的细边菜单。

以下是原代码 6KB，载入浏览器时，鼠标在“下拉菜单演示”、“编译器”和“许可说明” 停靠时，便会出现下拉式菜单。

⑼ 使用css完成网页字体大小修改的源代码为

使用css完成网页字体大小修改的源代码被设置的字，设置文字大小的属性是"size"他的取值范围是1到7。其中1为最小，7为最大格式:被设置的字。这是官方设置的源代码格式。

⑽ 求CSS源代码，谢谢

<style>
ul{width:500px;height:auto;}
li{height:60px;widht:100px;border-bottom:1pxsolid#cccccc;font-size:18px;font-weight:bold;line-height:30px;}
lispan{font-size:14px;color:#222;font-weight:normal;}
</style>
<ul>
<li>江南良仓省府大院江南良仓省府大院江南良仓省府大院江南良<br><spanstyle="float:left">2016-12-28</span><spanstyle="float:right">点击查看>>></span></li>
</ul>

具体的还是要看你布局，，因为我写的这里，是没有其它的样式干扰，冲突。。。

导航:首页 > 源码编译 > css小例子源码

css小例子源码

与css小例子源码相关的资料