<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>task1腾讯微博</title>
<style type="text/css">
body{
background-color:rgb(39, 40, 34);
}
/*设置主页面格式大小和居中*/
.main{
width: 600px;
margin: auto;
background-color:rgb(255, 255,255);
padding:10px;
min-height:600px;/*我想设置页面大小的高度，让这个看起来不那么别扭，值应该设置多少*/
}
/*设置字体*/
.bgfont {
font-family: font-family:"Times New Roman", Times, serif; /*字体类型的设置，一般设置什么类型？*/
font-size: 24px;
}
/*设置横向列表*/
ul{
list-style-type:none;
}
ul.chatHead{
margin: 0;
padding: 0;
float: left;
}
ul.chatHead li{
display: inline-block;
}
/*设置头像悬停透明效果*/
ul.chatHead img{
opacity: 0.4;
filter:alpha(opacity=40);/*IE8及更早的版本*/
width: 30px;
height: 30px;
}
ul.chatHead img:hover{
opacity: 1.0;
filter:alpha(opacity=100);
}
/*设置输入框样式*/
input[type="text"]{
width: 200px;
height: 25px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
/*设置文本域样式*/
textarea{
width: 100%; /*对于宽度的设置设置具体的数值还是百分数，其区别是什么？*/
rows:4;
display: block;
margin-bottom:10px;
font-size:14px;
resize:none; /*把右下角标志去掉*/
}
/*设置按钮样式*/
input[type="button"]{
width: 112px; /*根据图片的大小设置其长和高*/
height: 30px;
background:url("img/btn.png") no-repeat;
float:right;
}
/*设置头条样式*/
.banner{
height: 30px; /*内容的宽和高*/
width:580px;
background-color: rgb(227,235,237);
margin-top:10px;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 0px;
}
.banner div{
height: 30px;
width:80px;
background-color: rgb(255,255,255);
margin-bottom: 0px;
border-bottom:0px;
padding-left:10px;
padding-top:5px;
}
/*设置发表内容格式*/
#out_content li:hover{
background-color:rgb(211,211,211);
}
.ualign{
margin-left:0px;/*头像边缘和上面导航栏对齐*/
padding-left:0px;
}
.content{
float: left;
margin-left:10px;
}
.length{
max-width:400px;
}/*控制字数，字数一旦限制，其布局就会出现混乱，想哭~*/
.words{
margin-top:0px; /*输入字体顶端对齐*/
margin-bottom:12px;
}
.time{
font-size:14px;
color: rgb(169,169,169);
}
.uname{
color:rgb(70, 130, 180);
font-weight:bold;
}
hr{
clear:left;/*清除浮动，左侧不允许出现浮动的元素*/
width:100%;
border-width:1px;
/*border:1px,dashed,#696969;/*不知道怎么画长虚线*/
}
#userhead img{
cursor:pointer;
}
.active{
opacity:1!important;
}
.del{
text-decoration:underline;
cursor:pointer;
color:rgb(70,144,255);
}
</style>
</head>
<body>
<!--全局-->
<div class="main">
<!--输入框-->
<div>
<h3>来，说说你在做什么，想什么</h3>
<!--输入用户名-->
<input type="text" id="user_name">
<!--选择用户头像-->
<ul id="user_head" class="chatHead" >
<li><img src="img/face.gif" alt="user1" class="active"></li> <!--li元素好像不宜回车，否则取子节点会出现问题-->
<li><img src="img/face1.gif" alt="user2"></li>
<li><img src="img/face2.gif" alt="user3"></li>
<li><img src="img/face3.gif" alt="user4"></li>
<li><img src="img/face4.gif" alt="user5"></li>
<li><img src="img/face5.gif" alt="user6"></li>
<li><img src="img/face6.gif" alt="user7"></li>
<li><img src="img/face7.gif" alt="user8"></li>
<li><img src="img/face8.gif" alt="user9"></li>
</ul>
</div>
<!--输入发表内容-->
<div>
<textarea rows="4" id="user_content"></textarea>
<span class="bgfont">还能输入140个字</span>
<input type="button" id="addBtn" name="submit" value="">
</div>
<!--发表框-->
<div>
<div class="banner">
<div>大家在说</div>
</div>
<ul id="out_content" class="ualign">
<li>
<!--头像-->
<div class="content"><img src="img/face.gif"></div>
<!--发表内容-->
<div class="content length ">
<p class="words"><span class="uname">王二：</span> 今天好开心呀！</p>
<p class="words time ">1月23日 9:24 <span class="del">删除</span></p>
</div>
<hr>
</li>
<li>
<!--头像-->
<div class="content">
<img src="img/face.gif">
</div>
<!--发表内容-->
<div class="content ">
<p class="words"><span class="uname">王二：</span> 今天好开心呀！</p>
<p class="words time ">1月23日 9:24 <span class="del">删除</span> </p>
</div>
<hr>
</li>
</ul>
</div>
</div>
</body>
</html>CSS页面布局 （类似微博页面）
猜你喜欢
转载自blog.csdn.net/lalalawxt/article/details/79277175
今日推荐
周排行