-
>? >的轉義
查看全部 -
本節有一問題，li首頁 會因為上面logo 撐開而使得“首頁”不能置首。
看了logo圖片以后發現logo圖片高度為80px，而logo樣式高度也設為了80px。
現在水平不夠只能提醒自己之后的實踐中布局時，樣式高度要稍微設置大一點點。
----------------------------------------
2020.8.18
今天發現了把html聲明改成與老師的一致就不會出現上述的情況， 看來是和html版本有關。
查看全部 -
設置一個width，margin 0 auto； 可以讓文本盒子相對于盒子快速居中。
文本內容line height 設置與盒子 height 相同 可以讓文本居中
查看全部 -
hover ：懸停在鏈接的樣式
active： 點擊鏈接時的樣式
link：未訪問的鏈接的樣式
visited：已經訪問過的鏈接的樣式
查看全部 -
浮動框不占文檔位置
查看全部 -
塊級元素總是要新行開始查看全部
-
text-indent用來規定文本塊中首行文本的縮進，但是px是絕對單位，20px不一定正好是兩個字符，而em是相對單位，1em的大小是當前1個字體的大小，因此2em正好是兩個字符。另提示：text-indent的值允許負值，因此如果想隱藏某個div中的文字可以這樣寫text-indent:-9999px.
查看全部 -
text-indent 首行縮進
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁碼的制作</title>
<style>
/*在此定義相關CSS樣式*/
.page{
height: 40px;
margin-top: 10px;
text-align: center;
}
.page a{
display: inline-block;
border: 1px solid #E8E8E8;
text-decoration: none;
margin: 5px;
padding: 5px 10px;
}
.page a:link, .page a:visited{
color: #000;
}
.page a:hover, .page a:active{
color: #FFF;
background-color: #cc1b1b
}
</style>
</head>
<body>
<!--在此制作頁碼的基本結構-->
? ? <div class="page">
? ? <a href="#">首頁</a><a href="#">></a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">></a><a href="#">末頁</a>
? ? </div>
</body>
</html>
查看全部 -
塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了CSS控制以后，塊元素和內聯元素的這種屬性差異就不成為差異了。我們可以通過設置display屬性實現塊級元素和內聯元素的相互轉變。
查看全部 -
display：inline-block是兼顧內聯元素和塊級元素的屬性
IE瀏覽器顯示出問題可試用此方法
查看全部 -
background-color 要在background 的后面才有效果
.鼠標懸浮時，背景顏色改變沒有占據整行，只改變了文字顏色因為<a>為內聯元素，要想它寬高起作用，就要設成塊元素 display:block。
背景顏色、圖片的簡寫方法示列：
background:?#f2f2f2?url("../images/li_bg2.gif")?no-repeat?left?center;當背景顏色與背景圖片同時存在時，只要背景圖片沒有填充滿整個元素，剩余部分顯示背景顏色。
查看全部 -
<!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>無標題文檔</title>
<style type="text/css">
/*在此定義相應的類選擇器，并根據要求設置相關CSS屬性*/
? ? .mainBox{
? ? width:960px;
? ? height: 300px;
? ? background-color:#CFF;
? ? border:1px solid red;
? ? }
? ? .leftBox{
? ? width: 740px;
? ? height: 300px;
? ? background-color: #C9F;
? ? float: left;
? ? }
? ? .rightBox{
? ? width: 210px;
? ? height: 300px;
? ? background-color: #FCF;
? ? float: left;
? ? margin-left: 10px;
? ? }
</style>
</head>
<body>
<!--在此添加相應的div標簽-->
<div class="mainBox">
? ? <div class="leftBox"></div>
? ? <div class="rightBox"></div>
</div>
</body>
</html>
查看全部 -
大型網站，主流清除浮動方法：浮動元素的父元素 class="clearfix"，
css定義 .clearfix{ clear:both; content:"."; height:0; overflow:hidden; }min-height:350px;設置這個盒子的最小高度為350px;
但這個寫法在IE6下面不被識別
可以采用_height';350px;
查看全部 -
本課程總結：
1、行內樣式的優先級高于外部樣式
2、行內樣式適合于少量樣式的地方
查看全部
舉報