收藏
批改状态：合格
老师批语：
以下为示例，利用新学的元素标签如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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
