浮动与盒子模型的日常练习

最新推荐文章于 2024-04-18 10:38:28 发布

wu1126656230

最新推荐文章于 2024-04-18 10:38:28 发布

阅读量147

点赞数

文章标签： html java

本文链接：https://blog.csdn.net/wu1126656230/article/details/119478871

版权

HTML文件：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="../../css/myweb.css"/>
   </head>
   <body>
       <div class="header">
       <div class="container">
       <div class="logo fl"></div>
       <div class="nav-lan fl">
       <div class="language fr">选择语言</div>
       <div class="nav fr">导航</div>
       <div class="clear"></div>
       </div>
       <div class="clear"></div>
       </div>
       </div>
       <div class="center">
                   <div class="yellow fl">
                   </div>
                   <div class="left fl">
                       <div class="purple fr" ></div>
                       <div class="blue fr">
                           <div class="blue1"></div>
                           <div class="blue2"></div>
                           <div class="blue3"></div>
                       </div>
                       <div class="green fr"></div>
                       <div class="clear"></div>
                   </div>
                   <div class="clear"></div>
               </div>
           </div>
       <div class="footer"></div>
   </body>
</html>

CSS文件：

* {
padding: 0;
margin: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear {
clear: both;
}
/* container中只写和这个相关的,不写其他的 */
.container {
width: 970px;
margin: 0px auto;
}
.header {
width: 970px;
height: 103px;
/*background-color: green;*/
margin: 0 auto;
}
.header .logo {
width: 277px;
height: 103px;
background-color: red;
}
.header .nav-lan {
width: 679px;
height: 103px;
margin-left: 14px;
/*background-color: green;*/
}
.header .nav-lan .language {
width: 137px;
height: 49px;
background-color: green;
}
.header .nav-lan .nav {
width: 679px;
height: 46px;
background-color: green;
margin-top: 8px;
}
.center {
width: 970px;
height: 435px;
background-color: white;
margin: 0 auto;
margin-top: 10px;
}
.footer {
width: 970px;
height: 35px;
background-color: blue;
margin: 0 auto;
   margin-top: 10px;
}
.yellow{
   width: 310px;
   height: 435px;
   background-color: sandybrown;
}
.left{
   width:650px;
   height: 435px;
   background-color:white;
   margin-left: 10px;
}
.purple{
   width: 190px;
   height: 400px;
   margin-left: 10px;
   background-color: purple;
}
.blue{
   width: 450px;
   height: 400px;
   background-color: white ;
}
.green{
   width: 650px;
   height: 25px;
   margin-top: 10px;
   background-color: green;
}
.blue1{
   width: 450px;
   height: 240px;
   background-color: skyblue;
}
.blue2{
   width: 450px;
   height: 110px;
   background-color: skyblue;
   margin-top: 10px;
}
.blue3{
   width: 450px;
   height: 30px;
   background-color: skyblue;
   margin-top: 10px;
}

最后生成效果：

wu1126656230

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动与盒子模型的日常练习

HTML文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../css/myweb.css"/> </head> <body> ...
复制链接

扫一扫