cssdiv源碼
⑴ 求純CSS+DIV實現的二級橫向菜單源代碼是CSS+DIV實現的,不要JS的!有圖片參考!!
為什麼不要js的呢?用js不是很簡單嗎,又不會產生那麼多需要兼容的問題。 jquery水平二級導航欄實例 a{text-decoration: none;outline: none;cursor:pointer;color:white;} ul{ list-style: none;} ul li{float: left;margin: 0;padding:7px 7px 0px 7px;border-right:1px dotted white;height:25px;background:tomato;font-size:14px;color:white;text-align:center;} li a{display: block;} ul li span{display:none;position: absolute;z-index: 1000;background: red; color: #fff;margin-top:10px;padding: 5px; /**設置子欄絕對定位*/ width:auto; _width:100px;/**IE6下無法通過設置為auto來自適應子欄的寬度,所以做了一個折中的設置*/ -moz-border-radius-bottomright: 5px; /**為子欄增加圓角樣式,只能在Chrome和FF下顯示良好,IE下無效*/ -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;} ul li span a{color:white;display:inline;}/**使子欄水平顯示*/ ul li span a:hover{color:tomato;background:white;} 首頁 項目一 1.1 1.2 1.3 項目二 2.1 2.2 2.3 項目三 3.1 3.2 3.3 幫助 $("ul li").hover(function() { $(this).css({ 'background' : 'red'}); $(this).find("span").show(); //顯示子欄 } , function() { $(this).css({ 'background' : 'tomato'}); $(this).find("span").hide(); //隱藏子欄 }); 效果圖如下:⑵ css+div的邊框是花紋的,怎樣用代碼寫出來
css+div的邊框是花紋的,其代碼為:
css:#dash{border:1px dashed red;width:200px;height:60px;}
html:<div id="dash"></div>
⑶ 用div+css怎麼寫出這個樣子的,要源代碼,重復的部分不要寫,謝謝
<style>
body{margin:0;padding:0;font:12px"微軟雅黑";background:#ddd}
.main{margin:0auto;width:750px}
.section{margin:0010px;padding:5px;text-align:center;background:#fff}
</style>
<divclass="main">
<divclass="section">
<imgsrc="/"alt="">
<h2>標題</h2>
<divclass="secmain">內容</div>
</div>
<divclass="section">...</div>
<divclass="section">...</div>
</div>
⑷ 求 CSS+div 浮動實例 要有html 和 css 源碼
純css做不了.因為不知道你頂部高度.
如果用針對瀏覽器位置,那麼上面的空白區域的高度就得保證下面的菜單能顯示出來.
如果用絕對定位.那麼就得用js修改位置.
⑸ div css 對齊問題(附源碼)
style之間加個body {margin: 0px;} 即可解決問題的。。
⑹ 跪求 QQ空間(CSS+DIV)源碼,不勝感激!
你要想要整個QQ空間的源碼,幾乎沒人給的了你,只能自已動手
方法一、裝個火狐用F12開發者工具看下,包括css都能看到,也可以復制的!
方法二、去下載個扒網頁的軟體,自已去扒就行了。
望採納,謝謝:)
⑺ 誰有[Div+CSS3.0網頁布局案例精粹源代碼]的源代碼
雖然我沒有源代碼,不過可以推薦你去 w3cschool ,這個是最全的,基本不用看別的了
⑻ 《CSS徹底研究》和《CSS/DIV》頁面布局設計 實例源碼 那位朋友提供一下
東西太大 自己下載
http://www.verycd.com/topics/2797826/
http://www.verycd.com/topics/2741979/
看清楚 視頻和光碟都有!!!!!!!!!!!!!!!!
⑼ 為什麼我設置了DIV+css樣式而在源代碼中出不來,意思就是在CSS文件中設置了樣式,但在源代碼中使用時無效
也許是你css引用的路徑不對,或者你把css樣式放到html文件中去,看看樣式真否能出來。如果出不來那就是你css有錯誤了,瀏覽器無法繼續執行下去。
<style>你的css內容</style>把這個放在<head></head>之間
⑽ CSS網頁怎麼用DIV寫出如圖中的效果,求源代碼![email protected]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#top").find("div").each(function(i,n){
$(this).click(function(){
$("#bottom").find("table").each(function(){
if($(this).css("display")=="block"){
$(this).css("display","none");
}
});
$("#bottom table:eq("+i+")").css("display","block");
});
});
});
</script>
<title>服裝</title>
<style>
.top { width:auto;
height:30px;
margin-bottom:2px;
}
.bottom { width:300px;
height:194px;
margin-left:10px;
}
.choice { width:60px;
height:30px;
line-height:30px;
text-align:center;
border:#CCCCCC 1px solid;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="top" id="top">
<div class="choice" id="women">女裝</div>
<div class="choice" id="man">男裝</div>
<div class="choice" id="child">童裝</div>
</div>
<div class="bottom" id="bottom">
<table width="300" border="1" style="display:block;">
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
<tr>
<td>高級成衣</td>
<td>高級成衣</td>
</tr>
</table>
<table width="300" border="1" style="display:none;">
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
<tr>
<td>男裝</td>
<td>男裝</td>
</tr>
</table>
<table width="300" border="1" style="display:none;">
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
<tr>
<td>童裝</td>
<td>童裝</td>
</tr>
</table>
</div>
</body>
</div>
</html>
單純css是無法做到的,我這個是用jquery寫的,你測試的時候下載一個jquery.js