Correction status:qualified
Teacher's comments:
以下为示例,利用新学的元素标签如h1或p可写标题,span或p可写文本行或块。其中span默认display:inline,即不换行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本控制</title> <style type="text/css"> p{font-weight: bold;/*定义文字为粗体*/ font-size: 30px; /* 定义字体大小*/ font-family:楷体; } h1{text-align: center;/*文本居中,还可选left或right*/ height: 100px; background: #ccc; line-height: 100px; } span{font-size: 40px; font-weight: bold; font-family: georgia; } img{width: 400px; height: 400px; margin: 0 auto; } b{display: block; width: 400px; height: 40px; background: pink; overflow: hidden;/*该块已定义大小,此为溢出隐藏*/ margin-bottom: 100px; } b:hover{overflow:visible;/*默认值,内容不会被修剪,元素会被呈现在元素框之外;*/ } body{margin: 0 auto;/*body整体居中*/ width:400px; } .clear{line-height: 50px; display: block; }/*清除浮动影响*/ .aligin{margin: 0 auto;/*内容块居中*/ text-align: center; } </style> </head> <body> <h1>php中文网</h1> <p class="aligin">php中文网</p> <br> <!-- google logo --> <div class="aligin"> <span style="color: #0388F1">G</span> <span style="color:rgb(245,28,39);">o</span> <span style="color: #ffe80e">o</span> <span style="color: #0388f1">g</span> <span style="color: #39ff1b">l</span> <span style="color: #ffe80e">e</span> </div> <div class="clear"> </div> <br> <!-- 图文内容编排 --> <p style="display: inline-block;width: 400px;height: 400px;"> 据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空。 </p> <div class="clear"> </div> <img class="aligin" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534788958126&di=7355aa9043e03ede76458735f61c600e&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F201510_28_11%2Fa1v6m03772626548451.jpeg" alt="示例图片" width="400px"> <br> <div class="clear"> </div> <img class="aligin" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534788958126&di=7355aa9043e03ede76458735f61c600e&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F201510_28_11%2Fa1v6m03772626548451.jpeg" alt="示例图片" width="400px"> <div class="clear"> </div> <b>据Engadget消息,谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire,它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空。 </b> </body> </html>
点击 "运行实例" 按钮查看在线实例