在学习布局之前 我们必须先要学习一个基础概念———盒模型:
如果文字看的太累了,可以在这里更加直观感受盒模型
今天需要重点掌握 margin,padding,boder,box-sizing 这几个属性,前面我们已经学习过这几个属性了,今天再复习一下。
实现如下图所示,首字下沉的下沉效果
HTML 模板代码
<p> I am in the Great Sahara Desert for the third sundown in a row. Fouad and I pass back and forth a sun-bleached map of the stars. It’s more of a tug-of-war to be honest. With what remains of the daylight, we commit to memory the positions of spots on the page. We hope to find some correlation in its negative, which slides overhead as the sun rapidly dies. </p>
编码二
参考示例图 (opens new window),利用浮动实现文字类似报纸一样文字包裹图片效果,并且处理文字溢出以及图片溢出
<!--图片设置固定宽度 练习溢出处理--> <article style="width:600px;height:300px"> <div> <!--图片设置固定大小为170像素 练习图片处理--> <img src="picture.jpg" style="width:170px;height:170px;" /> </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div> </article>
利用浮动创建一个首页布局,css 要求如下
学习之后,对下列问题进行自我回答来检验自己本次学习的理论知识掌握程度。
.my-box { width: 200px; border: 20px solid; padding: 20px; }
找一个你可以记录笔记的地方,可以是电脑里的记事本或是手边的笔记本(不做任何限制),记录下今天的学习笔记,包括以下内容:
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!