网页布局之结构与表现原则

最新推荐文章于 2021-06-17 07:41:57 发布

moluchase

最新推荐文章于 2021-06-17 07:41:57 发布

阅读量493

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/molu_chase/article/details/52336523

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

对于一个网页，先关注的应是HTML结构，然后才是样式和行为

微博用户信息表设置

使用一个div，将图片和文字都放到其中，然后将这个div向右移动一定距离，在将图片向左移动一定的距离，这样就形成了一个只使用了一个div的列表

这里附上的hi高级的写法

<title>weibo</title>
<style type="text/css">
.demo {
	width: 460px;
	padding: 20px;
	position: relative;
	background-color: #eef7ff;
	border: 1px solid #ccc;
	margin-left: 100px;
        margin-top:100px
}

.demo h3 {
	margin-bottom: 5px;
        float:left;
        margin: 40px 0 0 -120px;
        border:1px solid #999;
        
}

.demo .dialog p {
	text-indent: 2em;
	line-height: 20px
}

.demo .userPic {
	float: left;
	margin: -20px 0 0 -100px
}

.demo .pubTime {
	position: absolute;
	top: 10px;
	right: 20px;
	color: red

}
</style>
</head>

<body>
	<div class="demo">
		<img  class="userPic" src="images/head01.jpg" width="50" height="50" />
		<h3>moluchase</h3>
		<p>微博用户信息列表的设计分为初级，中级，高级，三个级别，以使用的嵌套层数来区分，初级中图片层嵌套了三层div，文字嵌套两层，中级文字仍然是两层，高级只使用了一个div。高级设置是通过设置浮动，并将浮动的元素进行margin设置完成的。</p>
		<span class="pubTime">10分钟前</span>
	</div>


</body>

显示如下

最后说一下关于css中写入的.demo h3等形式的子标签，针对的是demo下的h3，如果是其他下面的h3，是不起作用的

练习中的例子

<style type="text/css">
body {
	margin: 0;
}

div {
	background: #460E29;
	width: 700px;
	padding: 20px
}

img {width =95px;height =95px;
	background: url(http://img.mukewang.com/5385ac820001905201440133.jpg);
	padding: 1px 20px 37px 30px;
}
</style>
</head>
<body>
	<div>
		<img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img
			src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img
			src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img
			src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" />
	</div>
</body>

主要想强调一下其中获取图片的方法，background和src

moluchase

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页布局之结构与表现原则

对于一个网页，先关注的应是HTML结构，然后才是样式和行为微博用户信息表设置使用一个div，将图片和文字都放到其中，然后将这个div向右移动一定距离，在将图片向左移动一定的距离，这样就形成了一个只使用了一个div的列表这里附上的hi高级的写法weibo.demo { width: 460px; padding: 20px; position: relative;
复制链接

扫一扫