【原創】 實戰div css網頁布局

2021-12-29 郭朋濤

【郭老師閒話】新學期開學了,又要開始忙了。

正文--

整個寫作過程,內容安排,都是環環相扣的,也是一個歷史經驗的總結。

這個學習思路和方法,多年來,被來自全國各地的眾多學生所學習使用。

每一節的內容,都跟之前的內容,有著或多或少的聯繫。

綜合之前所講的知識,本篇,我們來個串燒。

圍繞怎麼做一個簡易的網頁,回顧其步驟:

1、新建站點

2、打開index.html,按照網頁的六個組成部分,依次創建logo層、導航層、banner層、內容層、友情連結層、版權層

3、在firework中切圖,在firework中,打開之前做好的網頁效果圖psd源文件。按照6大組成部分,進行切圖。作為初學者,可以先不考慮網頁中的文字。(關於如果切圖下節講)

4、在紙上,記錄下每一部分寬高具體的尺寸。

5、通過css控制面板,對每個層進行定義,如它們的寬、高,邊框、背景、填充、邊界等。定義的時候,必須定義左浮動。

在我們通過css來定義div的時候,這個地方一定要對應。

比如要定義這個<div id="logo"></div>

我們點擊右上角css樣式屬性裡的「+」圖標(如下圖)

點擊之後,就會出來這個對話框。

因為id是logo,所以這裡一定要對應選擇高級。

回想一下我們之前講過的css三個選擇符。

6、預覽其效果,感受其作用。

7看著效果,對於的去看代碼及其含義。

我相信有很多人會說,你說的這些,心裡倒是明白了。做的時候還是有很多問題啊。

心裡明白了,思路理清了。學習的目的就達到了。

我一直說,做好一個網頁如果給10分,那麼理清思路就已經得6分了。

想當年,我學習的時候,就是因為不知道做網頁的思路,花費掉了兩年多的時間。真正去做,用的時間實在是太少了。

思路理清楚了,克服細節的問題,找百度就好了。

比如說,用ps怎麼做金屬字,百度一下:ps金屬字。

你看的將是超詳細的步驟。

這就跟廣告公司,做設計一樣。好的設計,不是說技術多牛,而是誰的創意最牛。

作業:

1、做網頁最重要的是什麼?

2、獨自練習試試,看能掌握多少?

----

文/選自《網頁設計宣言》


【0基礎如何學網頁製作】

相關焦點

  • 教程 | Web前端教程2:CSS+DIV頁面布局
    (2)使用 <div> 元素的 HTML 布局注釋:<div> 元素常用作布局工具,因為能夠輕鬆地通過 CSS 對其進行定位。參考3school有關div內容學習div+css界面布局得知識。
  • div和css
    說到格式就必須說到屬性。屬性是對象的基本組成部分。屬性在計算機內部是由一個個參數構成的。比如字的屬性可以寫成函數形式,字(五號,宋體,黃色,。。。)等等,屬性是有窮的,也就是屬性的參數是有窮的。屬性的參數組成大部分都是由格式組成的。設置格式就是設置參數,格式是參數的一部分。格式是對象的一種參數設置。
  • Div+CSS 基礎入門教程
  • DIV+CSS命名規範大全
    右側 main-right -右側布局導航條 nav --網頁菜單導航條內容 content 用於網頁中部主體底部 footer --用於底部網頁公共命名CSS樣式命名說明>#wrapper頁面外圍控制整體布局寬度#container或#content容器,用於最外層#layout布局#head, #header頁頭部分#foot, #footer頁腳部分#nav主導航#subnav
  • CSS 新版網格布局簡述
    網格布局CSS 網格是一個用於 web 的二維布局系統。利用網格,你可以把內容按照行與列的格式進行排版。另外,網格還能非常輕鬆地實現一些複雜的布局。網格是由一系列水平及垂直的線構成的以一種布局模式。 class="container">        <div>One</div>        <div>Two</div>        <div>Three</div>        <div>Four</div>        <div>Five
  • HTML DIV+CSS 命名規範大全
    二、相對網頁外層重要部分CSS樣式命名外套 wrap ---用於最外層頭部 header 用於頭部主要內容 main --用於主體內容(中部)左側 main-left ---左側布局右側 main-right -右側布局導航條 nav --網頁菜單導航條內容 content
  • Dreamweaver製作個人網頁的全過程(圖文教程第一彈)
    Hi,大家好,2021年來了,送走了艱難的2020年,去年很多場景至今都歷歷在目,仿佛就在昨日,用兩個網流語概括就是,996、我太難了,網上說今年依舊艱難,至於是否如此
  • CSS各種姿勢實現Sticky Footer
    給內容外增加父元素,並讓內容部分的底部內邊距與頁腳高度的值相等。<body>  <div class="content">    <div class="content-inside">      content    </div>  </div>  <footer class="footer
  • 前端網頁--中秋節快樂【輪播圖】
    一、準備中秋素材主要使用的素材是圖片,借用了b站花好月圓會宣傳網頁的一些圖片還有百度圖片。說句題外話,個人感覺b站很多宣傳的網頁十分的好看,風格各異,古風、動漫啥都有,但它並沒有用很多的前端特效,大部分都是圖片,所以說我十分佩服b站的美工設計師們。
  • 技術者|初探HTML5:學習製作學校網頁
    圖1.8我們可以用<div>標籤布局網頁而非表格布局來製作,目前現在的網頁設計主流就是div+css,那何為<div>?class命名的類可以在一個網頁中使用無數次。  可以說id和class都可以在網頁中任何標籤內使用。一般比較重要的部分、比較特別的盒子使用id,而小局部不重要的或小結構使用class。id調用css中以「#」井號命名的樣式選擇器,class調用css中以「.」英文半角小寫句號命名的樣式選擇器。
  • 我花2小時直接在這篇文章中敲出一個HTML DIV+CSS首頁的所有的代碼(可複製)
    用了2小時寫了一套學生作業水準的網站首頁,希望這篇文章和代碼能讓更多新手了解HTML DIV+CSS布局的方法和原理,而不是被一些人copy走從中獲利
  • 【前端-CSS動畫】製作聖誕節彩燈
    "> <link rel="stylesheet" href="https://fonts.googleapis.com/css?3類似例子示例01:https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html示例02:https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html示例03  running
  • 網頁CSS設計樣式基礎知識點 小白教程
    CSS(Cascading Style sheet),用於控制網頁樣式,並允許將樣式信息與網頁內容分離的一種標記性語言,它可以把網站的樣式單獨分離出來,單獨進行設置。CSS以HTML語言為基礎,提供了豐富的格式化功能,比如:字體、顏色、背景、排版等等,這樣可以更好的適應頁面美工設計。可以理解為CSS就是網頁網站美麗的外衣,可以根據需要修改想要的風格。
  • 「css基礎」你想知道的偽元素內容都在這篇文章裡(長文值得收藏)
    「偽元素」之所以稱作「偽」,除了英文從「Pseudo」翻譯過來之外,就是因為它並不是真正網頁裡的元素,但行為與表現又和真正網頁元素一樣,也可以對其使用CSS 操控。通過content 和counters 的搭配,我們就可以告別預設值的困擾,甚至可以在不使用清單ul 和li 的狀況下,實現和清單一模一樣的效果,舉例來說,我們純粹通過div 模擬一個清單的布局( 仍然必須是有父元素和子元素的概念),裡面的樣式b 就等於是ul,樣式a 就等於是li:<div class="a">第一層 <div class
  • 初識HTML中的塊元素——零基礎自學網頁製作
    <div>塊元素基礎屬性講解<div>元素是個有故事的元素,這個元素很早就出現在html超文本標記語言中,它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生後一直懷才不遇。在我還上初中的時候,智慧型手機還沒有出現,更沒有平板電腦等行動裝置。
  • 50道CSS基礎面試題(附答案)
    該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中,block 布局是把塊在垂直方向從上到下依次排列的;而 inline 布局則是在水平方向來排列。彈性盒布局並沒有這樣內在的方向限制,可以由開發人員自由操作。試用場景:彈性布局適合於移動前端開發,在Android和ios上也完美支持。
  • 新年煙花/表白/拜年/情人節/ html+css+js 放一場浪漫煙花秀(含音樂/定製相片)程式設計師表白必備煙花
    2.連接成功將你寫好的頁面部署上線後, 全世界的人都可以愉快的訪問到你的網頁了(永久免費使用哦)> </div> <div class="shape"> 我愛你直到永遠 </div></div><!
  • 如何用一行 CSS 實現 10 種現代布局?
    這篇文章重點介紹一些強大的 CSS 代碼片段,用它們可以執行一些繁重的布局編程工作,還能幫助我們構建強大的新式CSS布局。這裡我們會介紹10 種新式 CSS 布局和大小調整技術,突出了單行CSS樣式代碼的強大和影響力。
  • CSS中content屬性的妙用
    --html-->11<div class="container clear">12    <div class="left">左</div>13    <div class="right">右</div>14</div>父元素.container中兩個子元素.left
  • web前端必學,10分鐘學會css的三大特性
    CSS的用處有很多,它不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。什麼是CSS?