整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html+css制作登錄頁面

          手向,大佬輕噴

           用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的還是DW,當然不同軟件寫出的前端Html5代碼都是一致的。

            一、網站布局方面:計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

            二、網站程序方面:計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器,已達到打開后就能即時看到網站的效果。

            三、網站素材方面:計劃收集各大平臺好看的圖片素材,并精挑細選適合網頁風格的圖片,然后使用PS做出適合網頁尺寸的圖片。

            四、網站文件方面:網站系統文件種類包含:html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;

            五、網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中: (1) html文件包含:其中index.html是首頁、其他html為二級頁面; (2) css文件包含:css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含:js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。

          lt;div>塊元素基礎屬性講解

          <div>元素是個有故事的元素,這個元素很早就出現在html超文本標記語言中,它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

          在我還上初中的時候,智能手機還沒有出現,更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。

          那時,大街小巷上有好多網吧。

          那時,馬云剛剛辭去工作準備創業。

          那時,發送郵件的操作都會出現在計算機課程中。

          那時,對頁面還沒有現在的跨平臺要求。

          那時,flashplayer大行其道。

          那時,dreamwaver、flash、fireworks被稱為網頁三劍客!

          那時,制作網頁可以不用懂的html的寫法!

          第一次接觸網頁制作是在大學的專業課上,使用三劍客,通過點擊軟件菜單中的按鈕就能制作網頁,精力都放在了如何使用flash制作酷炫的交互動畫上了。

          那時,對html還沒有深刻的認識,但是卻對<table></table>這個標簽有著極深的印象。

          因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的!

          也就是說,在移動智能設備誕生之前,在用戶對頁面還沒有可以適應不同屏幕比例的要求前,<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作,而且把兼職干成了主業,讓<div>這個專業的塊元素閑置了好久。

          直到智能手機,平板電腦產生后,由于對頁面的跨平臺顯示的要求的出現(這類適應多平臺的頁面布局叫做響應式布局),<table>表格制作的頁面在響應式布局大行其道的今天,用它布局的頁面開始出現代碼冗余,維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

          從此,頁面制作的世道變了,從不需要編程就能制作頁面的三劍客,變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式,過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。

          dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件,還搞出一個叫做Muse的軟件,但是依舊沒能撬動代碼書寫的方式。

          這個故事在開始學習<div>和css布局之前我都會講給學生(一群文科生)聽,我只是想告訴大家,學習任何計算機技術,我們可以從簡單易學的方式入手,但要有透過這種方式向下挖掘核心知識的決心和勇氣!對于自己從事的工作我們不能滿足于會做,還要盡量透析它的原理,這樣才能在技術換代中不會被輕易淘汰。

          在我研究生階段,有一門讓我終生難忘的選修課,這門課叫做《數字娛樂技術概述》,這門課既不娛樂也不概述,但是通篇都是數字,那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。

          從此我開始學習數學。因為老師的一句話:從2000年到現在(2014)雖然各種軟件層出不窮,但是計算機圖形學的核心算法卻幾乎沒什么改變

          向下挖掘雖然很難,但是有必要!與各位共勉!

          下面開始今天的內容。

          首先,我們將之前的"第一個頁面.html"文件復制一個,叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。

          如圖:

          下面,我們在<body></body>中間添加<div></div>標簽。示例代碼如下:

          <body><div></div></body>

          我們看看效果:

          啦啦啦,什么都沒有!

          為了讓大家可以看出來不同,我們為<div>添加邊框屬性!

          我們使用style屬性為<div>添加邊框,style屬性里的代碼就是以后在CSS中使用的代碼!實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程,這里不再贅述。

          示例代碼如下:(通過style = "border-style: solid;"可以為很多元素添加邊框,就不需要大家記憶或查詢不同元素的不同寫法,是不是很方便!)

          <div style = "border-style: solid;">

          效果如圖:

          因為里面沒有內容,所以<div>的寬度是0,因此顯示的就是一條直線。下面我們向<div>中添加內容。

          為了看起來花哨些,加張圖片吧!

          示例圖片

          示例代碼如下:

          <div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%;"></div>

          大家請按照<img>中的scr自行建立文件夾和命名吧!如果您看不懂請參照《HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作》

          效果如下:

          其中,我們也是使用了style的方式為<img>設置的寬度,這個設置方法在<div>中一樣使用!

          代碼示例:大家注意寫法,不同的屬性都添加到style的雙引號中即可,同時使用;隔開!

          <div style = "border-style: solid; width:50%;">
            <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
              </div>

          效果如圖:

          整個邊框縮小了50%,圖片更有趣,尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

          為了方便觀看,我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示,我們在新的<div>中添加一段文字!

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
              <div>
              <p>學習網頁制作非常有趣!</p>
          </div>
          </div>

          效果如下:

          如果為了美觀,我們讓文字到圖片右邊的空間中怎么做呢?

          示例代碼如下:

          <div style = "float:right;"><p>學習網頁制作非常有趣!</p></div>

          我們通過為新的<div>標簽中的style屬性添加float(浮動)屬性,同時設置為right(右)。

          頁面效果如圖:

          大家思考一下如何讓圖片與文字都靠在左邊呢?

          是不是為圖片style添加float:left;同時把新<div>的float改為left?

          我們試試看!

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <div style = "float:left;">
                <p>學習網頁制作非常有趣!</p>
          </div>
          </div>

          頁面效果:

          效果完全不對,圖片和文字跑到外邊來了。

          這是div布局中經常出現的一個問題!解決方案有點奇葩,既不是修改<img>屬性也不是修改<div>屬性,而是增加一組空的<div></div>標簽!給這個新的空的<div>的style設置為"clear:both"即可修正。

          示例代碼如下:

          <div style = "border-style: solid;">
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <div style = "float:left;">
                <p>學習網頁制作非常有趣!</p>
          </div>
          <div style = "clear:both;"></div>
          </div>

          頁面效果如下:

          值得注意的是,如果您不使用<div>的話直接使用<img>和<p>,同時對兩個標簽的style設置為float:left,是沒有問題的,只有把它們放到<div>中才會出現上面的情況。

          代碼如下:

          <body>
            <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
              <p style = "float:left;">學習網頁制作非常有趣!</p>
          </body>

          頁面顯示效果如下:

          大家觀察一下,文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況,而且文字也變小的問題在以后的講解中我們再深入探討!

          現在希望大家可以記牢這個情況和操作,更多布局問題我們會在CSS的浮動(float)的講解中詳細說明。

          疫情期間,請大家少出門,不聚會,沒事在家學學網頁制作,即抗擊疫情又提高自己!

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 亚洲av无码一区二区三区天堂| 色综合一区二区三区| 亚洲欧洲专线一区| 国产三级一区二区三区| 亚洲韩国精品无码一区二区三区| 麻豆国产一区二区在线观看| 另类免费视频一区二区在线观看| 国产一区二区三区在线观看影院| 欧美激情国产精品视频一区二区| 国产成人无码一区二区三区在线| 搜日本一区二区三区免费高清视频| 亚洲综合无码一区二区| 国模吧一区二区三区| 国产午夜三级一区二区三| 国产伦精品一区二区三区免费迷 | 性色av无码免费一区二区三区| 无码囯产精品一区二区免费| 亚洲一区二区三区AV无码| 一区二区三区视频观看| 国产福利一区二区在线视频 | 久久一区二区三区免费| 国产一区二区三区露脸| 免费一区二区无码视频在线播放| 精品国产区一区二区三区在线观看 | 国产精品主播一区二区| 亚洲国产成人久久一区久久| 精品一区二区三区无码免费直播| 后入内射国产一区二区| 一区二区国产在线播放| 国模丽丽啪啪一区二区| 无码少妇一区二区三区浪潮AV| 国产AV午夜精品一区二区三区| 国产精品美女一区二区视频 | 久久久精品人妻一区亚美研究所| 日韩亚洲一区二区三区| 中文字幕亚洲综合精品一区| 欧美人妻一区黄a片| 一区二区三区四区视频在线| 少妇无码AV无码一区| 久久久久99人妻一区二区三区| 精品欧洲AV无码一区二区男男 |