欧美亚洲综合成人a∨在线,一区二区亚洲精品国产精华液,婷婷色影

首頁(yè) 免費(fèi)課企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn) 筆記

企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

            
                zkpplpp
            
            PHP開(kāi)發(fā)工程師
                    
                難度初級(jí)
            
                時(shí)長(zhǎng) 2小時(shí)55分
            
                學(xué)習(xí)人數(shù)
            
綜合評(píng)分9.73
                            544人評(píng)價(jià)
                        查看評(píng)價(jià)
                                9.8
                                內(nèi)容實(shí)用
                            
                                9.8
                                簡(jiǎn)潔易懂
                            
                                9.6
                                邏輯清晰

最熱最新

慕碼人9704115

body,p,ul{margin:?0;padding:?0}
/*在此定義相關(guān)CSS樣式*/
.topList{
????width:300px;
????height:180px;
????border:?1px?solid?#E8E8E8;
????margin:?0?auto;
}
ul?{list-style:?none;}

.topList?p{
????float:?left;
????height:16px;
????margin-top:?4px;
????font-size:12px;
????line-height:16px;
}

.topList?li?{
????overflow:?hidden;
????margin:?5px?0;
}

.topList?em?{
????width:20px;
????height:16px;
????margin:?4px?4px;
????font-size:12px;
????text-align:center;
????line-height:16px;
????display:block;
????float:left;
????background-image:url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
????background-position:?bottom;
}

.top?>?em?{
????background-image:url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
????background-position:?top;
????color:#FFF;
}
.topList?a?{
????text-decoration:none;
????color:?#000;
}

查看全部

0 采集收起來(lái)源：編程練習(xí)

2020-01-20

慕粉15051578254

<style type="text/css">

/*在此定義相應(yīng)的類選擇器，并根據(jù)要求設(shè)置相關(guān)CSS屬性*/
.mainBox{
? ?width:960px;
? ?background-color:#CFF;
? ?float:left;
}
.leftBox{
? ? width:740px;
? ? height:300px;
? ? background-color:#C9F;
? ? float:left;
}
.rightBox{
? ? width:210px;
? ? height:300px;
? ? background-color:#FCF;
? ? float:right;
}

</style>
</head>

<body>


<div class="mainBox">
? ??
? ? <div class="leftBox"></div>
? ? <div class="rightBox"></div>
</div>

</body>

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-11-05
蘇衡biu

Myfocus教程的相關(guān)網(wǎng)址：http://demo.jb51.net/js/myfocus/tutorials.html

查看全部

0 采集收起來(lái)源：企業(yè)網(wǎng)站制作之焦點(diǎn)圖制作
2019-10-31

離弦4036856

由于a標(biāo)簽屬于內(nèi)聯(lián)元素，
無(wú)高度和寬度屬性，
因此控制鼠標(biāo)經(jīng)過(guò)狀態(tài)改變背景顏色時(shí)，
僅在有文字的地方顯示背景顏色。
解決的辦法是把a(bǔ)標(biāo)簽變?yōu)閴K級(jí)元素，
display:block

查看全部

0 采集收起來(lái)源：編程練習(xí)

2019-10-25

離弦4036856

錯(cuò)位
解決辦法：.nav{}中加入 clear:both;
原理？？？

查看全部

1 采集收起來(lái)源：企業(yè)網(wǎng)站制作之導(dǎo)航部分制作（一）
2019-10-24
離弦4036856

兩個(gè)盒子在一排？

查看全部

0 采集收起來(lái)源：盒子模型
2019-10-24
qq_慕婉清8065762

list-style-type可以設(shè)置列表項(xiàng)目符號(hào)為：none無(wú)項(xiàng)目符號(hào)，disc實(shí)心圓，circle空心圓，square實(shí)心方塊等但是不可以設(shè)置圖片為項(xiàng)目符號(hào)。

查看全部

0 采集收起來(lái)源：練習(xí)題
2019-10-22
雪穿庭樹(shù)作飛花 06:10

clear規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素

查看全部

0 采集收起來(lái)源：浮動(dòng) float
2019-10-08
慕設(shè)計(jì)4248035

(⊙o⊙)…

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-09-19
慕運(yùn)維658241

<style?type="text/css">

????????/*在此定義相關(guān)CSS樣式*/
????????*{margin:0;padding:0;}
????????.topList{
????????????padding:5px;
????????????width:300px;
????????????height:180px;
????????????border:1px?solid?#E8E8E8;
????????????margin:0?auto;
????????}
????????.topList?li{
????????????list-style-type:none;
????????????margin-bottom:15px;
???????????
????????}
????????.topList?.top?em{
????????????vertical-align:middle;
????????????float:left;
????????????font-style:normal;
????????????width:20px;
????????????height:16px;
????????????text-align:center;
????????????color:#333;
????????????background-image:url("?http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
????????????background-repeat:no-repeat;
????????????background-position:0?0;
????????}
????????.topList?li?em{
????????????float:left;
????????????font-style:normal;
????????????width:20px;
????????????height:16px;
????????????text-align:center;
????????????color:#333;
????????????background-image:url("?http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
????????????background-repeat:no-repeat;
????????????background-position:0?-16px;
????????}
????????.topList?li?p?a{
????????????
????????????text-decoration:none;
????????????color:black;
????????????font-size:12px;
????????}
????????.topList?li?p{
???????????line-height:16px;
????????????
????????}
??????
????????
????????
????????
????????
????????</style>
????????</head>
????????
????????<body>
????????<div?class="topList">
????????<ul>
????????<li?class="top"><em>01</em>
????????<p><a?href="http://idcbgp.cn/"?>【慕客訪談?dòng)脩羝俊坝袨閷沤z”在路上</a></p>
????????</li>
????????<li?class="top"><em>02</em>
????????<p><a?href="http://idcbgp.cn/">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a></p>
????????</li>
????????<li?class="top"><em>03</em>
????????<p><a?href="http://idcbgp.cn/">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</a></p>
????????</li>
????????<li?><em>04</em>
????????<p><a?href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
????????</li>
????????<li?><em>05</em>
????????<p><a?href="http://idcbgp.cn/">【獲獎(jiǎng)公告】追“球”巔峰，爭(zhēng)當(dāng)“預(yù)言帝”</a></p>
????????</li>
????????<li?><em>06</em>
????????<p><a?href="http://idcbgp.cn/">【問(wèn)卷調(diào)查】慕課網(wǎng)用戶學(xué)習(xí)情況大調(diào)查</a></p>
????????</li>
????????</ul>
????????</div>
????</body>

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-09-16
慕設(shè)計(jì)4248035

圖片高為32px
background-position:寬高，
若只設(shè)置寬，則高為50%，
background-position:0 16px,使圖片移動(dòng)16px至白色圖片完全顯示

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-09-15
慕設(shè)計(jì)4248035

<!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新聞中心制作評(píng)測(cè)題</title>
<style type="text/css">

.topList{width:300px; height:180px;border:1px solidd #E8E8E8;margin:auto;}
li{list-style-type:none;}
ul{padding:5px;}
em{width:20px;height:16px;text-align:center;font-style:normal;color:#333;background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);background-position:0 16px;float:left;}
.top em{background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);background-position:0 0;color:white;}
a{text-decoration:none;}
a:hover,a:active{color:red;}

</style>
</head>

<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://idcbgp.cn/" >【慕客訪談?dòng)脩羝俊坝袨閷沤z”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://idcbgp.cn/">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://idcbgp.cn/">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em>05</em>
<p><a href="http://idcbgp.cn/">【獲獎(jiǎng)公告】追“球”巔峰，爭(zhēng)當(dāng)“預(yù)言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://idcbgp.cn/">【問(wèn)卷調(diào)查】慕課網(wǎng)用戶學(xué)習(xí)情況大調(diào)查</a></p>
</li>
</ul>
</div>
</body>

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-09-15
慕設(shè)計(jì)4248035
<!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.1頁(yè)面頭部制作練習(xí)題</title>
<style type="text/css">
li{width:50px; height:30px; list-style-type:none; float:left; text-align:center;}
ul a{ color:black; text-decoration:none;}
a:hover,a:active{color:white;width:50px;height:30px;display:block;margin-top:-6px; line-height:30px; background: #BE3948;}/*margin-top使a塊級(jí)元素的外邊距基于li往上移6px，再用line-height使文本居中*/
</style>
</head>

<body>
<h3>課程難度</h3>

<ul>
? ? <li><a href="#">全部</a></li>
? ? <li><a href="#">初級(jí)</a></li>
? ? <li><a href="#">中級(jí)</a></li>
? ? <li><a href="#">高級(jí)</a></li>
</ul>

</body>
</html>
查看全部

1 采集收起來(lái)源：編程練習(xí)
2019-09-14
獨(dú)進(jìn)青樓 01:11

首頁(yè)制作圖

查看全部

0 采集收起來(lái)源：企業(yè)網(wǎng)站制作之首頁(yè)布局分析
2019-09-09
獨(dú)進(jìn)青樓 07:51

和模型盒模型

查看全部

0 采集收起來(lái)源：盒子模型
2019-09-09
慕UI0546179
1. 不同瀏覽器上ul和body 默認(rèn)是有margin的。需要首先設(shè)置ul的margin和padding都清空。
2. 因?yàn)閠opList設(shè)置的有高度180px，所以li的height設(shè)置是有規(guī)律計(jì)算的，設(shè)置34px肯定是會(huì)讓整體高度超出topList的。
  正確的計(jì)算方法：
  單個(gè)li的height= （180px-li上下padding5px*12）/6=20px。
3. 由于em的高度是16px，em的字體又跟文字的字體大小一樣，所以font-size肯定要小于16px，初步設(shè)定font-size為12px。
4. 設(shè)置em的時(shí)候設(shè)置背景圖片的位置;
5. 只對(duì)p標(biāo)記左浮動(dòng)，會(huì)讓p標(biāo)記中的內(nèi)容顯示在em內(nèi)容的前面。所以em也要設(shè)置float：left；
6. 特別注意：em是斜體的風(fēng)格，設(shè)置padding的左右，是導(dǎo)致em與li的距離，并不會(huì)改變em背景圖片上方的文字內(nèi)居中。如果此時(shí)，直接對(duì)em設(shè)置text-align：center；em內(nèi)部的文字默認(rèn)顯示在最右邊。
  解決辦法：font-style:normal;//把斜體風(fēng)格改成正常的風(fēng)格，再加上text-align:center;?
  就能使得em內(nèi)的文字居中顯示了。
查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-09-05
慕沐457181

*{margin:0;padding:0;}
.newsBox{
? ? min-height:300px;
? ? _height:300px;
? ? width:800px;
? ? padding:5px;
? ? margin:0 auto;
}
.newsTitle{
? ? font-size:24px;
? ? text-align:center;
? ? margin-bottom:10px;
}
.newsInfo{
? ? color:#666;
? ? text-align:center;
? ? border-bottom:1px dotted #666;

}
.newsContent{
? ? text-indent:2em;
? ? line-height:25px;
? ? padding:10px;
? ? font-size:14px;
? ? font-family:'微軟雅黑';
}
.newsContent img{
? ? margin:0 auto;
? ? display:block;
}

查看全部

0 采集收起來(lái)源：編程練習(xí)
2019-08-21