【CSS】相對位置小練習

要求:

小練習案例

成果:

練習成果

代碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相對位置小練習</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><div class="Q1"><a href="http://www.baidu.com" target="_blank" class="W1">百度</a><a href="http://www.google.com" target="_blank" class="W2">谷歌</a><a href="http://www.bing.com" target="_blank" class="W3">必應</a><a href="http://www.taobao.com" target="_blank" class="W4">淘寶</a><a href="http://www.jd.com" target="_blank" class="W5">京東</a></div>
</body>
</html>
/*做一個最外層的框架*/
.Q1{width: 310px;height: 310px;border: #ff5000 3px solid;
}
/*給所有a類創建偽類,使鼠標移動到指定位置變色*/
.Q1 a:hover{background: blue;
}
/*調整超鏈接字體顏色,并且把下劃線去掉*/
.Q1 a{width: 100px;height: 100px;color: white;text-decoration: none;background: deeppink;
}
/*下面是對五個具體的超鏈接進行變換*/
.W1{display: inline-block;margin: 5px 0 0 5px;
}
.W2{display: inline-block;margin: 5px 5px 0 0;/*相對位置進行變換*/position: relative;right: -95px;
}
.W3{display: block;margin: 5px 0 0 0;position: relative;right: -105px;top: -5px
}
.W4{display: inline-block;margin: 0 0 5px 5px;position: relative;top: -5px
}
.W5{display: inline-block;margin: 0 5px 5px 0;position: relative;top: -5px;right: -95px;
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/73926.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/73926.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/73926.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

外設的中斷控制

如ADC、SPI、I2C、TIM等使用STM32 HAL庫時的中斷函數調用方式和UART非常類似&#xff0c;都有底層直接使能中斷和上層庫函數管理兩種方式。下面詳細說明幾種典型外設&#xff1a; 一、ADC外設 &#xff08;1&#xff09;直接使能中斷&#xff08;底層控制&#xff09;&#xf…

網絡傳輸優化之多路復用與解復用

一、基本概念 多路復用 發送端將來自多個應用或進程的數據流合并到同一物理信道中傳輸的過程。核心目的是提高信道利用率&#xff0c;減少資源浪費。例如&#xff0c;多個網絡應用&#xff08;如瀏覽器、郵件客戶端&#xff09;通過不同端口將數據封裝為報文段&#xff0c;共享…

【軟考-架構】10.1、軟件工程概述-CMM-軟件過程模型-逆向工程

?資料&文章更新? GitHub地址&#xff1a;https://github.com/tyronczt/system_architect 文章目錄 軟件工程基礎知識軟件工程概述能力成熟度模型能力成熟度模型CMM能力成熟度模型集成CMMI &#x1f4af;考試真題第一題第二題 軟件過程模型瀑布模型&#xff08;SDLC&#…

python將整個txt文件寫入excel的一個單元格?

要將整個txt文件寫入Excel的一個單元格&#xff0c;可以使用Python的openpyxl庫來實現。以下是一個簡單的示例代碼&#xff1a; from openpyxl import Workbook# 讀取txt文件內容 with open(file.txt, r) as file:txt_content file.read()# 創建一個新的Excel工作簿 wb Work…

車載以太網網絡測試 -25【SOME/IP-報文格式-1】

1 摘要 本專題接著上一專題對SOME/IP進行介紹&#xff0c;主要對SOME/IP報文格式以及定義的字段進行詳細介紹&#xff0c;有助于在實際項目過程中對SOME/IP報文的理解。 上文回顧&#xff1a; 車載以太網網絡測試 -24【SOME/IP概述】 2 SOME/IP-報文格式 通過上個專題介紹&a…

【區塊鏈安全 | 第五篇】DeFi概念詳解

文章目錄 DeFi1. DeFi 生態概覽2. 去中心化交易所&#xff08;DEX&#xff09;2.1 AMM&#xff08;自動做市商&#xff09;模型2.2 訂單簿模式&#xff08;現貨交易&#xff09; 3. 借貸協議3.1 Aave3.2 使用閃電貸&#xff08;Flash Loan&#xff09; 4. 穩定幣&#xff08;St…

問題:md文檔轉換word,html,圖片,excel,csv

文章目錄 問題&#xff1a;md文檔轉換word&#xff0c;html&#xff0c;圖片&#xff0c;excel&#xff0c;csv&#xff0c;ppt**主要職責****技能要求****發展方向****學習建議****薪資水平** 方案一&#xff1a;AI Markdown內容轉換工具打開網站md文檔轉換wordmd文檔轉換pdfm…

代碼隨想錄刷題day53|(二叉樹篇)106.從中序與后序遍歷序列構造二叉樹(▲

目錄 一、二叉樹理論知識 二、構造二叉樹思路 2.1 構造二叉樹流程&#xff08;給定中序后序 2.2 整體步驟 2.3 遞歸思路 2.4 給定前序和后序 三、相關算法題目 四、易錯點 一、二叉樹理論知識 詳見&#xff1a;代碼隨想錄刷題day34|&#xff08;二叉樹篇&#xff09;二…

前端知識點---用正則表達式判斷郵箱(javascript)

// 全面的正則&#xff08;兼容大多數情況&#xff09; const emailRegex /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/;// 或直接使用瀏覽器內置驗證 <input type"email" required>/&#xff1a;正則表達式的起始和結束標志。 ^&#xff1a;匹配字符串的…

PyQt6實例_批量下載pdf工具_界面開發

目錄 前置&#xff1a; 代碼&#xff1a; 視頻&#xff1a; 前置&#xff1a; 1 本系列將以 “PyQt6實例_批量下載pdf工具”開頭&#xff0c;放在 【PyQt6實例】 專欄 2 本系列涉及到的PyQt6知識點&#xff1a; 線程池&#xff1a;QThreadPool,QRunnable&#xff1b; 信號…

在word中使用zotero添加參考文獻并附帶超鏈接

一、引言 在寫大論文時&#xff0c;為了避免文中引用與文末參考文獻頻繁對照、修改文中引用順序/引用文獻時手動維護參考文獻耗易出錯&#xff0c;擬在 word 中使用 zotero 插入參考文獻&#xff0c;并為每個參考文獻附加超鏈接&#xff0c;實現交互式閱讀。 版本&#xff1a…

Selenium文件上傳

在 Web 自動化測試中,文件上傳是一項常見的任務。不同的網站和前端技術可能導致上傳方式有所不同,因此需要采用不同的方法進行處理。 方法 1:使用 send_keys() 直接上傳(最常用) 適用場景: 頁面中 有標準的 <input type="file"> 標簽。 不需要彈出 Wind…

線程概念與控制(中)

線程概念與控制&#xff08;上&#xff09;https://blog.csdn.net/Small_entreprene/article/details/146464905?sharetypeblogdetail&sharerId146464905&sharereferPC&sharesourceSmall_entreprene&sharefrommp_from_link我們經過上一篇的學習&#xff0c;接…

【Unity】 鼠標拖動物體移動速度跟不上鼠標,會掉落

錯誤示范&#xff1a; 一開始把移動的代碼寫到update里去了&#xff0c;發現物體老是掉(總之移動非常不流暢&#xff0c;體驗感很差&#xff09; void Update(){Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit, M…

MATLAB 控制系統設計與仿真 - 30

用極點配置設計伺服系統 方法2-反饋修正 如果我們想只用前饋校正輸入&#xff0c;從而達到伺服控制的效果&#xff0c;我們需要很精確的知道系統的參數模型&#xff0c;否則系統輸出仍然具有較大的靜態誤差。 但是如果我們在誤差比較器和系統的前饋通道之間插入一個積分器&a…

VMware Windows Tools 存在認證繞過漏洞(CVE-2025-22230)

漏洞概述 博通公司&#xff08;Broadcom&#xff09;近日修復了 VMware Windows Tools 中存在的一個高危認證繞過漏洞&#xff0c;該漏洞編號為 CVE-2025-22230&#xff08;CVSS 評分為 9.8&#xff09;。VMware Windows Tools 是一套實用程序套件&#xff0c;可提升運行在 VM…

羅杰斯特回歸

定義 邏輯回歸其實就是原來的線性回歸加了激活函數&#xff0c;這個函數其實就是sigmoid函數&#xff0c;把一個回歸的連續數值壓縮到了0到1的空間&#xff0c;其實只要有函數能夠滿足把數值壓縮到0,1之間就可以&#xff08;因為0到1之間的數值就是概率值&#xff09; 對于分類…

Java多線程與JConsole實踐:從線程狀態到性能優化!!!

目錄 一、前言二、JConsole 使用教程二、線程的基本狀態2.1新建狀態&#xff08;New&#xff09;2.2就緒狀態&#xff08;Ready&#xff09;2.3運行狀態&#xff08;Running&#xff09;2.4 阻塞狀態&#xff08;Blocked&#xff09;2.5. 等待狀態&#xff08;Waiting&#xff…

基于django優秀少兒圖書推薦網(源碼+lw+部署文檔+講解),源碼可白嫖!

摘要 時代在飛速進步&#xff0c;每個行業都在努力發展現在先進技術&#xff0c;通過這些先進的技術來提高自己的水平和優勢&#xff0c;圖書推薦網當然不能排除在外。本次開發的優秀少兒圖書推薦網是在實際應用和軟件工程的開發原理之上&#xff0c;運用Python語言、爬蟲技術…

《網絡管理》實踐環節01:OpenEuler22.03sp4安裝zabbix6.2

蘭生幽谷&#xff0c;不為莫服而不芳&#xff1b; 君子行義&#xff0c;不為莫知而止休。 1 環境 openEuler 22.03 LTSsp4PHP 8.0Apache 2Mysql 8.0zabbix6.2.4 表1-1 Zabbix網絡規劃&#xff08;用你們自己的特征網段規劃&#xff09; 主機名 IP 功能 備注 zbx6svr 19…