整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用HTML怎么制作網(wǎng)頁(yè)呢?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來(lái)完成頁(yè)面的排版設(shè)計(jì) ? ,常用的網(wǎng)頁(yè)設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的。
一、網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
二、網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開(kāi)后就能即時(shí)看到網(wǎng)站的效果。
三、網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
四、網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件;
五、網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面; (2) css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等; (3) js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼)。
們先分析一下整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)，整體內(nèi)容采用的是一個(gè)兩列布局，導(dǎo)航無(wú)限延長(zhǎng)的背景，并且添加了分割符號(hào)
素材：
第一步： 去掉默認(rèn)的HTML間距。
*{padding:0;margin:0;}
Ps(我們可以在后期進(jìn)行修改,根據(jù)網(wǎng)頁(yè)中使用的HTML元素的個(gè)數(shù)如body,h1,div等)
第二步：按效果圖頭部灰色背景但是無(wú)限延長(zhǎng)
HTML代碼：
<div class="top">
<div id="top">
<p>讀書屋歡迎您！</p>
</div>
</div>
兩個(gè)DIV嵌套，<div class="top">這個(gè)需要100%添加背景，而內(nèi)側(cè)<div id="top"> 實(shí)現(xiàn)居中布局就可以了
.top{width:100%;background:#f5f5f5;height:35px;}
解釋：寬度100%,添加背景顏色，設(shè)定高度，這樣在縮放網(wǎng)頁(yè)，始終可以看到灰色的背景
#top {width:970px;margin:0 auto;}
解釋：網(wǎng)頁(yè)寬度970像素，使id=top的div元素進(jìn)行居中margin:0 auto;
#top p{font-size:13px;line-height:35px;}
解釋：改變文字大小，就一行宣傳文字，通過(guò)行高（和高度一樣時(shí)間）實(shí)現(xiàn)垂直居中l(wèi)ine-height:35px;
第三步：logo的實(shí)現(xiàn)，采用典型的以圖換字的方式，有利于SEO
HTML代碼：
<div id="header">
<h1>
<a href="#">css教程</a>
</h1>
</div>
CSS編碼：
#header h1 a{
background:url(images/logo.png) no-repeat 0 50%;
display:block;
width:215px;height:60px;
text-indent:-9999px;
}
在的網(wǎng)站效果多樣而功能復(fù)雜，技術(shù)棧也多種多樣，react\vue\jquery等層出不窮，對(duì)于編程愛(ài)好者初學(xué)者入門極不友好。我這里有一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)站模板，包括主頁(yè)、項(xiàng)目和聯(lián)系方式、關(guān)于我四個(gè)部分。你可以根據(jù)自己的需求進(jìn)行調(diào)整。
模板效果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的個(gè)人網(wǎng)站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主頁(yè)</a></li>
<li><a href="about.html">關(guān)于我</a></li>
<li><a href="projects.html">項(xiàng)目</a></li>
<li><a href="contact.html">聯(lián)系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>歡迎來(lái)到我的個(gè)人網(wǎng)站</h1>
<p>我是一個(gè)充滿激情的程序員，熱衷于學(xué)習(xí)和分享知識(shí)。</p>
</section>
</main>
<footer>
<p>? 2024 我的名字</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>關(guān)于我 - 我的個(gè)人網(wǎng)站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主頁(yè)</a></li>
<li><a href="about.html">關(guān)于我</a></li>
<li><a href="projects.html">項(xiàng)目</a></li>
<li><a href="contact.html">聯(lián)系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="about">
<h1>關(guān)于我</h1>
<p>你好！我是[一周一志程序員]，一名經(jīng)驗(yàn)豐富的Java程序員，致力于能源電力SaaS和系統(tǒng)架構(gòu)設(shè)計(jì)。</p>
<p>目前我正在備考2024年11月6日的《系統(tǒng)架構(gòu)設(shè)計(jì)師》考試，并在著手成為獨(dú)立開(kāi)發(fā)者，輕創(chuàng)業(yè)準(zhǔn)備中。</p>
</section>
</main>
<footer>
<p>? 2024 一周一志程序員</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>項(xiàng)目 - 我的個(gè)人網(wǎng)站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主頁(yè)</a></li>
<li><a href="about.html">關(guān)于我</a></li>
<li><a href="projects.html">項(xiàng)目</a></li>
<li><a href="contact.html">聯(lián)系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="projects">
<h1>項(xiàng)目</h1>
<ul>
<li><strong>電力SaaS平臺(tái)開(kāi)發(fā)</strong> - 開(kāi)發(fā)用電考核模塊。</li>
<li><strong>系統(tǒng)架構(gòu)設(shè)計(jì)</strong> - 為不同客戶提供系統(tǒng)架構(gòu)解決方案。</li>
<li><strong>Spring Boot 項(xiàng)目</strong> - 創(chuàng)建和管理多個(gè)Spring Boot項(xiàng)目。</li>
</ul>
</section>
</main>
<footer>
<p>? 2024 我的名字</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聯(lián)系方式 - 我的個(gè)人網(wǎng)站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主頁(yè)</a></li>
<li><a href="about.html">關(guān)于我</a></li>
<li><a href="projects.html">項(xiàng)目</a></li>
<li><a href="contact.html">聯(lián)系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="contact">
<h1>聯(lián)系方式</h1>
<p>如果你有任何問(wèn)題或合作意向，請(qǐng)隨時(shí)聯(lián)系我。</p>
<p>Email: <a href="mailto:1184795629@qq.com">your-email@domain.com</a></p>
<p>公眾號(hào): <a href="#">一周一志程序員</a></p>
<p>抖音: <a href="#">麥冬會(huì)開(kāi)花</a></p>
</section>
</main>
<footer>
<p>? 2024 我的名字</p>
</footer>
</body>
</html>body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #06362B;
color: #fff;
padding: 1rem 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
background: #f4f4f4;
padding: 2rem;
text-align: center;
}
.about, .projects, .contact {
padding: 2rem;
}
footer {
background: #06362B;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}你可以將這些文件保存為index.html、about.html、projects.html、contact.html和styles.css，并將它們放在同一目錄下。然后，你可以通過(guò)瀏覽器打開(kāi)index.html來(lái)查看你的個(gè)人網(wǎng)站。
學(xué)習(xí)使用，希望這對(duì)你有幫助把！如果你有其他需求或需要進(jìn)一步定制，請(qǐng)告訴我。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
