使用div+css编写网页框架

使用div+css编写如下网页框架：

代码：
html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS作业2 </title><link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="first"><div class="red1"></div><div class="green1"></div><div class="green2"></div>
</div><div class="second"><div class="orange1"></div><div class="bluegreen"><div class="blue1"></div><div class="blue2"></div><div class="blue3"></div><div class="green3"></div></div><div class="pink"></div>
</div>
<div class="third"></div>
</body>
</html>

style.css文件：

body,h1{margin:0;padding:0;color:#fff;text-align:center;
}
.first {margin: 0 auto;background-color:#ffffff;width:970px;height:103px;
}
.red1{background-color:red;float: left;height:103px;width:277px;
}
.green1{background-color: lawngreen;float: right;height: 49px;width: 137px;
}
.green2{background-color: lawngreen;float: right;margin-top: 8px;height: 46px;width: 679px;
}
.second{margin-top: 10px;margin-left:auto;margin-right:auto;background-color: #ffffff;height: 435px;width: 970px;
}
.orange1{background-color: orange;float:left;height: 435px;width: 310px;
}
.bluegreen{margin-left: 10px;float: left;background-color:#ffffff;width:450px;height:435px;
}
.blue1{background-color: dodgerblue;float: left;height: 240px;width: 450px;
}
.blue2{background-color: dodgerblue;float: left;margin-top: 10px;height: 110px;width: 450px;
}
.blue3{background-color: dodgerblue;float: left;margin-top: 10px;height: 30px;width: 450px;
}
.pink{background-color: deeppink;margin-left: 10px;float:  left;height: 400px;width: 190px;
}
.green3{background-color: seagreen;float: left;margin-top: 10px;height: 25px;width: 650px;
}
.third{margin-top: 10px;margin-left:auto;margin-right:auto;background-color:darkblue;height: 35px;width: 970px;
}

运行效果：

使用div+css编写网页框架相关推荐

HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
计算机创新课堂教案,广东省创新杯说课大赛计算机类一等奖作品：《DIV+CSS布局网页》教学设计方案...
<广东省创新杯说课大赛计算机类一等奖作品:<DIV+CSS布局网页>教学设计方案>由会员分享,可在线阅读,更多相关<广东省创新杯说课大赛计算机类一等奖作品:<DIV ...
HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码...
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你 ...
HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码
动漫樱桃小丸子5页表格div+css学生网页设计作业源码~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你 ...
html网页div框架代码,div层仿网页框架布局特效代码
脚本代码(For Alixixi.com)如下: div层仿网页框架布局特效代码 - by 阿里西西 js.alixixi.com * { margin:0; padding:0; list-styl ...
html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...
DIV+CSS 之网页切图过程中div+css命名规则
网页切图过程中div+css命名规则内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
DIV+CSS实现网页爱心图案
使用DIV+CSS实现绘制网页爱心图案实现效果: 代码: <!DOCTYPE html> <html><head><meta charset="u ...

使用div+css编写网页框架

使用div+css编写如下网页框架：

使用div+css编写网页框架相关推荐

最新文章

热门文章