纯css简约主页

最新推荐文章于 2022-07-04 10:40:43 发布
最新推荐文章于 2022-07-04 10:40:43 发布
阅读量646 收藏 3
点赞数
分类专栏： 前端 css 文章标签： html css html5 css3
本文链接：https://blog.csdn.net/munanshang/article/details/119105638
版权

一个简约前端主页

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 &copy; 2013-2021 简约主页  <a href="">xxxx.com</a> All Rights Reserved. 备案号：xxxxxxxxxx</span>
    </div>
</body>
</html>
目南殇
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5实现简洁好看的个人主页，个人小站(多种风格附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
05-13 1万+
HTML5实现简洁好看的个人主页(个人小站五种风格附源码)，个人主页源码，个人小站源码，五种风格对应五种常用主页菜单，学习类，展示类，制作类，成就类等，界面主题都是以按钮展开延申，展示个人信息，根据不同类型不同显示，对应图片文字可直接修改，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML+CSS个人主页
04-19
本项目为HTML和CSS编写的简单的个人主页，简单而不失唯美，学习前端的新手可以尝试尝试
css网站首页
m0_61686900的博客
11-18 155
<style> * { margin: 0; padding: 0; } li { list-style: none; } .banner { width: 760px; height: 150px; background-color: pink; margin: auto; } .nav { wid...
CSS：主页布局
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
07-04 210
使用css主页布局
首页的css
setsunadoudou的博客
10-09 336
html,body{ margin:0; padding:0; background-color: lavenderblush; } a{ color:darkgray; } li{ list-s...
简单个人主页
03-10
简单个人主页 html
纯css简约风主页完整
07-26
【纯CSS简约风主页完整】项目是一个以HTML和CSS技术为核心的前端开发实例，旨在创建一个简单、清爽且具有现代感的网页主页。这个项目重点展示了如何仅通过CSS（层叠样式表）来实现页面布局、色彩搭配、字体设计以及...
foxx-ui-template:使用纯CSS的简约foxx ui模板
05-02
使用纯CSS的foxx的ArangoDB的简约ui模板 请使用Pure提供的组件（网格，表单，按钮，表格，菜单）： 文档： : 字体超赞包括： 文档： : 用法 您需要仔细阅读才能看到可能的修改。 使用npm安装grunt和grunt-cli。...
纯CSS3宇宙黑洞动画特效.zip
最新发布
10-15
【标题】"纯CSS3宇宙黑洞动画特效.zip"所涉及的知识点主要集中在CSS3的动画效果上，这个压缩包提供了一种创新且引人注目的视觉体验，即宇宙黑洞动画。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它...
简约时尚的纯CSS3 Tabs选项卡特效
12-13
在实现“简约时尚的纯CSS3 Tabs选项卡特效”时，我们需要考虑以下步骤： 1. **HTML结构**：创建一个包含多个选项卡标题的容器，每个标题对应一个内容区域。通常使用`<ul>`和`<li>`元素作为选项卡标题，而内容区域...
html+css+js漂亮的个人主页
06-09
一个漂亮的个人主页，支持音乐跨界面播放，支持网页背景主题五种样式切换
简洁主页HTML模板下载
12-20
简洁主页HTML模板下载是一款欧美白色商务网站html网站模板。
漂亮html主页
04-10
精美的html首页代码，包括html，js和css文件，你值得拥有
HTML+CSS 实现个人主页
04-16
利用前端写的简单的个人主页，包含HTML的基本运用，也利用了CSS进行美化，通俗易懂的程序，比较适合初学者看，欢迎初学者交流学习
网站主页html+css
09-09
非常完整的实例，非常适合html+css 的学习,希望对大家有所帮助。
css格式主页
weixin_45672677的博客
10-24 667
对上一次的代码改进 首页 <html> <head> <title > 这里是我自己的宇宙</title> <style type="text/css"> body { background-image：url('/C:/Users/90964/Desktop/16.jpg'); background-color:rgba(0,255,0,0.5); } .p1 a:link { font-size:40px;
用css制作网站首页
weixin_45137957的博客
08-16 8665
用css制作网站首页 ​ 下面是我仿照西部开源培训公司的首页写的一段代码，只完成了一部分，太长了且重复太多，所以就没有写完. ​ 这段代码中本来可以将重复的部分抽到一起，减少重复代码，我没有抽是为了看起来更直观 这是西部开源的网站： http://www.westos.org/ 可以对比着看看 <!DOCTYPE html> <html> <head> &...
简单的CSS样式
SamaelzzZ的博客
03-25 545
Hellow大家好！今天我们来学习一些简单的CSS样式 上几期我们学习了很多选择器啊不知道大家掌握的怎么样了，有没有努力练习呢。既然我们都能熟悉运用选择器了那下一步该干什么呢，当然是通过选择器要来页面添加样式啦，话不多说上干货！ 1、首先呢是改变样式的颜色，来看个例子 <div>我是红色 </div> <style> div{ color: red; } </style> 是不是非常简单呢，大家应该发现了吧，这个英语的本身啊就是它的含义，co
简洁但优雅的 HTML 博客模板
02-18
简洁但优雅的 HTML 博客模板
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

目南殇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值