题目一

实现代码

<!DOCTYPE html>
<html><head><style  type="text/css">#div1{background-color: #ffc33c;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;}#div2{background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;margin-right: 25px;}#div3{background-color: #ff33cc;border: 2px solid #333;height: 300px;width: 300px;float: left;margin-left: 25px;}</style></head><body>
<div id="div1">左列</div>
<div id="div2">右列1</div>
<div id="div3">右列2</div>
</body>
</html>

总结

感觉不是太难，没什么难点

题目2

实现代码

<!DOCTYPE html>
<html><head><style  type="text/css">#div1{background-color: cadetblue;border: 2px solid #333;height: 100px;width: 100%;float: left;margin-left: 25px;}#div2{background-color: blue;border: 2px solid #333;height: 500px;width: 100%;float: left;margin-left: 25px;margin-right: 25px;}#div3{background-color: gray;border: 2px solid #333;height: 100px;width: 100%;float: left;margin-left: 25px;}#div2-1{background-color: #ff0000;width: 25%;height: 500px;float: left;}#div2-2{background-color: brown;width: 50%;height: 500px;float: left;}#div2-3{background-color:green;width: 25%;height: 500px;float: left;}#div2-2-1{background-color:yellowgreen;height: 200px;}#div2-2-2{background-color:white;height: 300px;}</style></head><body>
<div id="div1">div1</div>
<div id="div2"><div id="div2-1">div2-1</div><div id="div2-2"><div id="div2-2-1">div2-2-1</div><div id="div2-2-2">div2-2-2</div></div><div id="div2-3">div2-3</div>
</div>
<div id="div3">div3</div>
</body>
</html>

总结

注意点

#div2-1{background-color: #ff0000;width: 25%;height: 500px;float: left;}#div2-2{background-color: brown;width: 50%;height: 500px;float: left;}#div2-3{background-color:green;width: 25%;height: 500px;float: left;}

想要同行显示时得设置浮动

就同行显示div2这里注意浮动即可，说实话，这点没想到，其它的基本就是框架性的。就这些

HTML+CSS实战作业相关推荐

python基础实战作业 ---Excel基本读写与数据处理
代码地址如下: http://www.demodashi.com/demo/11650.html 看完本篇需要: 10min 作业练习需要: 0.5h~3h(依练习者对python熟悉程度而定) 看完 ...
学生网页作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业_ 网页制作作业_疫情防控网页设计...
HTML5期末大作业:商城网站设计--仿天猫商城(9页) HTML+CSS大作业文章目录 HTML5期末大作业:商城网站设计--仿天猫商城(9页) HTML+CSS大作业一.作品展示二.文件目录 ...
HTML5期末大作业：商城网站设计——仿天猫商城(9页) HTML+CSS大作业_ 网页制作作业_疫情防控网页设计...
HTML5期末大作业:商城网站设计--仿天猫商城(9页) HTML+CSS大作业: 网页制作作业_疫情防控网页设计- 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电 ...
CSS实战样式：文字两侧加居中横线
CSS实战样式:文字两侧加居中横线原文: https://www.freesion.com/article/4444809147/ 在日常的开发中,会遇到这样的需求,比如移动web开发中的登录页的底 ...
HTML5+CSS大作业——蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客
HTML5+CSS大作业--蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...
HTML5+CSS大作业——三八女人节主题设计(1页)
HTML5+CSS大作业--三八女人节主题设计(1页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
web学生网页设计作业源码 HTML5+CSS大作业——三八女人节主题设计(1页)
HTML5+CSS大作业文章目录 HTML5+CSS大作业一.作品展示二.文件目录三.代码实现一.作品展示二.文件目录三.代码实现 <!DOCTYPE html><ht ...
HTML5+CSS大作业——个人博客-功能齐全(48页) html大学生网站开发实践作业
HTML5+CSS大作业--个人博客-功能齐全(48页) html大学生网站开发实践作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
HTML5+CSS大作业——汽车自驾游(10页) 自驾游主题HTM5网页设计作业成品
HTML5+CSS大作业--汽车自驾游(10页) 主题HTM5网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...

HTML+CSS实战作业

文章目录

题目一

实现代码

总结

题目2

实现代码

总结

注意点

HTML+CSS实战作业相关推荐

最新文章

热门文章