-
因為前端技術除了HTML、CSS和JavaScript這三種,還需要學習Ajax、SEO等查看全部
-
@charset "utf-8";
*{ margin:0; padding:0;}
body{font-family:"微軟雅黑";}
/*============== header ==============*/
/* 導航欄 */
.wap
{width: 1000px; text-align: center; margin: 0 auto;}
.wap .logo img
{vertical-align: middle; margin-right: 10px; float: left;}
.nav
{height:70px; width:1000px;}
.nav ul
{margin: 0 10px;}
.nav li
{float: left; width: 100px; height: 70px; text-align: center; list-style: none; line-height: 70px;}
.nav li a
{color: #090909 ; text-decoration: none; display: block;}
.nav a:link,.nav a:visited
{text-decoration: none; font-size: 16px; font-family: "微軟雅黑";}
.nav a:hover,.nav a:active
{background-color: #af333e;}
/* 輪播圖 */
.ad
{height: 310px; overflow: hidden; width: 1000px; margin: 0 auto;}
/* 滾動新聞 */
.gdxw?
{width: 1000px; margin: 20px auto; overflow: hidden}
.gdxw .gdxw-tit?
{height: 40px; line-height: 40px; background-color: #666;}
.gdxw .gdxw-tit h3?
{float: left; background-color: #a02f36; color: #fff; padding: 0 20px; font-size: 16px;}
.gdxw .gdxw-tit h4?
{float: left; color: #fff; padding-left: 20px;}
.gdxw .gdxw-con?
{width: 1000px; margin: 10px auto;}
.gdxw .gdxw-con ul li
{float: left; list-style: none; text-align: center; }
.gdxw .gdxw-con ul li img {margin-right: 3px;}
.gdxw .gdxw-con ul li .t {border: #DDDDDD solid 1px; margin-right: 3px;}
?
/* 信息展示區 */
.main {height: 250px; width: 1000px; margin: 10px auto;}
.news {width: 330px; border: 1px solid #dadada;}
.rmhd {width: 330px; border: 1px solid #dadada; margin: 0 3px;}
.lxwm {width: 320px; border: #dadada 1px solid; margin: 0 2px;}
.news,.rmhd,.lxwm {height: 250px; float: left;}
.main .news .news_list ul li {list-style: none; border-bottom: #DDDDDD solid 1px; height: auto; overflow: hidden; margin-bottom: 5px; padding-bottom: 5px;}
.main .news .t h2 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF;}
.main .news .news_list ul {font-size: 12px; list-style: none; line-height: center; margin: 10px;}
.main .news .news_list ul a .date {float: left; width: 30px; height: 36px; line-height:18px; padding: 5px 0; background-color: #af333e; color: #FFFFFF; font-family: "微軟雅黑"; text-align: center; border-radius: 15%; }
.main .news .news_list ul a .text {float: left; width: 270px; margin: 0 5px; color: #090909; font-size: 12px;}
.main .news .news_list ul a .text .t {font-size: 16px; font-family: "微軟雅黑"; font-weight: bold;}
.main .rmhd .t h3 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF; font-size: 25px;}
.main .rmhd .nr ul img {width: 300px; height: 100px; margin-top: 12px; margin-left: 10px;}
.main .rmhd .nr ul li {list-style: none; margin-left: 10px; font-size: 13px; font-weight: bold}
.main .lxwm h4 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF; font-size: 25px;}
.main .lxwm .con p {font-size: 13px; font-weight: bolder; padding-left: 5px; padding-top: 13px; line-height: 5px;}
/* 底部版權 */
#footer {width: 1000px; height: 50px; background-color: #DADADA; line-height: 65px; text-align: center; margin: 0 auto;}
#footer p {text-align: center; font-weight: bolder}
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>慕課網</title>
<meta name="description" content="imooc" />
<meta name="keywords" content="imooc" />
<link rel="stylesheet" href="css/main.css">
<script src="js/myfocus-2.0.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 開始頂部 -->
<div class="wap">
<div class="logo">
? ?<img src="images/logo.jpg" alt="慕課網"/>
</div>
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="list.html">產品特色</a></li>
<li><a href="list.html">解決方案</a></li>
<li><a href="list.html">產品價格</a></li>
<li><a href="list.html">幫助中心</a></li>
<li><a href="list.html">關于我們</a></li>
</ul>
</div>
? ? </div>
</div><!-- 頂部結束 -->
<!-- 開始輪播圖 -->
<div class="ad" id="picBox">
<div class="pic">
<ul>
<li><img src="images/ad2.jpg"/></li>
<li><img src="images/ad3.jpg"/></li>
<li><img src="images/ad4.jpg"/></li>
</ul>
</div>
</div><!-- 輪播圖結束 -->
<div class="gdxw">
<div class="gdxw-tit">
<h3>滾動新聞</h3><h4>這是滾動新聞</h4>
</div>
<div class="gdxw-con">
<ul>
<li>
<img src="images/bs.jpg" />
<div class="t">玩轉BootStrap</div>
</li>
<li>
<img src="images/css.jpg"/>
<div class="t">企業網站案例</div>
</li>
<li>
<img src="images/js.jpg" />
<div class="t">Javascript基礎</div>
</li>
</ul>
</div>
</div>
<!-- 信息展示區 -->
<div class="main">
<div class="news">
<div class="t">
? <h2>新聞中心</h2>?
</div>
<div class="news_list">
<ul>
<li>
<a href="news.html">
<div class="date">8月</br>23日</div>
<div class="text">
<div class="t">學習計劃之"Androld攻城獅初養成"</div>
<p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? </div>
? </a>
</li>
<li>
? <a href="news.html">
? <div class="date">8月</br>23日</div>
? <div class="text">
? <div class="t">學習計劃之"Androld攻城獅初養成"</div>
? ? ?<p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? ?</div>
? </a>
<li>
? <a href="news.html">
? <div class="date">8月</br>23日</div>
? <div class="text">
? <div class="t">學習計劃之"Androld攻城獅初養成"</div>
? <p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? ?</div>
? </a>
</li>
</ul>
</div>
</div>
<div class="rmhd">?
? <div class="t">
<h3>熱門活動</h3>?
? </div>
? <div class="nr">
? <ul>
? <img src="images/2048.jpg" />
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? </ul>
? </div>
? ? ? ??
</div>
<div class="lxwm">
<h4>聯系我們</h4>
<div class="con">
<p>講師招募</p>
<p>鄒同學</p>
<p>電話:18911888156</p>
<p>QQ:576264119</p>
<p>E-mail:[email protected]</p>
<p><br></p>
<p>網站合作</p>
<p>昌同學</p>
<p>電話:13261771103</p>
<p>QQ:1059809142</p>
<p>E-mail:[email protected]</p>
</div>
</div>
</div><!-- 信息展示區 -->
<!-- 底部版權 -->
<div id="footer">
<p>Copyright @ 2013 imooc.com All Rights Reserved jingICP備 13046642號-2</p>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>慕課網</title>
<meta name="description" content="imooc" />
<meta name="keywords" content="imooc" />
<link rel="stylesheet" href="css/main.css">
<script src="js/myfocus-2.0.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 開始頂部 -->
<div class="wap">
<div class="logo">
? ?<img src="images/logo.jpg" alt="慕課網"/>
</div>
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="list.html">產品特色</a></li>
<li><a href="list.html">解決方案</a></li>
<li><a href="list.html">產品價格</a></li>
<li><a href="list.html">幫助中心</a></li>
<li><a href="list.html">關于我們</a></li>
</ul>
</div>
? ? </div>
</div><!-- 頂部結束 -->
<!-- 開始輪播圖 -->
<div class="ad" id="picBox">
<div class="pic">
<ul>
<li><img src="images/ad2.jpg"/></li>
<li><img src="images/ad3.jpg"/></li>
<li><img src="images/ad4.jpg"/></li>
</ul>
</div>
</div><!-- 輪播圖結束 -->
<div class="gdxw">
<div class="gdxw-tit">
<h3>滾動新聞</h3><h4>這是滾動新聞</h4>
</div>
<div class="gdxw-con">
<ul>
<li>
<img src="images/bs.jpg" />
<div class="t">玩轉BootStrap</div>
</li>
<li>
<img src="images/css.jpg"/>
<div class="t">企業網站案例</div>
</li>
<li>
<img src="images/js.jpg" />
<div class="t">Javascript基礎</div>
</li>
</ul>
</div>
</div>
<!-- 信息展示區 -->
<div class="main">
<div class="news">
<div class="t">
? <h2>新聞中心</h2>?
</div>
<div class="news_list">
<ul>
<li>
<a href="news.html">
<div class="date">8月</br>23日</div>
<div class="text">
<div class="t">學習計劃之"Androld攻城獅初養成"</div>
<p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? </div>
? </a>
</li>
<li>
? <a href="news.html">
? <div class="date">8月</br>23日</div>
? <div class="text">
? <div class="t">學習計劃之"Androld攻城獅初養成"</div>
? ? ?<p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? ?</div>
? </a>
<li>
? <a href="news.html">
? <div class="date">8月</br>23日</div>
? <div class="text">
? <div class="t">學習計劃之"Androld攻城獅初養成"</div>
? <p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p>
? ?</div>
? </a>
</li>
</ul>
</div>
</div>
<div class="rmhd">?
? <div class="t">
<h3>熱門活動</h3>?
? </div>
? <div class="nr">
? <ul>
? <img src="images/2048.jpg" />
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? <li>慕課網2048游戲源碼征集</li>
? </ul>
? </div>
? ? ? ??
</div>
<div class="lxwm">
<h4>聯系我們</h4>
<div class="con">
<p>講師招募</p>
<p>鄒同學</p>
<p>電話:18911888156</p>
<p>QQ:576264119</p>
<p>E-mail:[email protected]</p>
<p><br></p>
<p>網站合作</p>
<p>昌同學</p>
<p>電話:13261771103</p>
<p>QQ:1059809142</p>
<p>E-mail:[email protected]</p>
</div>
</div>
</div><!-- 信息展示區 -->
<!-- 底部版權 -->
<div id="footer">
<p>Copyright @ 2013 imooc.com All Rights Reserved jingICP備 13046642號-2</p>
</div>
</body>
</html>
查看全部 -
<!DOCTYPE?html><html> <head> <meta?charset="utf-8"?/> <title>慕課網</title> <meta?name="description"?content="imooc"?/> <meta?name="keywords"?content="imooc"?/> <link?rel="stylesheet"?href="css/main.css"> <script?src="js/myfocus-2.0.1.min.js"?type="text/javascript"?charset="utf-8"></script> </head> <body> <!--?開始頂部?--> <div?class="wap"> <div?class="logo"> ???<img?src="images/logo.jpg"?alt="慕課網"/> </div> <div?class="nav"> <ul> <li><a?href="#">首頁</a></li> <li><a?href="list.html">產品特色</a></li> <li><a?href="list.html">解決方案</a></li> <li><a?href="list.html">產品價格</a></li> <li><a?href="list.html">幫助中心</a></li> <li><a?href="list.html">關于我們</a></li> </ul> </div> ????</div> </div><!--?頂部結束?--> <!--?開始輪播圖?--> <div?class="ad"?id="picBox"> <div?class="pic"> <ul> <li><img?src="images/ad2.jpg"/></li> <li><img?src="images/ad3.jpg"/></li> <li><img?src="images/ad4.jpg"/></li> </ul> </div> </div><!--?輪播圖結束?--> <div?class="gdxw"> <div?class="gdxw-tit"> <h3>滾動新聞</h3><h4>這是滾動新聞</h4> </div> <div?class="gdxw-con"> <ul> <li> <img?src="images/bs.jpg"?/> <div?class="t">玩轉BootStrap</div> </li> <li> <img?src="images/css.jpg"/> <div?class="t">企業網站案例</div> </li> <li> <img?src="images/js.jpg"?/> <div?class="t">Javascript基礎</div> </li> </ul> </div> </div> <!--?信息展示區?--> <div?class="main"> <div?class="news"> <div?class="t"> ??<h2>新聞中心</h2>? </div> <div?class="news_list"> <ul> <li> <a?href="news.html"> <div?class="date">8月</br>23日</div> <div?class="text"> <div?class="t">學習計劃之"Androld攻城獅初養成"</div> <p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p> ??</div> ??</a> </li> <li> ??<a?href="news.html"> ?? <div?class="date">8月</br>23日</div> ?? <div?class="text"> ?? <div?class="t">學習計劃之"Androld攻城獅初養成"</div> ?? ???<p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p> ???</div> ??</a> <li> ??<a?href="news.html"> ?? <div?class="date">8月</br>23日</div> ?? <div?class="text"> ?? <div?class="t">學習計劃之"Androld攻城獅初養成"</div> ?? <p>想成為Androld攻城獅?想開發一款專屬APP?沒有任何基礎的你,應該從何學起</p> ???</div> ??</a> </li> </ul> </div> </div> <div?class="rmhd">? ??<div?class="t"> <h3>熱門活動</h3>? ??</div> ??<div?class="nr"> ??<ul> ??<img?src="images/2048.jpg"?/> ??<li>慕課網2048游戲源碼征集</li> ??<li>慕課網2048游戲源碼征集</li> ??<li>慕課網2048游戲源碼征集</li> ??<li>慕課網2048游戲源碼征集</li> ??<li>慕課網2048游戲源碼征集</li> ??</ul> ??</div> ???????? </div> <div?class="lxwm"> <h4>聯系我們</h4> <div?class="con"> <p>講師招募</p> <p>鄒同學</p> <p>電話:18911888156</p> <p>QQ:576264119</p> <p>E-mail:[email protected]</p> <p><br></p> <p>網站合作</p> <p>昌同學</p> <p>電話:13261771103</p> <p>QQ:1059809142</p> <p>E-mail:[email protected]</p> </div> </div> </div><!--?信息展示區?--> <!--?底部版權?--> <div?id="footer"> <p>Copyright?@?2013?imooc.com?All?Rights?Reserved?jingICP備?13046642號-2</p> </di
@charset "utf-8";
*{ margin:0; padding:0;}
body{font-family:"微軟雅黑";}
/*============== header ==============*/
/* 導航欄 */
.wap
{width: 1000px; text-align: center; margin: 0 auto;}
.wap .logo img
{vertical-align: middle; margin-right: 10px; float: left;}
.nav
{height:70px; width:1000px;}
.nav ul
{margin: 0 10px;}
.nav li
{float: left; width: 100px; height: 70px; text-align: center; list-style: none; line-height: 70px;}
.nav li a
{color: #090909 ; text-decoration: none; display: block;}
.nav a:link,.nav a:visited
{text-decoration: none; font-size: 16px; font-family: "微軟雅黑";}
.nav a:hover,.nav a:active
{background-color: #af333e;}
/* 輪播圖 */
.ad
{height: 310px; overflow: hidden; width: 1000px; margin: 0 auto;}
/* 滾動新聞 */
.gdxw?
{width: 1000px; margin: 20px auto; overflow: hidden}
.gdxw .gdxw-tit?
{height: 40px; line-height: 40px; background-color: #666;}
.gdxw .gdxw-tit h3?
{float: left; background-color: #a02f36; color: #fff; padding: 0 20px; font-size: 16px;}
.gdxw .gdxw-tit h4?
{float: left; color: #fff; padding-left: 20px;}
.gdxw .gdxw-con?
{width: 1000px; margin: 10px auto;}
.gdxw .gdxw-con ul li
{float: left; list-style: none; text-align: center; }
.gdxw .gdxw-con ul li img {margin-right: 3px;}
.gdxw .gdxw-con ul li .t {border: #DDDDDD solid 1px; margin-right: 3px;}
?
/* 信息展示區 */
.main {height: 250px; width: 1000px; margin: 10px auto;}
.news {width: 330px; border: 1px solid #dadada;}
.rmhd {width: 330px; border: 1px solid #dadada; margin: 0 3px;}
.lxwm {width: 320px; border: #dadada 1px solid; margin: 0 2px;}
.news,.rmhd,.lxwm {height: 250px; float: left;}
.main .news .news_list ul li {list-style: none; border-bottom: #DDDDDD solid 1px; height: auto; overflow: hidden; margin-bottom: 5px; padding-bottom: 5px;}
.main .news .t h2 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF;}
.main .news .news_list ul {font-size: 12px; list-style: none; line-height: center; margin: 10px;}
.main .news .news_list ul a .date {float: left; width: 30px; height: 36px; line-height:18px; padding: 5px 0; background-color: #af333e; color: #FFFFFF; font-family: "微軟雅黑"; text-align: center; border-radius: 15%; }
.main .news .news_list ul a .text {float: left; width: 270px; margin: 0 5px; color: #090909; font-size: 12px;}
.main .news .news_list ul a .text .t {font-size: 16px; font-family: "微軟雅黑"; font-weight: bold;}
.main .rmhd .t h3 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF; font-size: 25px;}
.main .rmhd .nr ul img {width: 300px; height: 100px; margin-top: 12px; margin-left: 10px;}
.main .rmhd .nr ul li {list-style: none; margin-left: 10px; font-size: 13px; font-weight: bold}
.main .lxwm h4 {padding-left: 20px; background-color: #a02f36; color: #FFFFFF; font-size: 25px;}
.main .lxwm .con p {font-size: 13px; font-weight: bolder; padding-left: 5px; padding-top: 13px; line-height: 5px;}
/* 底部版權 */
#footer {width: 1000px; height: 50px; background-color: #DADADA; line-height: 65px; text-align: center; margin: 0 auto;}
#footer p {text-align: center; font-weight: bolder}
查看全部 -
最 后 課 程 總 結
查看全部 -
<style>
/*在此定義相關樣式*/
.newsBox?
{ background-color:#fefefe; min-height: 300px;
? ??
}
.newsTitle
{ font-family: "微軟雅黑"; font-size: 25px; text-align: center;
? ??
}
.newsContent
{ font-size:15px; line-height:25px; text-indent:2em;
? ??
}
.newsInfo
{
? ? font-family: sans-serif;
? ? color: #c1c1c1;
? ? font-size: 15px;
? ? text-align: center;
? ? border-bottom: dashed 1px #c1c1c1;
}
</style>
</head>
<body>
<div class="newsBox">
<h1 class="newsTitle">慕課網獲App Store強力推薦榮登四榜單</h1>
<p class="newsInfo">發布人:Admin 發布時間:2014-08-01 瀏覽:5321次</p>
<div class="newsContent">
<p> 8月伊始,慕課網App即獲得了App Store的多個推薦,同時出現在“免費App精選”、“致畢業生”、“學而不倦”以及“輕松學編程”四個榜單中。這款IT編程學習類的App為何如此備受青睞?趣味視頻課程、高清畫面質感、在線離線隨身學習……優質的課程內容結合良好的用戶體驗,慕課網App無疑是IT學習的最佳選擇。</p>
<p> <b>App Store力薦慕課網榮登四榜單</b></p>
<p>App Store因公平著稱,能被其推薦是每一款App夢寐以求的榮譽,慕課網則一舉占據了其四個榜單,包括精品推薦首頁“合集”版塊下“免費App精選”中的“新品”推薦、“合集”版塊“致畢業生”中“學無止境”推薦、教育類別“合集”版塊下“學而不倦”中的推薦以及“輕松學編程”版塊推薦。</p>
<p ><img src=" http://img1.sycdn.imooc.com//53edaa5a0001c86705000420.jpg" width="500" height="420" alt=""/></p>
<p>事實上,慕課網登上App Store榜單并非首次。早在2014年5月,慕課網就榮登App Store 精品推薦榜首,同時登上“教育”類別下“優秀新App”榜首,并獲評“五月最佳”精彩App。隨后,慕課網App接連出現在“致畢業生”、“免費App精選”、“夏日學堂”等榜單中。</p>
<p>從App Store的持續推薦以及“優秀”、“精選”的肯定中不難看出,慕課網在IT在線學習領域以及教育類App中得到了用戶的認可。</p>
<p><b>新功能上線持續提升用戶體驗</b></P>
? ?<p>一款好的產品同樣需要不斷改進來滿足用戶需求。慕課網App上線至今進行了多個版本的迭代,不斷完善產品、提升用戶體驗,ios最新的2.1.0版本于7月20日更新,上線了大量新功能。</p>
<p>明確、清晰的課程分類能夠讓用戶迅速找到感興趣的課程,本次慕課網就上線了全新的課程分類方式,點擊“全部課程”即可顯示出全部的技術語言種類以及視頻課程數量,全部在線課程一目了然。</p>
<p>不知道講師在哪里?此版本更新中添加了講師認證,不僅對講師空間進行了認證,在課程討論和筆記中,通過認證標識,一眼可以看到哪個是講師回復。</p>
<p>此外,慕課網App在最新版本中調整了下拉刷新和上拉加載的效果;課程練習部分增加了習題解析;對半透化效果、全屏播放器按鈕進行了優化,并新增了編程課、ps課程。一系列的改進相信能為IT學習用戶帶來更好的學習體驗。</p>
<p>慕課網App在精品視頻課程的基礎上,不斷優化用戶體驗,幫助IT學習者迅速入門、提升技能,以優秀的產品基因獲得App Store的多個推薦,使更多用戶有機會使用這款IT學習軟件,體驗學習的簡單和快捷。</p>
</div>
</div>
查看全部 -
<title>頁碼的制作</title>
<style>
/*在此定義相關CSS樣式*/
.page
?{
? ? ?height:40px;
? ? ?margin-top:10px;
? ? ?text-align:center;
?}
?
?.page a?
?{
? ? ?display:inline-block;
? ? ?boder:1px solid #E8E8E8;
? ? ?text-decoration:none;
? ? ?margin:5px;
? ? ?padding:5px 10px;
? ? ?color:#000000;
? ? ?
?}
?
?.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>?
查看全部 -
嵌套列表練習
查看全部 -
編程練習題
查看全部 -
JS焦點圖庫
查看全部 -
頁面頭部制作
查看全部 -
F2快捷重命名;F4重復上一步;F9刷新公式;F12另存為?
查看全部 -
background-position: x y
x y 可以為百分比,也可以為像素值
查看全部
舉報