前端開發練習:快報模組
效果圖如下:
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快報模組</title>
<style>
* {
margin: 0;
padding: 0;
}
.kuaibao {
width: 310px;
height: 205px;
border: 1px solid #d1d1d1;
margin: 200px auto;
}
.tou {
margin-top: 12px;
padding: 0 19px;
}
.xuxian {
margin-top: 13px;
border-bottom: 1px dashed #d1d1d1;
}
.diyi {
margin-top: 17px;
padding: 0 25px;
color: black;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.hang {
margin-top: 6px;
padding: 0 25px;
color: black;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
div a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="kuaibao">
<div class="tou">品優購快報</div>
<div class="xuxian"></div>
<div><a href="#" class="diyi">【特惠】爆款耳機五折秒!</a></div>
<div><a href="#" class="hang">【特惠】母親節,健康好禮低至五折!</a></div>
<div><a href="#" class="hang">【特惠】爆款耳機五折秒!</a></div>
<div><a href="#" class="hang">【特惠】9.9元洗100張照片!</a></div>
<div><a href="#" class="hang">【特惠】長虹智慧空調立省1000!</a></div>
</div>
</body>
</html>
相關文章
- 前端模組化開發前端
- 聊聊前端模組化開發前端
- Google 開發技術快報 #87Go
- Web前端——JavaScript練習Web前端JavaScript
- 什麼是前端模組化?前端模組化開發到底有無必要前端
- 【CSS練習】IT修真院–練習2-開發工具CSS
- 前端為什麼需要模組化開發前端
- 前端模組化開發那點歷史前端
- 【轉】前端模組化開發的價值 #547前端
- 學習產品快報6月W3 | 每日一練增加OJ練習題,快來測試吧~
- 分頁練習-網頁開發常用網頁
- 一個pyspark 開發練習例項Spark
- web前端 javascript 練習題一Web前端JavaScript
- 學習產品快報08 | “CSDN學習”練習題前提,增加了解達人的渠道
- 好程式設計師web前端教程之前端模組化開發程式設計師Web前端
- 【分模組練習】二分查詢
- 前端開發學習Day8前端
- 學習web前端開發的原因Web前端
- 前端例項練習 – 模態相簿前端
- 7.3_前端筆記-jquery練習前端筆記jQuery
- 前端模組化發展歷程 (-)前端
- Web前端開發學習路線圖Web前端
- web前端基於vue的大型專案分模組開發Web前端Vue
- ES6模組化改變前端的原生開發方式前端
- vue元件開發練習–焦點圖切換Vue元件
- vue外掛開發練習--實用彈窗Vue
- vue元件開發練習--焦點圖切換Vue元件
- .NET 雲原生架構師訓練營(模組二 基礎鞏固 敏捷開發)--學習筆記架構敏捷筆記
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- nginx模組開發Nginx
- yield偽併發練習
- [前端開發]–分享個人習慣的命名方式前端
- 學習web前端開發要注意什麼Web前端
- [前端開發]--分享個人習慣的命名方式前端
- 個人練習前端技術使用Bootstrap、JQuery、thymeleaf前端bootjQuery
- 前端開發前端
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript