本文详细介绍了使用HTML和CSS进行网页布局与设计的方法，包括头部导航栏、主体内容区域及联系方式等部分的设计思路与实现技巧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./lesson1.css">
<title>Document</title>
</head>
<body>
<header>
<ul>
<li>
<img src="./images/menu.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_03.png" alt="">
</li>
<li>
<img src="./images/email.png" alt="">
</li>
</ul>
<div class="demo">
<p>
<img src="./images/home-onepage-style1_030.png" alt="">
</p>
<p>
Web Development - IOS Developer - lnternet Marketer - Your Freelance
<!-- <img src="./images/home-onepage-style1_013.png" alt=""> -->
</p>
<p>
<img src="./images/home-onepage-style1_031.png" alt="">
</p>
</div>
</header>
<!-- 白色背景那块 -->
<div class="box">
<!-- 上 -->
<div class="box-top">
<div>
<p>
<img src="./images/phone_03.jpg" alt="">
</p>
<p>Branding Desgn</p>
</div>
<p class="line1"></p>
<div>
<p>
<img src="./images/phone_05.jpg" alt="">
</p>
<p class="font-color">Web Development</p>
</div>
<p class="line2"></p>
<div>
<p>
<img src="./images/phone_07.jpg" alt="">
</p>
<p>Internet Marketing</p>
</div>
<p class="line3"></p>
<div>
<p>
<img src="./images/phone_09.jpg" alt="">
</p>
<p>IOS Development</p>
</div>
<!-- <p class="line"></p> -->
</div>
<!-- 下 -->
<div class="box-bottom">
<p>
<img src="./images/home-onepage-style1_03_03.png" alt="">
</p>
<div>
<img class="img-top" src="./images/home-onepage-style1_033.png" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, doloremque! Numquam enim rem error
quam provident aliquam similique nemo perferendis, quidem explicabo, minus distinctio hic eligendi, perspiciatis
vero ex reiciendis?
</p>
<img class="img-bottom" src="./images/home-onepage-style1_032.png" alt="">
</div>
</div>
</div>
<!-- 蓝色背景那块 加上 浅红色 -->
<div class="box-blue">
<div class="bc-blue">
<p class="head-img">
<img src="./images/home-onepage-style1_034.png" alt="">
</p>
<div class="text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus tenetur atque rem, sint architecto laborum exercitationem
iusto omnis blanditiis hic alias, ipsum eligendi perspiciatis voluptate assumenda nisi, voluptates a?
Minus.Hic rerum eos praesentium accusamus quos ab consectetur, vel reprehenderit eum quaerat tempora
doloremque optio minus itaque. Nulla mollitia exercitationem eius, qui, voluptas harum molestiae voluptatem
odit rerum aut obcaecati.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus tenetur atque rem, sint architecto laborum exercitationem
iusto omnis blanditiis hic alias, ipsum eligendi perspiciatis voluptate assumenda nisi, voluptates a?
Minus.Hic rerum eos praesentium accusamus quos ab consectetur, vel reprehenderit eum quaerat tempora
doloremque optio minus itaque. Nulla mollitia exercitationem eius, qui, voluptas harum molestiae voluptatem
odit rerum aut obcaecati.
</p>
</div>
</div>
<!-- 浅红色 -->
<div class="bc-red">
</div>
</div>
<!-- Recent Works -->
<div class="works">
<div class="recent">
<img src="./images/home-onepage-style1_03_13.png" alt="">
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, eum voluptatem suscipit numquam, quam dolores maiores necessitatibus
sed, ipsum unde dolore fugit nobis nisi aliquam earum tenetur commodi sit quasi!Illum nam tenetur rem ab fugit
repellat consequatur! Consectetur illo assumenda quis pariatur dignissimos tenetur nobis explicabo sapiente sequi
dolore, fugit ipsam veniam incidunt autem quisquam, non praesentium, beatae in?
</p>
<div class="button">
<i>ALL</i>
<i>BRANDING</i>
<i>ILLUSTRAIONS</i>
<i>WEB DESIGN</i>
</div>
</div>
<!-- 两行图片 -->
<ul class="lesson">
<li>
<img src="./images/mid_bottom_0007_business-card2.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0006_food-website.png" alt="">
<img class="li-img2" src="./images/home-onepage-style11_03.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0005_business-card.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0004_flat-phone.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0003_sign-board.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0002_branding.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0001_phone-mockup2.png" alt="">
</li>
<li>
<img src="./images/mid_bottom_0000_diamond.png" alt="">
</li>
</ul>
<!-- Dan Cederholm -->
<div class="dan">
<div>
<div class="dan2">
<img src="./images/other_0003_images-副本.png" alt="">
<p class="cederholm">Dan Cederholm</p>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus neque enim earum dolor pariatur expedita explicabo
culpa odit mollitia corporis, asperiores molestiae animi ab laudantium!
</p>
<img src="./images/home-onepage-style1_13.png" alt="">
</div>
</div>
<!-- contact me-->
<div class="contact">
<div>
<div>
<img src="./images/home-onepage-style1_0016_Contact-Me.png" alt="">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem cupiditate ut omnis? Ipsam minima laudantium
at necessitatibus incidunt, ducimus accusamus est inventore.
</p>
</div>
<div class="demo2">
<div class="demo2-first-div">
<form action="#">
<p>
<input class="input-name" type="text" value="Name">
</p>
<p>
<input class="input-emall" type="text" value="Emall">
</p>
<p>
<input class="input-subject" type="text" value="Subject">
</p>
</div>
<div class="demo2-last-div">
<textarea rows="10" cols="30">Message</textarea>
</div>
<button>
<span>Submit</span>
<img src="./images/other_0001_sending-copy.png" alt="">
</button>
</form>
</div>
</div>
<!-- VIEW GOOGLE MAP -->
<div class="view">
<p>VIEW GOOGLE MAP</p>
<div class="bc-img-blue">
<ul>
<li>
<img src="./images/home-onepage-style1_0000_Shape-8.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_0001_Instagram-icon.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_0004_Behance-icon.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_0006_g.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_0007_Shape-164.png" alt="">
</li>
<li>
<img src="./images/home-onepage-style1_0008_icon-copy-5.png" alt="">
</li>
</ul>
</div>
<div>
<p>Copyright © 2014 Clean Flat Style.All Rights Reserved</p>
<p>Terms & Conditions - Disclaimer - Privacy Poticy </p>
</div>
</div>
</body>
</html>
header{
background-image: url('./images/home-onepage-style1_01.jpg');
background-size: 100%;
height: 736px;
}
header>ul{
width: 1100px;
margin: 0px auto;
padding-top: 66px;
display: flex;
justify-content: space-between;
}
header>ul>li:nth-child(2){
padding-top: 133px;
}
.demo{
text-align: center;
padding-top: 30px;
}
.demo>p:nth-child(2){
margin-top: 26px;
margin-bottom: 75px;
color: #fff;
font-size: 16px;
}
/* 第二板块 */
.box{
height: 739px;
background-color: #fff;
font-size: 16px;
}
.box-top {
height: 230px;
border-bottom: 1px solid #c1c1c1;
display: flex;
justify-content: center;
margin-top: 50px;
margin-bottom: 70px;
}
.box-top>div{
margin-right: 110px;
}
.box-top>div>p{
text-align: center;
}
.line1,
.line2,
.line3{
position: relative;
top: -24px;
height: 150px;
left: -48px;
border-right: 1px solid black;
transform: rotate(90deg);
}
.line2{
left: -56px;
height: 160px;
top: -30px;
}
.line3{
left: -57px;
top: -24px;
}
.font-color{
color: red;
font-weight: bold;
}
.box-bottom{
width: 1133px;
height: 430px;
margin: 0 auto;
display: flex;
line-height: 2;
margin-bottom: 10px;
}
.box-bottom>p{
margin-right: 82px;
}
.img-top{
margin-top: 64px;
margin-bottom: 24px;
}
.img-bottom{
margin-top: 40px;
}
/* 蓝色那块 和浅红色那块 */
.box-blue{
/* height: 606px; */
}
.bc-blue{
background: url('./images/home-onepage-style1_021.png'),no-repeat;
background-size: 100%;
height: 490px;
}
.bc-red{
background: url('./images/home-onepage-style1_022.png'),no-repeat;
background-size: 100%;
height: 120px;
}
.head-img{
padding-top: 96px;
width: 174px;
margin: 0px auto;
margin-bottom: 58px;
}
.text{
width: 963px;
margin: 0 auto;
color: #fff;
font-size: 14px;
}
.text>p:first-child{
margin-bottom: 25px;
}
/* Recent Works */
.works{
height: 436px;
}
.recent{
width: 60px;
margin: 0px auto;
margin-top: 106px;
}
.works>p{
width: 828px;
margin: 0px auto;
margin-top: 38px;
font-size: 14px;
line-height: 2;
padding-bottom: 65px;
}
.button{
width: 574px;
margin: 0 auto;
display: flex;
}
.button>i{
margin-right: 10px;
}
.button>i:first-child{
display: inline-block;
width: 90px;
height: 46px;
color: #fff;
background-color: red;
border: none;
text-align: center;
line-height: 46px;
border-radius: 5px;
}
.button>i:nth-child(2){
width: 130px;
height: 46px;
border: 2px solid black;
font-size: 16px;
text-align: center;
line-height: 46px;
box-sizing: border-box;
}
.button>i:nth-child(3){
width: 130px;
height: 46px;
border: 2px solid black;
font-size: 16px;
text-align: center;
line-height: 46px;
box-sizing: border-box;
}
.button>i:nth-child(4){
width: 130px;
height: 46px;
border: 2px solid black;
font-size: 16px;
text-align: center;
line-height: 46px;
box-sizing: border-box;
}
/* 两行图片 */
.lesson{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.lesson>li{
width: 25%;
}
.lesson>li>img{
width: 100%;
height: 100%;
}
.lesson>li:nth-child(2){
position: relative;
overflow: hidden;
}
.lesson>li:nth-child(2)>img:nth-child(2){
position: absolute;
top: 0px;
opacity:0.8;
}
/* Dan Cederholm */
.dan{
height: 400px;
background-image: url('./images/other_0000_图层-2.png');
background-size: 100%;
color: #fff;
text-align: center;
line-height: 2;
}
.dan>div{
width: 820px;
margin: 0 auto;
padding-top: 60px;
}
.dan>div>p{
margin-bottom: 20px;
}
.cederholm{
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
}
.dan2{
width: 190px;
margin: 0 auto;
}
/* contact me */
.contact{
height: 568px;
font-size: 16px;
text-align: center;
margin-bottom: 100px;
}
.contact>div:first-child{
width: 773px;
margin: 0 auto;
padding-top: 67px;
}
.contact>div:first-child>div{
text-align: center;
}
.contact>div:first-child>p{
margin-top: 42px;
}
.demo2 input{
width: 560px;
height: 40px;
margin-bottom: 20px;
position: relative;
}
.demo2{
width: 1147px;
margin: 0 auto;
margin-top: 43px;
display:flex;
position: relative;
}
textarea{
width: 550px;
height: 172px;
margin-left: 30px;
}
button{
width: 178px;
height: 54px;
position: absolute;
top: 240px;
left: 45%;
background-color: red;
border: none;
font-size: 18px;
color: #fff;
}
button>span{
margin-right: 30px;
}
.demo2-first-div{
width: 560px;
}
/* VIEW GOOGLE MAP */
.view{
background-image: url('./images/home-onepage-style1_0010_Rectangle-26.png');
background-size: 100%;
height: 60px;
}
.view>p{
text-align: center;
line-height: 60px;
font-size: 18px;
color: #fff;
}
.bc-img-blue{
background-image: url('./images/home-onepage-style1_0014_Rectangle-25.png');
height: 140px;
}
.bc-img-blue>ul{
width: 548px;
margin: 0px auto;
display: flex;
justify-content: space-between;
line-height: 140px;
}
.view>div:last-child{
height: 70px;
display: flex;
justify-content: space-around;
font-size: 14px;
line-height: 70px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
