简介：
没错！这是一个小作业而已。简单记一下笔记。
最后效果图
最后效果图
目录结构：
![]()
遇到的俩个小问题：
1.不换行，因为胡乱打的，是一个长单词
不换行，因为胡乱打的，是一个长单词
解决：
word-wrap:break-word;/*加上长单词也换行*/ 具体请参考下面代码。2.同样的俩个div浮动后，写着写着发现怎么高度不一致了。
高度不一致
问题原因：因为我去掉了父left的背景色，后来在子div中加上的颜色。而父right有背景色，背景色默认也是会填充padding区域。解决加上
background-clip: content-box;这里我也是去掉父right的背景色，在里面子div中加上颜色。主要记住背景色默认也是会填充padding区域！
/* background-color: white;此处的背景色也会填充padding区域 */
/* background-clip: content-box; */
/*
background-clip的属性还有：
content-box: 背景被裁剪到内容框的位置
border-box: 背景被裁剪到边距框的位置
*/
上代码
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html+css小demo</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div id="header">
<div id="header-content" class="clearfix">
<div id="logo" class="v-center">
<img src="image/log.png" alt="log">
</div>
<div id="search" class="v-center">
<input type="text">
</div>
<div id="double-link" class="v-center">
<a href="#">注册</a>
<a href="#">登陆</a>
</div>
</div>
</div>
<div id="content" class="clearfix">
<div id="content-left">
<div id="nav">
<ul class="clearfix">
<li><a href="#" class="current-active">技术</a></li>
<li><a href="#">创意</a></li>
<li><a href="#">好玩</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">问答</a></li>
</ul>
</div>
<div id="posts">
<div id="post" class="clearfix">
<div id="post-head">
<img src="image/head.png" alt="headjpg">
</div>
<div id="post-title">
<div id="post-title-text">
如何优雅的吃螃蟹?
</div>
<div id="post-info" class="clearfix">
<div id="post-info-text">
Android ⚝ vivo ⚝ 2 分钟前 ⚝ 最后回复来自 ID2333
</div>
<span id="reply-count">120</span>
</div>
</div>
</div>
<div id="post" class="clearfix">
<div id="post-head">
<img src="image/head.png" alt="headjpg">
</div>
<div id="post-title">
<div id="post-title-text">
任正非：华为对向苹果等出售5G芯片持开放态度.
</div>
<div id="post-info" class="clearfix">
<div id="post-info-text">
Android ⚝ oppo ⚝ 2 分钟前 ⚝ 最后回复来自 ID7313
</div>
<span id="reply-count">980</span>
</div>
</div>
</div>
<div id="post" class="clearfix">
<div id="post-head">
<img src="image/head.png" alt="headjpg">
</div>
<div id="post-title">
<div id="post-title-text">
How to defeat Ma Yun?
</div>
<div id="post-info" class="clearfix">
<div id="post-info-text">
Apple ⚝ S9 ⚝ 12 分钟前 ⚝ 最后回复来自 ID99655
</div>
<span id="reply-count">170</span>
</div>
</div>
</div>
<div id="post" class="clearfix">
<div id="post-head">
<img src="image/head.png" alt="headjpg">
</div>
<div id="post-title">
<div id="post-title-text">
What is the Earth like in the next 100 years?
</div>
<div id="post-info" class="clearfix">
<div id="post-info-text">
Android ⚝ HuaWei-P30 ⚝ 20 分钟前 ⚝ 最后回复来自 ID9383
</div>
<span id="reply-count">520</span>
</div>
</div>
</div>
<div id="post" class="clearfix">
<div id="post-head">
<img src="image/head.png" alt="headjpg">
</div>
<div id="post-title">
<div id="post-title-text">
Welcome to Mars!A detailed introduction to Mars.
</div>
<div id="post-info" class="clearfix">
<div id="post-info-text">
Android ⚝ xiaomi ⚝ 2 分钟前 ⚝ 最后回复来自 ID1874
</div>
<span id="reply-count">320</span>
</div>
</div>
</div>
</div>
</div>
<div id="content-right">
<div id="hot-posts">
<div id="hot-module-title">
今日热议主题
</div>
<div id="hot-post" class="clearfix">
<div id="hot-post-head">
<img src="image/head.png" alt="">
</div>
<div id="hot-post-title">
What's the weight of Mars?
</div>
</div>
<div id="hot-post" class="clearfix">
<div id="hot-post-head">
<img src="image/head.png" alt="">
</div>
<div id="hot-post-title">
When is Mars suitable for human habitation?
</div>
</div>
<div id="hot-post" class="clearfix">
<div id="hot-post-head">
<img src="image/head.png" alt="">
</div>
<div id="hot-post-title">
是时候展现真正的技术了!
</div>
</div>
</div>
<div id="running-status">
<div id="running-module-title">
社区运行状况
</div>
<div id="statistic">
<div id="statistic-item" class="clearfix">
<div id="statistic-name">
注册会员
</div>
<div id="statistic-value">
255
</div>
</div>
<div id="statistic-item" class="clearfix">
<div id="statistic-name">
主题
</div>
<div id="statistic-value">
1234562
</div>
</div>
<div id="statistic-item" class="clearfix">
<div id="statistic-name">
回复
</div>
<div id="statistic-value">
789
</div>
</div>
</div>
<div id="scoreboard">
<div id="fortune">♕财富排行榜</div>
<div id="consumption">♔消费排行榜</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">
<div id="footer-links">
<ul class="clearfix">
<li><a href="#">关于</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">Ali</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
<div id="copyright" class="v-center h-center">
版权说明：火星三次元大学 计算机科学与技术 喵星人
</div>
<div id="updata">
最后更新日期：2019年4月14日
</div>
</div>
</div>
</body>
</html>
- demo.css
html body {
margin: 0;
padding: 0;
background-color: #ececec;
}
/*********************header************************/
#header{
background-color: white;
}
#header-content{
margin: 0 auto;/*水平居中*/
height: 80px;
width: 800px;
}
#logo {
float: left;
}
#search{
float: left;
margin-left: 70px;
}
#double-link{
float: right;
font-weight: bolder;
}
input{
background-image: url(../image/search.png);/*注意这里是css文件目录下，所以需要上一层*/
/*这里图片的信息是231*24 所以input的高度是24*/
padding: 0;/*消去自带的padding*/
height: 25px;
width: 210px;/*宽度需要减去padding-lef和padding-right*/
padding-left: 25px;/*让文字显示在放大镜符号🔍右边*/
padding-right: 10px;/*让长文字不至于抵达右边距*/
border: none;/*去掉文本框的边框*/
outline: none;/*去掉在一些浏览器中input高亮边框*/
}
/*********************content************************/
#content{
margin: 30px auto;
width: 800px;
word-wrap:break-word;/*加上长单词也换行*/
}
/***********content-left************/
#content-left{
width: 545px;
margin-right: 10px;
padding: 5px;
float: left;
}
/*********nav********/
#nav{
background-color: white;
overflow: hidden;
/*在不加overflow:Hidden;的时候，#nav ul{margin-top}这个属性是认不到边的，也就是失效。所以不会有白色背景。
但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效*/
}
#nav ul{
list-style: none;
padding: 0;
margin: 10px;
}
#nav li{
float: left;
margin-right: 20px;
}
/*********post********/
#post{
margin-top: 3px;
background-color: white;
height: 64px;
}
#post-head{
width: 64px;
height: 64px;
float: left;
}
#post-head img{
width: 50px;
height: 50px;
margin: 7px;
}
#post-title{
width: 461px;
float: left;
height: 50px;
margin: 10px;
}
#post-title-text{
width: 440px;
height: 22px;
overflow: hidden;/*标题保持一行 多余hidden*/
line-height: 28px;
}
#post-info-text{
float: left;
font-size: smaller;
color: #808080;
}
#reply-count{
float: right;
margin-right: 15px;
height: 19px;
background-color: #aab0c6;
padding: 0 8px;
border-radius: 12px;
font-size: smaller;
color: #808080;
}
/***********content-right************/
#content-right{
width: 225px;
padding: 5px;
float: left;
/* background-color: white;此处的背景色也会填充padding区域 */
/* background-clip: content-box; */
/*
background-clip的属性还有：
content-box: 背景被裁剪到内容框的位置
border-box: 背景被裁剪到边距框的位置
*/
}
/*********hot-post********/
#hot-module-title{
background-color: white;
margin-bottom: 3px;
padding: 5px;
color: #e2dcd9;
font-size: smaller;
}
#hot-post{
background-color: white;
margin-bottom: 3px;
}
#hot-post-head{
width: 32px;
height: 32px;
float: left;
}
#hot-post-head img{
width: 24px;
height: 24px;
margin: 4px;
}
#hot-post-title{
float: left;
width: 183px;
height: 15px;
overflow: hidden;
padding: 5px;
font-size: smaller;
}
/**********running-status*********/
#running-status{
border-radius: 20px;
margin-top: 15px;
}
#running-module-title{
background-color: white;
color: #e2dcd9;
margin-bottom: 3px;
font-size: smaller;
padding: 5px;
}
#statistic{
background-color: white;
padding: 8px;
}
#statistic-name{
float: left;
color: #c4b4a6;
width: 80px;
text-align: right;
}
#statistic-value{
float: left;
font-weight: bolder;
margin-left: 15px;
}
#scoreboard{
background-color: white;
margin-top: 3px;
padding: 5px;
}
/*********************footer************************/
#footer{
background-color: white;
}
#footer-content{
width: 800px;
height: 120px;
margin: 0 auto;
position: relative;
/* overflow: hidden; */
/*css特性：
if父元素设置了margin，则第一个子元素的margin-top会和父元素的top合并
最后一个子元素的margin-bottom会和父元素的margin-bottom合并
所以
方法1.给父元素加上overflow: hidden;
方法2.如这里所作：
父：{
position: relative;
}
子：{
position: absolute;
top:xx;
bottom:xx;
}
*/
}
#footer-links ul{
list-style: none;
padding: 0;
margin: 0;/*ul会有自带的margin属性*/
position: absolute;
top:10%;
}
#footer-links li{
float: left;
margin-right: 25px;
}
#footer-links a{
color: #808080;
}
#nav .current-active{
background-color: #333344;
color: white;
padding: 5px;
border-radius: 4px;
}
#updata{
position: absolute;
bottom: 10%;
right: 0;
}
/*********************辅助样式************************/
/* 清除浮动 */
.clearfix{
*zoom: 1;
}
.clearfix::after{
content:".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* 垂直居中 */
.v-center{
position: relative;
top: 50%;
transform: translateY(-50%);/*y值移动负50%即向上移动自身宽度的50%*/
}
/* 水平居中 */
.h-center{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
a{
text-decoration: none;
color: black;
}
