哪个网站可以做曝光台,沈阳德泰诺网站制作,桂林什么公司做网站推广好,visual studio怎么创建网页个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 作业 2024.4.4-学习笔记1 CSS 布局模型1.1 标准流1.2 CSS 浮动1.3 去除塌陷 2… 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 作业 2024.4.4-学习笔记1 CSS 布局模型1.1 标准流1.2 CSS 浮动1.3 去除塌陷 2 浮动制作两栏布局3 浮动制作三栏布局 作业 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta name首页 content首页meta description首页 content首页title首页/titlestyle* {padding: 0;margin: 0;}.auto-center {width: 1000px;margin-left: auto;margin-right: auto;}.full-center {min-width: 1000px;}.clearfix::after {content: ;display: block;clear: both;}.header {background-color: #000079;}.top {background-color: red;height: 100px;}.banner {background-color: #003E3E;height: 300px;}.container-one.left {width: 200px;background-color: #613030;height: 500px;float: left;}.container-one.right {background-color:#336666;margin-left: 200px;height: 300px;}.main {background-color: #467500;margin-top: 10px;}.container-twoli {float:left;width: 250px;height: 150px;box-sizing: border-box;border: 1px dashed #ccc;background-color:#CAFFFF;}ul {list-style: none;}.container-three.left,.container-three.right { width: 200px;height: 300px}.container-three.left {float: left;background-color: #F9F900;}.container-three.right {float: right;background-color: #A5A552;}.container-three.middle {margin-left: 200px;margin-right: 200px;height: 100px;background-color: #5CADAD;}.footer { margin-top: 20px;background-color: #642100;height: 200px;}.container-two {margin-top: 10px;}.container-three {margin-top: 10px;}/style/headbodydiv classfull-center headerdiv classauto-center top/div/divdiv classfull-center banner/divdiv classauto-center main div classcontainer-one clearfixdiv classleft/divdiv classright/div/divul classcontainer-two clearfixli/lili/lili/lili/lili/lili/lili/lili/li/uldiv classcontainer-three clearfixdiv classleft/divdiv classright/divdiv classmiddle/div/divdiv classcontainer-three clearfixdiv classleft/divdiv classright/divdiv classmiddle/div/div/divdiv classfull-center footer/div/body
/html2024.4.4-学习笔记
1 CSS 布局模型
1.1 标准流
块级从上到下行内、行内块从左到右
直接设置行高就可以撑开盒子 1.2 CSS 浮动
float: left | right |none
浮动盒子之间没有空隙
任何元素都可以加CSS 浮动会呈现出inline-block效果
浮动元素不会对它前面的标准流元素产生影响。
浮动只能遮盖标准流盒子但是不能遮盖标准流内容 设计浮动元素高度要尽量保持一致一个浮动了其他兄弟元素也需要设置浮动折行是找高度低的去折行
1.3 去除塌陷 方法1 clear:both;方法2 .clearfix::after {content: ;display: block;clear: both;} min-width:最短宽度的设置 2 浮动制作两栏布局
一般两栏布局指的是左边一栏宽度固定右边一栏宽度自适应
利用浮动将左边元素宽度设置为200px并且设置向左浮动。将右边元素的margin-left设置为200px宽度设置为auto默认为auto撑满整个父元素。
3 浮动制作三栏布局
三栏布局一般指的是页面中一共有三栏左右两栏宽度固定中间自适应的布局
.outer {height: 100px;
}
.left {float: left;width: 200px;background: tomato;
}
.right {margin-left: 200px;width: auto;background: gold;
}利用浮动左右两栏设置固定大小并设置对应方向的浮动。中间一栏设置左右两个方向的margin值注意这种方式 中间一栏必须放到最后
.outer {height: 100px;
}.left {float: left;width: 100px;height: 100px;background: tomato;
}.right {float: right;width: 200px;height: 100px;background: gold;
}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;
}
