一个简约前端主页
css写的有点乱请自行整理修改,随便写着玩的
效果图
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简约主页</title>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
.menu {background: rgb(49,57,60);height: 50px;overflow: hidden;width: 100%;}
.menu ul {list-style-type: none;line-height: 50px;}
.menu ul li {float: left;}
.menu ul li img {margin: 5px;cursor: pointer;}
.menu ul li a {text-decoration: none;display: block;width: 80px;text-align: center;color: rgb(245, 222, 179);}
.menu ul li a:hover {background: rgb(61,70,74);}
.top img {margin: 0;width: 100%;height: 500px;}
.content {width: 1300px;margin: auto;}
.content-left {width: 1000px;}
.content-right {width: 300px;}
[class*="content-"] {float: left;padding: 15px;}
.card {background: rgb(255, 255, 255);width: 100%;box-shadow: 0 0 5px #888888;margin: 20px;border-radius: 5px;}
.card .title {height: 50px;}
.card .title b {border-left: brown solid 4px;padding-left: 15px;font-size: 25px;line-height: 50px;}
.card .text {background: rgb(221, 221, 221);padding: 10px;}
.card .text-new ul {list-style-type: none;padding: 10px;overflow: hidden;}
.card .text-new ul li span a {color: rgb(165, 42, 42);padding: 5px 0;float: left;}
.card .text-new ul li span {float: right;display: block;width: 100%;text-align: right;}
.card .text-name {padding: 10px;overflow: hidden;}
.card .text-name img {border: black solid 1px;}
.card .text-name span {width: 33.33%;float: left;text-align: center;}
.card .bottom {background: rgb(255, 255, 255);height: 50px;}
.card .bottom span {width: 33.33%;display: block;float: left;text-align: center;line-height: 50px;}
.footer {background: rgb(49,57,60);height: 50px;overflow: hidden;width: 100%;}
.footer span {display: block;text-align: center;line-height: 50px;color: rgb(245, 222, 179);}
.footer a {color: rgb(245, 222, 179);}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><img src="./image/logo.png" alt="logo.png"></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">公告</a></li>
<li><a href="#">关于</a></li>
</ul>
<ul style="float: right;">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
<div class="top">
<img src="./image/1.png" alt="1.png">
</div>
<div class="content">
<div class="content-left">
<div class="card">
<div class="title">
<b>文章一</b>
</div>
<div class="text">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>第六行</p>
<p>第七行</p>
</div>
<div class="bottom">
<span>2021-07-26</span>
<span>查看:999</span>
<span>收藏:999</span>
</div>
</div>
<div class="card">
<div class="title">
<b>文章二</b>
</div>
<div class="text">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>第六行</p>
<p>第七行</p>
</div>
<div class="bottom">
<span>2021-07-26</span>
<span>查看:999</span>
<span>收藏:999</span>
</div>
</div>
<div class="card">
<div class="title">
<b>文章三</b>
</div>
<div class="text">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
<p>第六行</p>
<p>第七行</p>
</div>
<div class="bottom">
<span>2021-07-26</span>
<span>查看:999</span>
<span>收藏:999</span>
</div>
</div>
</div>
<div class="content-right">
<div class="card">
<div class="title">
<b>最新公告</b>
</div>
<div class="text-new">
<ul>
<li><span><a href="">公告一</a>21/7/26</span></li>
<li><span><a href="">公告二</a>21/7/26</span></li>
<li><span><a href="">公告三</a>21/7/26</span></li>
<li><span><a href="">公告四</a>21/7/26</span></li>
<li><span><a href="">公告五</a>21/7/26</span></li>
</ul>
</div>
</div>
<div class="card">
<div class="title">
<b>活跃会员</b>
</div>
<div class="text-name">
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
<span><img src="./image/name.png" alt=""><p>123</p></span>
</div>
</div>
</div>
</div>
<div class="footer">
<span>Copyright © 2013-2021 简约主页 <a href="">xxxx.com</a> All Rights Reserved. 备案号:xxxxxxxxxx</span>
</div>
</body>
</html>