您的位置：首页 > 其它

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

2016-08-28 01:30 253 查看

对于一个网页，先关注的应是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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航