请老师看看,我代码的写法是否合理和规范,谢谢。

来源:2-7 编程练习

wangstudyvc

2019-06-09 18:25:30

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	.main{
		width: 70%;
		margin: 0 auto;
		padding-top: 50px;
	}
	.title{
		font-size: 24px;
		font-weight: bolder;
		font-family: "宋体";
		margin-left: 30%;
		margin-bottom: 20px;
	}
	.content .item{
		width: 45%;
		float: left;
		margin: 0 10px;
	}
	.content .item img{
		width: 100%;
	}
	.content .item div{
		font-weight: bold;
		font-size: 14px;
		word-spacing: 0.5em;
		font-family: "宋体";
	}
	.content .clear{
		clear: both;
	}
	</style>
</head>
<body>
	<div class="main">
		<div class="title">ENJOY THE LIFE</div>
		<div class="content">
			<div class="item">
				<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
				<div>Life is like a book,just read more and more refined,more write more carefully,When read,mind open,all things have been indifferent to heart.Life is the precipitation.</div>
			</div>
			<div class="item">
				<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
				<div>Life is like a cup of tea,let people lead a person to endless aftertastes.You again good taste,it will always have a different taste,different people will have different taste more.</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>


写回答

1回答

好帮手慕星星

2019-06-09

你好,从效果中可以看出来是没有居中显示的:

http://img.mukewang.com/climg/5cfce4710001105309980370.jpg

(1)顶部标签可以使用文本属性居中显示。

(2)下面图片可以一个左浮动一个右浮动,这样就不用考虑间距设置了。

参考:

http://img.mukewang.com/climg/5cfce5370001244c07720282.jpg

http://img.mukewang.com/climg/5cfce5520001e21a05060454.jpg

自己可以重新测试下,祝学习愉快!

0
hangstudyvc
h 好的,谢谢。明白。 练习题的效果图,有点误导我了。标题文字看了效果图也不是水平居中,两张图片的右边距比左边距大。
h019-06-09
共1条回复

0 学习 · 40143 问题

查看课程