写得不好 慢慢领悟吧
<!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">
<title>Document</title>
<link rel="stylesheet" href="indexl.css">
</head>
<body>
<div class="box">
<div class="heder">
<img src="logo.png" alt="">
</div>
<div class="content">
<div class="content-left"><img src="page_1.gif" alt=""></div>
<div class="content-three">
<div class="content-three1"><p> <b> Business.Co</b> is one of <a href="">ferr website templates created by</a><br>TemplateMonster.com team This website template is optimized for 1024X768 <br> screen resolution lt is also XHTML & CSS valid.</p></div>
<div class="content-three2">
<div class="content-three2-1">
<img src="page1_img1.jpg" alt=""></div>
<div class="content-three2-2"><p>This <a href="">Business.co Template</a>goes with two <br>pockages - with PSD source files and <br>without them. PSD source files are available <br>for free for the registerer members of <br>Templates com The basic package (without <br>PSD source is available for anyone without <br>registration).</p></div>
</div>
<div class="content-three3">
<p>This website template has several pages:<a href="">Main Page.Latest News.Services <br>Produts,Contact Us</a>(note that contact us form - doesnt work).</p>
</div>
</div>
<div class="content-right">
<img src="page_2.gif" alt="">
<img src="page_3.gif" alt="">
<img src="page_4.gif" alt="">
<img src="page_5.gif" alt="">
</div>
</div>
<div class="foot">
<div class="foot1">
<img src="icon1.png" alt="">
<img src="icon2.png" alt="">
<img src="icon3.png" alt="">
<img src="icon4.png" alt="">
<img src="icon5.png" alt="">
</div>
<div class="foot2">
<p><a href="">Website template </a>designed by TemplateMonster.com <br><a href="">3D Models</a>provided by Templates.com
</p>
</div>
</div>
</div>
</body>
</html>
.CSS
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
height: 800px;
/* border: 2px solid red; */
margin-left: 400px;
margin-top: 50px;
background-image: url(bg_img.jpg);
}
.heder{
width: 310px;
height: 80px;
margin-left: 120px;
padding-top: 120px;
/* border: 2px solid red; */
/* font-size: 30px; */
}
/* .heder-noe{
font-size: 50px;
color: #fcfcfc;
}
.heder-too{
font-size: 18px;
color: #6cad0e;
} */
.content{
width: 840px;
height: 370px;
/* border: 2px solid red; */
margin-top: 70px;
margin-left: 70px;
display: flex;
background-color: #ffffff;
}
.content-left{
width: 50px;
height: 370px;
/* border: 2px solid red; */
background-color: #f8f8f8;
}
.content-three{
width: 580px;
height: 370px;
/* border: 2px solid red; */
}
.content-three1{
margin-top: 40px;
/* margin-left: 45px; */
font-size: 10px;
}
.content-three2{
display: flex;
}
.content-three2-1{
margin-top: 30px;
}
.content-three2-2{
margin-left: 20px;
font-size: 10px;
margin-top: 50px;
}
.content-three3{
font-size: 10px;
margin-top: 30px;
}
.content-right{
width: 280px;
height: 370px;
/* border: 2px solid red; */
}
.content-three1 a{
color: #6cad0e;
}
.content-three2-2 a{
color: #6cad0e;
}
.content-three3 a{
color: #6cad0e;
}
.content-right{
display: flex;
}
.foot1{
display: flex;
margin-left:450px;
margin-top:40px;
}
.foot2{
text-align: center;
margin-top: 40px;
color: white;
}
.foot2 a{
color: #6cad0e;
}
