html+css关于位置布局
2014-10-12 21:59
302 查看
<!DOCTYPE html>
<html>
<head>
<title>homework2</title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 599px;
height: 342px;
background-color: white;
margin: auto;
border: solid 1px black;
}
.div1{
width: 599px;
height: 4px;
background-color: #D66B59;
}
.div2{
width: 599px;
height: 27px;
}
.div2-1{
width: 101px;
height: 26px;
}
.div2-2{
width: 198px;
height: 26px;
margin-left: 234px;
margin-top: -26px;
line-height: 26px;
color: #4E4E4E;
font-family: calibri;
font-size: 1px;
word-spacing: 19px;
font-weight: bold;
}
.div3{
width: 599px;
height: 222px;
background-image: url(3.jpg);
}
.div3-1{
color: #47494B;
font-family: calibri;
font-size: 23px;
margin-left: 70px;
line-height: 40px;
}
.div3-2{
margin-top: -10px;
margin-left: 53px;
}
.div3-3{
width: 78px;
height: 17px;
background: #DD6857;
margin-left: 114px;
margin-top: 1px;
border-radius: 9px;
color: #FFD5C8;
font-size: 12px;
font-family: calibri;
line-height: 17px;
}
.div3-4{
color: #222423;
font-size: 22px;
font-weight: bolder;
margin-top: 13px;
margin-left: 10px;
}
.div3-5{
width: 8px;
height: 8px;
border-radius: 4px;
background: #027F81;
margin-top: 104px;
margin-left: 277px;
}
.div3-6{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -8px;
margin-left: 289px;
}
.div3-7{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -9px;
margin-left: 301px;
}
.div4{
width: 599px;
height: 89px;
background-color: #46C6E3;
}
.div4-1{
color: #E1FFFF;
font-size: 16px;
font-family: calibri;
font-weight: bold;
margin-left: 425px;
margin-top: -5px;
}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<div style="width:38px;height:4px;background:#D66B59;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:38px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:76px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:114px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:152px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:190px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:228px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:266px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:304px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:342px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:380px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:418px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:456px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:494px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:532px;margin-top:-4px;"></div>
</div>
<div class="div2">
<div class="div2-1">
<img src="2.jpg">
</div>
<div class="div2-2">
CREATE ABOUT GALLERY
</div>
</div>
<div class="div3">
<div class="div3-1">
Let's Get Started
</div>
<div class="div3-2">
<img src="4.jpg">
</div>
<div class="div3-3">
LEARN MORE >
</div>
<div class="div3-4">
<
</div>
<div class="div3-5">
</div>
<div class="div3-6">
</div>
<div class="div3-7">
</div>
</div>
<div class="div4">
<div style="padding-top:30px;padding-left:99px;"><img src="5.jpg"></div>
<div style="margin-left:270px;margin-top:-60px;;"><img src="6.jpg"></div>
<div style="margin-left:430px;margin-top:-59px;"><img src="7.jpg"></div>
<div class="div4-1">3.Enjoy</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>homework2</title>
<meta charset="utf-8">
<style type="text/css">
.main{
width: 599px;
height: 342px;
background-color: white;
margin: auto;
border: solid 1px black;
}
.div1{
width: 599px;
height: 4px;
background-color: #D66B59;
}
.div2{
width: 599px;
height: 27px;
}
.div2-1{
width: 101px;
height: 26px;
}
.div2-2{
width: 198px;
height: 26px;
margin-left: 234px;
margin-top: -26px;
line-height: 26px;
color: #4E4E4E;
font-family: calibri;
font-size: 1px;
word-spacing: 19px;
font-weight: bold;
}
.div3{
width: 599px;
height: 222px;
background-image: url(3.jpg);
}
.div3-1{
color: #47494B;
font-family: calibri;
font-size: 23px;
margin-left: 70px;
line-height: 40px;
}
.div3-2{
margin-top: -10px;
margin-left: 53px;
}
.div3-3{
width: 78px;
height: 17px;
background: #DD6857;
margin-left: 114px;
margin-top: 1px;
border-radius: 9px;
color: #FFD5C8;
font-size: 12px;
font-family: calibri;
line-height: 17px;
}
.div3-4{
color: #222423;
font-size: 22px;
font-weight: bolder;
margin-top: 13px;
margin-left: 10px;
}
.div3-5{
width: 8px;
height: 8px;
border-radius: 4px;
background: #027F81;
margin-top: 104px;
margin-left: 277px;
}
.div3-6{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -8px;
margin-left: 289px;
}
.div3-7{
width: 7px;
height: 7px;
border-radius: 5px;
background: #FFFFFE;
border: solid 1px #6F7074;
margin-top: -9px;
margin-left: 301px;
}
.div4{
width: 599px;
height: 89px;
background-color: #46C6E3;
}
.div4-1{
color: #E1FFFF;
font-size: 16px;
font-family: calibri;
font-weight: bold;
margin-left: 425px;
margin-top: -5px;
}
</style>
</head>
<body>
<div class="main">
<div class="div1">
<div style="width:38px;height:4px;background:#D66B59;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:38px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:76px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:114px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:152px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:190px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:228px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:266px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:304px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:342px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#D66B59;margin-left:380px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#4CC6DE;margin-left:418px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#1AAB82;margin-left:456px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#F2E14D;margin-left:494px;margin-top:-4px;"></div>
<div style="width:38px;height:4px;background:#434343;margin-left:532px;margin-top:-4px;"></div>
</div>
<div class="div2">
<div class="div2-1">
<img src="2.jpg">
</div>
<div class="div2-2">
CREATE ABOUT GALLERY
</div>
</div>
<div class="div3">
<div class="div3-1">
Let's Get Started
</div>
<div class="div3-2">
<img src="4.jpg">
</div>
<div class="div3-3">
LEARN MORE >
</div>
<div class="div3-4">
<
</div>
<div class="div3-5">
</div>
<div class="div3-6">
</div>
<div class="div3-7">
</div>
</div>
<div class="div4">
<div style="padding-top:30px;padding-left:99px;"><img src="5.jpg"></div>
<div style="margin-left:270px;margin-top:-60px;;"><img src="6.jpg"></div>
<div style="margin-left:430px;margin-top:-59px;"><img src="7.jpg"></div>
<div class="div4-1">3.Enjoy</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 问题：关于贴友的一个书本页面简单布局（html+css）的实现
- 关于html CSS 绝对相对布局问题
- CSS关于位置布局
- 关于html布局中css的写法，以及table的使用技巧
- 关于后盾网yii框架的学习小结(3)--asset，创建布局，在html中加载css
- 关于贴友的一个书本页面简单布局（html+css）的实现
- 关于后盾网yii框架的学习小结(3)--asset，创建布局，在html中加载css
- 关于HTML和CSS中左右布局中的浮动问题
- DIV+CSS布局基础：HTML标记（三）
- HTML--HTML对象的关于位置和大小的属性的图解
- HTML--HTML对象的关于位置和大小的属性的图解
- 关于Div+CSS布局
- DIV+CSS布局基础：HTML标记（二）
- HTML结构化CSS网页布局入门指南
- 关于Asp.net2.0下Div+Css页面布局样式失效的解决方法
- DIV+CSS布局入门教程(六) -- 关于ID和CLASS
- HTML 用 CSS 实现网页布局
- 关于Asp.net2.0下Div+Css布局页面样式实效的解决方法
- HTML--HTML对象的关于位置和大小的属性的图解
- HTML--HTML对象的关于位置和大小的属性的图解