-
<body>
<!--在此制作一個嵌套列表-->
<ul>
? ? <li>首頁</li>
? ? <li>課程中心</li>
? ? <ul>
? ? ? ? <li>Web前端</li>
? ? ? ? <ul>
? ? ? ? ? ? <li>HTML</li>
? ? ? ? ? ? <li>CSS</li>
? ? ? ? ? ? <li>JavaScript</li>
? ? ? ? ? ? <li>jQuery</li>
? ? ? ? </ul>
? ? ? ? <li>Android開發</li>
? ? ? ? <li>PHP開發</li>
? ? </ul>
</ul>
</body>
查看全部 -
.mainBox{
? ? ? ? width:960px;
? ? ? ? background-color:#CFF;
? ? ? ? height:300px;
? ? ? ? float:left;
}
.leftBox{
? ? ? ? width:740px;
? ? ? ? background-color:#C9F;
? ? ? ? height:300px;
? ? ? ? float:left;
}
.rightBox{?
? ? ? ? width:210px;
? ? ? ? background-color:#FCF;
? ? ? ? height:300px;
? ? ? ? float:right;
}
</style>
</head>
<body>
<!--在此添加相應的div標簽-->
<div class='mainBox'>
? ? <div class='leftBox'></div>
? ? <div class='rightBox'></div>
查看全部 -
盒子模型中實現文字在垂直方向上居中：可以設置行高=盒子高度
text-decoraton 下劃線
查看全部 -
list-style-type：none； 去除列表 表頭符號
text-decoration:none; 去除a標簽下劃線
查看全部 -
a:link 控制超鏈接 初始狀態
a:visited 控制超鏈接 訪問之后的狀態
a:hover 控制超鏈接 鼠標經過時的狀態
a:active 控制超鏈接 點擊時的狀態
查看全部 -
list-style-image可以把圖像設置為列表中的項目符號；list-style-type可以設置列表項目符號的不同樣式，如：none表示無項目符號，disc表示實心圓（默認值），circle表示空心圓，square表示實心方塊等。
查看全部 -
background-image: url(文件路徑) no-repeat（默認是重復，不重復寫no-repeat）? 水平方向（left/right） 垂直方向（center垂直居中）。
查看全部 -
div浮動后，因無內容無height，一般會不顯示。要想無內容顯示出來需要設定height就ok了。
查看全部 -
內聯元素和塊級元素的區別：
內聯元素是在一行中顯示。塊級元素是單獨一行顯示。
查看全部 -
圖片與文字的居中對齊，設置圖片的vertical-align:middle。設置圖片與文字有間距，為圖片設置margin-right:10px。
查看全部 -
小技巧：文字垂直居中使用line-height=height的像素即可。
查看全部 -
li右浮動后，顯示的是設為首頁在最右側，聯系我們在右邊的最左側。
原因是：設為首頁的li右浮動的時候，已經脫離文檔流，在碰到父元素top_content的最右側邊緣的時候停下來顯示。
當加入收藏li右浮動的時候，在碰到最右側的設置首頁li的邊緣后停下顯示。聯系我們li右浮動的時候，在碰到最右側加入收藏的li右邊緣后停下顯示。
解決辦法：將聯系我們和設為首頁互相換位置。
查看全部 -
設置一個div在頁面中居中的方法：
設定這個div的寬度，并設置這個div的margin左右為auto。統一給li前加小箭頭背景圖片list-style-image
.top_content li {
????list-style-image：url(圖片路徑格式);
}查看全部 -
<!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=gb2312" />
<title>3.10新聞中心制作評測題</title>
<style type="text/css">
/*在此定義相關CSS樣式*/
.topList{
? ? width:300px;
? ? height:180px;
? ? border:1px solid #E8E8E8;
? ? margin:0 auto;
}
ul{
? list-style-type:none;
? margin-top:-18px;
? padding:5px;
}
li {
? ? height:16px;
}
em{
? ? width:20px;
? ? height:16px;
? ? text-align:center;
? ? font-style:normal;
? ? font-size:10px;
? ? color:#333;
? ? background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
? ? background-position:0px 16px;
? ? display:block;
? ? float:left;
}
.top em{
? ? background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
? ? color:white;
}
a{
? ? font-size:10px;
}
a:link,a:visited{
? ? text-decoration:none;
? ? color:black;
}
a:hover,a:active{
? ? text-decoration:none;
? ? color:red;
}
</style>
</head>
<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.xianlaiwan.cn/" >【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.xianlaiwan.cn/">【有獎活動】給父親的三行書信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.xianlaiwan.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.xianlaiwan.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.xianlaiwan.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.xianlaiwan.cn/">【問卷調查】慕課網用戶學習情況大調查</a></p>
</li>
</ul>
</div>
</body>
查看全部 -
TOP排行榜列表
查看全部 -
圖片輪播的教學網址
查看全部
舉報