CSS在网页中的应用-盒模型练习

 时间:2024-10-12 08:15:36

1、首先制作第一个图片,打开adobe dreamweaver软件,我的是2017版的,当然2018版或者其他版都也可以。打开后,点击文件-新建,双击“文档类型”里面第一个“HTML”,会出现有代码的页面。

CSS在网页中的应用-盒模型练习

3、在body部分里写入以下代码(盒子制作):<body><div><p>说是寂寞的秋的清,</p><p>说是辽远的海的相思.</p><p>假如有人问我的烦忧,</p><p>我不敢说出你的名字.</p></div></body>

CSS在网页中的应用-盒模型练习

5、同样的,制作第二个盒子head部分代码如下:<style>*{padding: 0;margin: 0;}#mybox{border: 1px #CCC solid;height: 300px;width: 350px;margin: auto;}#mybox h1{background-color: orange;text-align: center;font-size: 25px;padding: 12px;font-family: kaiti;}#mybox p{color: grey;padding: 10px;line-height: 30px;text-indent: 2em;}</style>

CSS在网页中的应用-盒模型练习

7、制作出来的盒子页面如图:

CSS在网页中的应用-盒模型练习
  • WPS文字文档如何给内容分栏
  • WPS文档中这样实现首字下沉
  • WPS文档怎样设置首字下沉
  • 在WPS文档中如何自定义项目符号?
  • WPS演示文档如何使用对齐方式
  • 热门搜索
    青城山旅游攻略 旅游投诉 镇江旅游 台州旅游 鄂尔多斯旅游 旅游景点排行 湖南旅游 大理旅游景点 江西旅游 旅游服务