自学前端-HTML5+CSS-综合案例一-热词
生活随笔
收集整理的這篇文章主要介紹了
自学前端-HTML5+CSS-综合案例一-热词
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
綜合案例一-熱詞
目錄
- 綜合案例一-熱詞
- 1、設計需求
- 2、設計所需標簽和CSS樣式
- 3、設計具體步驟
- 4、遇到的問題
設計圖如下
1、設計需求
①需要鼠標放上去有顯示透明
②需要點擊后跳轉到相應頁面且保留原頁面
2、設計所需標簽和CSS樣式
所需標簽：div
CSS樣式：偽類hover，顏色color，字大小font-size，背景顏色background-color，盒子寬度和高度width和height
3、設計具體步驟
第一步使用a標簽把對應的字寫上去
<a href="#" target="_blank">HTML</a>
<a href="#" target="_blank">CSS</a>
<a href="#" target="_blank">JavaScript</a>
<a href="#" target="_blank">Vue</a>
<a href="#" target="_blank">React</a>
第二步查看效果發現默認為藍色，和有下劃線，且在同一行。這時候就需要使用color，text-decoration和display屬性
a {
color: white;
display: block;
text-decoration: none;
}
第三步看設計圖還需要設置盒子的寬度和長度，背景顏色，字的大小，在盒子里面水平和垂直居中
a {
background-color: #3064bb;
width: 200px;
height: 80px;
color: white;
font-size: 18px;
text-align: center;
line-height: 80px;
display: block;
text-decoration: none;
}
第四步還需要設置鼠標懸停效果，用hover屬性
a:hover {
background-color: #608dd9;
width: 200px;
height: 80px;
}
總體代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
background-color: #3064bb;
width: 200px;
height: 80px;
color: white;
font-size: 18px;
text-align: center;
line-height: 80px;
display: block;
text-decoration: none;
}
a:hover {
background-color: #608dd9;
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<h1>搜索熱詞</h1>
<a href="#" target="_blank">HTML</a>
<a href="#" target="_blank">CSS</a>
<a href="#" target="_blank">JavaScript</a>
<a href="#" target="_blank">Vue</a>
<a href="#" target="_blank">React</a>
</body>
</html>
4、遇到的問題
第一個忘記了下劃線如何刪除；
第二個一開始想用div標簽嵌套a標簽，但發現div標簽的話a標簽的字體顏色就改變不了。a特殊不能繼承，所以得再單獨設置。比較麻煩所以干脆直接用a標簽；
總結
以上是生活随笔為你收集整理的自学前端-HTML5+CSS-综合案例一-热词的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言正则表达式
- 下一篇： HTML5CSS3提高