一荧降、??作品介紹
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置攒读，有div的樣式格局朵诫，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)薄扁。
二剪返、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239870
?? 截圖演示
08.png
07.png
06.png
05.png
04.png
03.png
02.png
01.png
)]
三、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<title>蘋(píng)果官網(wǎng)</title>
</head>
<body>
<div class="header">
<div class="main">
<div class="logo"><a href="home.html"><img src="images/logo.png" height="60"></a></div>
<div class="nav">
<a href="index.html">首頁(yè)</a>
<a href="about.html">簡(jiǎn)介</a>
<a href="new.html">新聞</a>
<a href="product.html">產(chǎn)品中心</a>
</div>
</div>
</div>
<div class="dt">
<img src="images/banner.jpg">
</div>
<div class="about">
<div class="main">
<div class="about_jian">
<h3>蘋(píng)果公司簡(jiǎn)介<br><span></span></h3>
<p>蘋(píng)果公司（Apple Inc. ）是美國(guó)一家高科技公司邓梅。由史蒂夫·喬布斯脱盲、斯蒂夫·蓋瑞·沃茲尼亞克和羅納德·杰拉爾德·韋恩（Ron Wayne）等人于1976年4月1日創(chuàng)立，并命名為美國(guó)蘋(píng)果電腦公司（Apple Computer Inc.）日缨，2007年1月9日更名為蘋(píng)果公司钱反，總部位于加利福尼亞州的庫(kù)比蒂諾。</p>
<a href="about.html">查看更多</a>
</div>
</div>
</div>
<div class="main">
<div class="title">
<h1>哪款 iPhone 適合你匣距？</h1>
</div>
<div class="sj">
<ul>
<li>
<em><img src="images/4.jpg"></em>
<h3>iPhone 13</h3>
<h6>RMB 5199 起</h6>
<img src="images/15.jpg">
<h5>實(shí)打?qū)嵉膶?shí)力</h5>
<h4>6.1 或 5.4 英寸</h4>
<p>OLED 全面屏2</p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>超快的 5G3</p>
<img src="images/16.jpg" style="padding:25px 0 0 0;">
<p>A15 仿生芯片
<br><br></p>
<img src="images/17.jpg" style="padding:25px 0 0 0;">
<p>先進(jìn)的雙攝系統(tǒng)
<br>(超廣角面哥、廣角)</p>
</li>
<li>
<em><img src="images/1.jpg"></em>
<h3>iPhone 12 Pro</h3>
<h6>RMB 8499 起</h6>
<img src="images/icon_03.jpg">
<h5>iPhone 巔峰之作。</h5>
<h4>6.1 英寸或 6.7 英寸</h4>
<p>OLED 全面屏2</p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>5G 蜂窩網(wǎng)絡(luò)3</p>
<img src="images/icon1.png" style="padding:25px 0 0 0;">
<p>A14 仿生芯片
<br>iPhone 迄今最快的芯片</p>
<img src="images/icon2.png" style="padding:25px 0 0 0;">
<p>Pro 級(jí)三攝系統(tǒng)
<br>(超廣角毅待、廣角尚卫、長(zhǎng)焦)</p>
</li>
<li>
<em><img src="images/2.jpg"></em>
<h3>iPhone 12</h3>
<h6>RMB 5499 起</h6>
<img src="images/icon_05.jpg">
<h5>實(shí)打?qū)嵉膶?shí)力。</h5>
<h4>5.4 英寸或 6.1 英寸</h4>
<p>OLED 全面屏2</p>
<img src="images/icon.png" style="padding:25px 0 0 0;">
<p>5G 蜂窩網(wǎng)絡(luò)3</p>
<img src="images/icon1.png" style="padding:25px 0 0 0;">
<p>A14 仿生芯片
<br>iPhone 迄今最快的芯片</p>
<img src="images/icon3.png" style="padding:25px 0 0 0;">
<p>先進(jìn)的雙攝系統(tǒng)
<br>(超廣角尸红、廣角)</p>
</li>
<li>
<em><img src="images/3.jpg"></em>
<h3>iPhone SE</h3>
<h6>RMB 3299 起</h6>
<img src="images/icon_07.jpg">
<h5>稱心稱手吱涉，超值入手。</h5>
<h4>4.7 英寸</h4>
<p>LCD 顯示屏</p>
<img src="images/icon6.png" style="padding:25px 0 0 0;">
<p>4G LTE 蜂窩網(wǎng)絡(luò)3</p>
<img src="images/icon4.png" style="padding:25px 0 0 0;">
<p>A13 仿生芯片
<br><br></p>
<img src="images/icon5.png" style="padding:25px 0 0 0;">
<p>單攝系統(tǒng)
<br>(廣角)</p>
</li>
</ul>
</div>
</div>
<div class="hc">
<h1>在 Apple 購(gòu)買外里，<br>好處多多怎爵。</h1>
<p>你可以選擇適合自己的付款方式，通過(guò) Apple Trade In 換購(gòu)計(jì)劃享受折抵優(yōu)惠盅蝗，<br>快速搞定各項(xiàng)設(shè)置疙咸，還可以和 Specialist 專家溝通交流。</p>
<h3>iOS 14
這種新感覺(jué)风科，
一點(diǎn)不陌生。</h3>
</div>
<div class="new">
<div class="main">
<div class="title">
<h1>最新消息</h1>
</div>
<ul>
<li>
<a href="new.html">
<img src="images/x.jpg">
<h3>Apple 零售店取貨服務(wù)現(xiàn)已在中國(guó)大陸推出</h3>
<p>2021 年 6 月 30 日</p>
</a>
</li>
<li>
<a href="new.html">
<img src="images/x1.jpg">
<h3>Apple Tower Theatre 現(xiàn)已在洛杉磯市中心開(kāi)幕</h3>
<p>2021 年 6 月 24 日</p>
</a>
</li>
<li>
<a href="new.html">
<img src="images/x2.jpg">
<h3>Apple 推出 Today at Apple 創(chuàng)想營(yíng)乞旦，為年輕創(chuàng)...</h3>
<p>2021 年 6 月 22 日</p>
</a>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="main">
<p>更多選購(gòu)方式：查找你附近的 Apple Store 零售店及更多門店贼穆，或者致電 400-666-8800。</p>
<p style="border:none;">Copyright ? 2021 蘋(píng)果官網(wǎng). 保留所有權(quán)利兰粉。隱私政策 | 使用條款 | 銷售政策 | 法律信息 | 網(wǎng)站地圖</p>
</div>
</div>
</body>
</html>
??CSS代碼
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body, p, h1, h2, h3, h4, h5, table, ul, li, form, input {
margin: 0;
padding: 0;
color: #000;
font-family: "微軟雅黑";
}
a {
font-size: 12px;
color: #000;
text-decoration: none;
}
a:hover {
color: #cccccc;
}
img {
border: 0;
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
border: 0;
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
.main{ width:1200px; margin:0 auto; overflow:hidden;}
.bg{ background:#000;}
.header{ width:100%; overflow:hidden; z-index:999; background:rgba(0,0,0,0.9); padding:10px 0; position:fixed;}
.header .logo{ float:left;}
.header .nav{ float:right;}
.header .nav a{ font-size:16px; color:#fff; margin-left:140px; line-height:60px;}
.header .nav a:hover{ font-weight:bold;}
.banner{ width:100%; overflow:hidden; height:600px; text-align:center;}
.list{ width:800px; margin:0 auto; overflow:hidden; text-align:center; padding-top:90px;}
.list span{ width:200px; display:block; float:left;overflow:hidden;transition:all 1s;}
.list span h4{ color:#fff; padding:20px 0;}
.list span img{ transition:all 1s;}
.list span:hover img{ margin-top:10px;}
.dt{width:100%; overflow:hidden; text-align:center; padding-top:70px;}
.about{ width:100%; overflow:hidden; margin-top:-4px; background:url(../images/bg.jpg) top no-repeat #000; padding-bottom:90px; padding-top:40px;}
.about_jian{ width:550px; float:right;}
.about_jian h3{ color:#fff; padding:60px 0 30px 0; letter-spacing:2px;}
.about_jian p{ font-size:15px; line-height:30px; color:#fff;}
.about_jian h3 span{ width:60px; height:3px; background:#fff; display:block; margin-top:20px;}
.about_jian a{ display:inline-block; padding:10px 40px; transition:all 1s; float:right;border:1px solid #fff; font-size:15px; margin-top:40px; color:#fff;}
.about_jian a:hover{ background:#fff; color:#000;}
.title{ width:100%; overflow:hidden; padding:50px 0; text-align:center;}
.sj{width:100%; overflow:hidden; padding:20px 0 80px 0;}
.sj li{ width:300px; float:left; text-align:center;}
.sj li em{ display:block;overflow:hidden; margin-bottom:14px;}
.sj li h6{ padding:6px 0;}
.sj li h5{ padding:6px 0 20px 0; font-size:16px; border-bottom:1px solid #ccc; width:200px; margin:10px 50px 20px 50px;}
.sj li p{ font-size:12px; padding:4px 0; color:#555;}
.sj li em img{ transition:all 1s;}
.sj li:hover em img{ margin-left:10px;}
.hc{width:100%; overflow:hidden; text-align:center; background:url(../images/bg1.jpg) no-repeat; height:560px;}
.hc h1{ padding:90px 0 60px 0; font-size:50px; line-height:80px;}
.hc p{ font-size:16px; line-height:32px;}
.hc h3{ padding:50px 0; font-size:30px;}
.new{width:100%; overflow:hidden; padding:20px 0 80px 0;}
.new li{ width:380px; float:left; margin-left:30px;}
.new li:first-child{ margin-left:0;}
.new li img{ width:100%;}
.new li h3{ font-size:16px; padding:10px 0;}
.new li p{ font-size:14px; color:#666;}
.new li:hover img{ opacity:0.8;}
.footer{width:100%; overflow:hidden;background:#000; padding:30px 0;}
.footer p{ color:#ccc; font-size:12px; padding:10px 0; border-bottom:1px solid #252525; line-height:30px;}
.jian{width:100%; overflow:hidden; padding-bottom:80px;}
.jian p{ font-size:14px; color:#333; line-height:28px; padding:10px 0; text-indent:2em;}
.tp{ width:100%; overflow:hidden; }
.tp img{box-shadow:1px 1px 4px #ccc; margin:10px; padding:4px;}
.xw{width:100%; overflow:hidden; padding-bottom:80px;}
.xw span{ display:inline-block; overflow:hidden; padding:8px; border:1px solid #ccc; width:530px; margin:20px;}
.xw span img{ width:100%;}
.xw span h2{ padding:12px 0; font-size:16px; color:#333;}
.xw span p{ font-size:14px; color:#777; line-height:24px; padding-bottom:10px;}
.xw span:hover img{ opacity:0.8;}
.xw span:hover{ border:1px solid #000;}
.product{width:100%; overflow:hidden; padding-bottom:80px;}
.product_title{width:100%; overflow:hidden; height:48px; background:#000; margin-bottom:30px;}
.product_title li{ width:200px; float:left; text-align:center; margin-right:1px;}
.product_title li a{ display:block; line-height:48px; color:#fff; font-size:16px;}
.product_title li a:hover ,.product_title li a.on{ background:#333;}
.wz{ width:200px; margin:0 auto; text-align:left !important;}
.wz p{ font-size:14px !important; line-height:30px;}
四故痊、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我主頁(yè)查看跟多（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程玖姑，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
