當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

自学前端-HTML5+CSS-综合案例一-热词

發布時間：2023/10/18 HTML 487 如意码农

生活随笔收集整理的這篇文章主要介紹了自学前端-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-综合案例一-热词的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

案例
css