收藏
批改状态：合格
老师批语：
第二次作业：
把2布局用到1里面，想把最底下的img和b标签按相同的宽度居中对齐，如果按div的宽度对齐是可以的，只是其他宽度未能成功，如果选居中则只能按不同宽度对齐，如果选相同宽度则b标签不能居中，不知道为什么。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
div{width:600px;text-align:left;margin:0 auto;}
p{font-weight: bold;/*粗体*/
font-size:20px;/*字体大小*/
font-family:楷体;
text-align:center;
}
h1{text-align:center;/*left right*/
height:100px;
background: #ccc;
line-height: 100px;
}
span{
font-size: 80px;
font-weight:bold;
font-family: georgia;
}
img{width:230px;height: 290px;}
b{display: block;
width:600px;
height:30px;
background: green;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;}
b:hover{overflow: visible;}/*内容不被修剪，元素呈现在元素框外*/
</style>
</head>
<body>
<div>
<h1>php中文网</h1>
<p>php中文网</p>
<div style="text-align:center;">
<span style="color:#0A4CD8;">G</span>
<span style="color:rgb(48,134,37);">o</span>
<span style="color:#FDB10D;">o</span>
<span style="color:#A81002;">g</span>
<span style="color:#362069;">l</span>
<span style="color:#0A4CD8;">e</span>
</div>
<div style="text-align:center;">
<p style="display:inline-block;width:230px;height:290px;">广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主</p>
<img src="images/1.png">
</div>
<div style="text-align:center;">
<img src="images/1.png">
<b>广受欢迎广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主广受欢迎好多敏感词不能上传自主</b>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
文本标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <h1>这是一个h1标签</h1> <h2>这个是h2标签</h2> <h3>这是h3标签</h3> <h4>这是h4标签</h4> <h5>这是h5标签</h5> <h6>这是h6标签</h6> <b>这是一个粗体标签b</b> <p>在特朗普眼里，<br>原来奥巴马过得太寒酸了，<br>真是给美国人丢面子，<br>土豪金颜色一弄，<br>这样才高端大气上档次。</p> <br> <br> <strong>php中文网</strong><!-- 强调 --> <i>在特朗普眼里，</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="background:pink;width:333px;">399元</span><del>499</del> <pre>预格 式 化文本</pre> <p style="background:#ccc;width:333px;">123</p> <span>399元</span> <!-- 块级元素：div h p 独占一行 对宽高属性值设置生效 行内元素：strong i em del span 共存于一行 对宽高属性值设置不生效 行内块级元素：img--> <img src=""> <!-- 行内块级相互转换： display：inline块级转行内 inline-block块级转行内块级 block行内转块级 --> <div style="width:100px;height:100px;background:pink;display:inline;">1</div> <div style="width:100px;height:100px;background:pink;display:inline-block;">2</div> <span style="width:100px;height:100px;background:pink;display:block;">4</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">5</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">6</span> </body> </html>
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
