博客列表 >html/css基础之css文本标签及控制20180813

html/css基础之css文本标签及控制20180813

胖达的博客
胖达的博客原创
2018年08月14日 18:57:06761浏览

第二次作业:

把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>

运行实例 »

点击 "运行实例" 按钮查看在线实例1.jpg2.jpg

文本标签

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.jpg4.jpg


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议