導航條and開班信息

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>開班信息</title>

<style type="text/css">

/*清除默認樣式*/

*{

margin: 0;

padding: 0;

}

/*統(tǒng)一頁面中的字體*/

body{

font: 12px/1 宋體;

}

/*設置outer的大小*/

.outer{

width: 300px;

/*height: 473px;*/

/*background-color: #bfa;*/

/*設置outer居中效果*/

margin: 50px auto;

}

/*設置title的邊框*/

.title{

/*設置上邊框*/

border-top: 2px #019e8b solid;

/*設置盒子的高度*/

height: 36px;

/*設置背景樣式*/

background-color: #f5f5f5;

/*設置title的行高*/

line-height: 36px;

/*設置title的內邊距*/

padding: 0px 22px 0px 16px;

}

/*設置title中的超鏈接*/

.title a{

float: right;

/*設置字體顏色*/

color: red;

}

/*設置h3*/

.title h3{

font: 16px/36px "微軟雅黑";

}

/*設置內容*/

.content{

border: 1px solid #deddd9;

/*設置內邊距*/

padding: 0px 28px 0px 20px;

}

/*設置內容中的超鏈接*/

.content a{

color: black;

text-decoration: none;

/*設置字體大小*/

font-size: 12px;

}

/*為超鏈接添加一個hover偽類*/

.content a:hover{

color: red;

/*為超鏈接添加下劃線*/

text-decoration: underline;

}

/*設置內容中的標題*/

.content h3{

margin-top: 14px;

margin-bottom: 16px;

}

/*設置右側a的樣式*/

.content .right{

/*設置向右浮動*/

float: right;

}

/*設置ul的樣式*/

.content ul{

/*去除項目符號*/

list-style: none;

/*為ul設置一個下邊框*/

border-bottom: 1px dashed #deddd9;

}

/*取消最后一個ul的邊框*/

.content .no-border{

border: none;

}

/*設置內容中的紅色字體*/

.content .redfont{

color: red;

font-weight: bold;

}

/*設置內容中的li*/

.content li{

margin-bottom: 15px;

}

</style>

</head>

<body>

<!-- 創(chuàng)建一個外層div,容納整個內容 -->

<div class="outer">

<!-- 開班信息的頭部 -->

<div class="title">

<a href="#">18年面授開班計劃</a>

<h3>近期開班</h3>

</div>

<!-- 開班信息的主要內容 -->

<div class="content">

<h3><a href="#">人工智能+Python-高薪就業(yè)班</a></h3>

<ul>

<li>

<a class="right" href="#"><span class="redfont">預約報名</span></a>

<a href="#">開班時間:<span class="redfont">2018-04-26</span></a>

</li>

<li>

<a class="right" href="#"><span class="redfont">無座,名額爆滿</span></a>

<a href="#">開班時間:<span class="redfont">2018-03-23</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2018-01-23</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2017-12-20</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2017-11-18</span></a>

</li>

</ul>

<h3><a href="#">Android開發(fā)+測試-高薪就業(yè)班</a></h3>

<ul>

<li>

<a class="right" href="#"><span class="redfont">預約報名</span></a>

<a href="#">開班時間:<span class="redfont">2018-04-26</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2018-03-23</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2018-01-23</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2017-12-20</span></a>

</li>

</ul>

<h3><a href="#">大數據軟件開發(fā)-青芒工作室</a></h3>

<ul class="no-border">

<li>

<a class="right" href="#"><span class="redfont">預約報名</span></a>

<a href="#">開班時間:<span class="redfont">2018-04-26</span></a>

</li>

<li>

<a class="right" href="#"><span>開班盛況</span></a>

<a href="#">開班時間:<span>2018-01-23</span></a>

</li>

</ul>

</div>

</div>

</body>

</html>




?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • <!DOCTYPE html> 開班信息 /*清除默認樣式*/ *{ margin:0; padding:0...
    Agony_銳閱讀 122評論 1 1
  • 不會用代碼框,所以看著有些亂套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個帥氣的名字閱讀 1,919評論 0 0
  • 開班信息: 代碼: <!DOCTYPE html> 網頁=圖片 18年面授開班計劃 近期開班 ...
    BJ000閱讀 224評論 0 0
  • <!DOCTYPE html> 開班信息 *{ margin: 0; padding: 0; /*清除緩存*/ ...
    清歡112閱讀 226評論 0 0
  • 2018年3月14日 周三 晴 這幾天天熱的反常,暖和的人懶洋洋的,又到了該睡午覺的時候了! 春天是萬...
    李墨兒媽媽閱讀 132評論 0 0

友情鏈接更多精彩內容