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小例子源碼相關的資料