給div命名,使邏輯更加清晰

我們把一些標簽放進<div>里,劃分出一個獨立的邏輯部分。為了使邏輯更加清晰,我們可以為這一個獨立的邏輯部分設置一個名稱,用id屬性來為<div>提供唯一的名稱,這個就像我們每個人都有一個身份證號,這個身份證號是唯一標識我們的身份的,也是必須唯一的。

如下兩圖進行比較,如果設計師把兩個圖給你,哪個圖你看上去能更快的理解呢?是不是右邊的那幅圖呢。

語法:

<div ?id="版塊名稱">…</div>

任務

我來試試:給網頁的獨立的版塊添加“標記”

1、在右部編輯器中的第8行修改<div>代碼為<div id="hotList">。

2、在右部編輯器中的第16行修改<div>代碼為<div id="learningInstructed">。

附圖:

?

轉載于:https://www.cnblogs.com/htmll/p/7617660.html

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

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

相關文章

css邊框顏色漸變

在實際開發中&#xff0c;我們經常遇見邊框需要背景漸變的實現要求&#xff0c;那么如何去實現呢&#xff0c;今天給大家分享依稀幾種情況 1.直角的背景漸變 <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta…

ActiveMQ:了解內存使用情況

正如最近的一些郵件列表電子郵件和從Google返回的許多信息所表明的那樣&#xff0c;ActiveMQ的SystemUsage尤其是MemoryUsage功能使一些人感到困惑。 我將嘗試解釋有關MemoryUsage的一些細節&#xff0c;這些細節可能有助于理解它的工作方式。 我將不介紹StoreUsage和TempUsage…

php設置排序,7種php基本排序實現方法

本文總結了一下常用的7種排序方法&#xff0c;并用php語言實現。1、直接插入排序/** 直接插入排序,插入排序的思想是&#xff1a;當前插入位置之前的元素有序&#xff0c;* 若插入當前位置的元素比有序元素最后一個元素大&#xff0c;則什么也不做&#xff0c;* 否則在有序序列…

170406、用uid分庫,uname(用戶名)上的查詢怎么辦

【緣起】 用戶中心是幾乎每一個公司必備的基礎服務&#xff0c;用戶注冊、登錄、信息查詢與修改都離不開用戶中心。 當數據量越來越大時&#xff0c;需要多用戶中心進行水平切分。最常見的水平切分方式&#xff0c;按照uid取模分庫&#xff1a; 通過uid取模&#xff0c;將數據分…

bzoj2144: 跳跳棋(二分/倍增)

思維好題&#xff01; 可以發現如果中間的點要跳到兩邊有兩種情況&#xff0c;兩邊的點要跳到中間最多只有一種情況。 我們用一個節點表示一種狀態&#xff0c;那么兩邊跳到中間的狀態就是當前點的父親&#xff0c;中間的點跳到兩邊的狀態就是這個點的兩個兒子&#xff0c;從而…

電腦投屏軟件哪個好_目前當貝市場中投屏軟件哪個好,最全面投屏技巧盤點

現在不管是在家里還是公司里&#xff0c;為了看一些是視頻和資料&#xff0c;投屏到電視上是一件非常必要的事情&#xff0c;但是現在投屏的技巧各種各樣&#xff0c;投屏的軟件也是五花八門&#xff0c;小編平常也是經常投屏&#xff0c;也試過非常多的方法&#xff0c;這邊分…

從零開始的全棧工程師——html篇1.2

起名方式與CSS 一.起名方式(起名方式也叫選擇器) 起名的目的是為了給標簽添加屬性 常見的3種選擇器有 標簽選擇器 id選擇器(使用的時候加#) class選擇器(使用的時候加.) 樣式的要求是由選擇器的權重來決定的 標簽的權重為1 class的權重是10 id的權重是100 權重是可…

android開發中用到的px、dp、sp

先介紹一下這幾個單位&#xff1a;px : pixels(像素),相應屏幕上的實際像素點。dip :device independent pixels&#xff0c;與密度無關的像素&#xff0c;基于屏幕密度的抽象單位。在每英寸160點的顯示器上。 1dp 1px &#xff0c;即1 &#xff1a;1關系。&#xff08;dp 就是…

Spring:設置日志依賴項

這篇文章描述了如何在Spring中設置日志依賴。 它基于Dave Syer的帖子中提供的信息 。 這里提供有關Java日志記錄框架的提醒。 該代碼示例可在GitHub的Spring-Logging-Dependencies目錄中找到。 Spring使用Jakarta Commons Logging API&#xff08;JCL&#xff09;。 不幸的是&…

【Codeforces Round #424 (Div. 2) C】Jury Marks

【Link】:http://codeforces.com/contest/831/problem/C 【Description】 有一個人參加一個比賽; 他一開始有一個初始分數x; 有k個評委要依次對這個人評分; 依照時間順序依次給出這k個人的評分(可能為負數,負數的時候,表示分數會降低,而如果為正,則分數增加); 然后有一個…

php copy 文件夾,php刪除與復制文件夾及其文件夾下所有文件的實現代碼

/*復制xCopy函數用法&#xff1a;* xCopy("feiy","feiy2",1):拷貝feiy下的文件到 feiy2,包括子目錄* xCopy("feiy","feiy2",0):拷貝feiy下的文件到 feiy2,不包括子目錄*參數說明&#xff1a;* $source:源目錄名* $destina…

安卓app開發工具_怎么開發app軟件需要多少錢?主流app開發工具盤點

現在智能手機的快速普及讓手機app在生活中越來越重要&#xff0c;很多企業及創業者也意識到了app的重要性&#xff0c;但是怎么開發app軟件&#xff1f;有哪些主流app開發工具呢&#xff1f;這里就為大家分享一下如何快速開發app軟件。一、編程app開發工具主要針對專業的程序員…

大話設計模式讀書筆記(十一) 觀察者模式

觀察者模式&#xff1a; 書中通過小菜描述同事在公司看股票行情&#xff0c;并請求前臺幫忙在老板回來時提醒同事&#xff0c;引出需求。將前臺通知同事老板回來的事寫成程序。未用模式實現&#xff1a; 1 //前臺類2 public class Secretary {3 private List<StockObser…

解決高度塌陷

<!DOCTYPE html> <html lang"en" dir"ltr"><head><meta charset"utf-8"><title>高度塌陷解決</title><style media"screen">.box1{border: 10px #bfc993 solid;}.box2{width: 100px;height…

IBM AIX:Java進程大小監視

本文將為您提供有關如何計算在IBM AIX 5.3 OS上運行的Java VM進程的Java進程大小內存占用量的快速參考指南。 這是我關于該主題的原始文章的補充文章&#xff1a; 如何在AIX上監視Java本機內存 。 我強烈建議所有參與生產支持或AIX上部署Java應用程序開發的人員閱讀此書。 為…

java 饑餓現象,Java單例模式、饑餓模式代碼實例

class MyThreadScopeData {// 單例private MyThreadScopeData() {}// 提供獲取實例方法public static synchronized MyThreadScopeData getThreadInstance() {// 從當前線程范圍內數據集中獲取實例對象MyThreadScopeData instance map.get();if (instance null) {instance n…

12. 抽象與密封

一、抽象類與抽象方法 1、抽象類與抽象方法聲明&#xff1a; 抽象類&#xff1a;在面向對象的概念中&#xff0c;所有的類都是通過對象來描述&#xff0c;但并不是所有的類都用來描述對象。如果一個類中沒有足夠的信息來描繪一個具體的對象&#xff0c;這樣的類就是抽象類。  …

pstate0 vid數值意義_天體運動的簡單數值計算

&#xff08;建議閱讀全文&#xff09; 預備知識 萬有引力&#xff0c; 彈簧振子受迫運動的簡單數值計算    下面我們來用一種極其簡單的算法對單個天體在中心天體的萬有引力作用下的運動進行數值計算&#xff0e; 事實上該問題存在解析解&#xff08;見開普勒三定律&#x…

集合框架

集合框架包含的內容&#xff1a; 集合框架的接口&#xff1a; List接口實現類 ArrayList 1 package com.jredu.ch01;3 import java.util.ArrayList;5 import java.util.List;7 public class ArrayListTest {9 public static void main(String[] args) { 10 // TODO…

使用CSS實現無滾動條滾動

我們都知道&#xff0c;擼頁面的時候當我們的內容超出了我們的div&#xff0c;往往會出現滾動條&#xff0c;影響美觀。 尤其是當我們在做一些導航菜單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條&#xff0c;也不希望超出去的內容被放逐&#xff0c;就要保留…