博客系统前端（页面设计）
2024-05-15 00:06:13
预期设计页面
- 博客列表页
- 博客正文页
- 博客登陆页
- 博客编辑页
所有页面公用的css代码
common.css
*{margin:0;padding:0;box-sizing: border-box;
}
/* 设置整体页面高度 */
html,body{height:100%;background-image: url("../img/02.jpg");background-position: center center;background-size: cover;background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav{width: 100%;height: 50px;background-color: rgba(51,51,51,.4);color:#fff;display: flex;justify-content: left;align-items: center;
}
/* 导航栏中的图标 */
.nav img{width: 40px;margin-left: 30px;margin-right: 10px;border-radius: 50%;
}
/* 导航栏中的占位器 */
.nav .spacer{width: 70%;
}
/* 导航栏中的按钮 */
.nav a{color:#fff;text-decoration: none;padding: 0 10px;
}/* 页面内容容器, 正文部分 */
.container{/* 使用 calc 计算高度 */height: calc(100% - 50px);/* 计算正文高度 */width:1200px;/* 水平居中 */margin: 0 auto;/* 使用弹性布局 */display: flex;justify-content: space-between;align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left{height: 100%;width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right{height: 100%;/* 和左侧部分中间留出 5px 间隙 */width:995px;/*如果内容溢出就加滚动条*/overflow: auto;background-color: rgba(255,255,255,.8);border-radius: 10px;
}/* 展示用户信息的卡片 */
.card{background-color: rgba(255,255,255,.8);border-radius: 10px;padding: 30px;
}
/* 用户头像 */
.card img{width: 140px;border-radius: 50%;
}
/* 用户名 */
.card h3{text-align: center;padding: 30px;
}
/* 用户 github 链接 */
.card a{display: block;text-align: center;color: #999;text-decoration: none;padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter{padding: 5px;display: flex;justify-content: space-around;
}实现博客列表页
效果
HTML代码
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!--头部导航 navigation--><div class="nav"><img src="img/12.jpg"><span class="title">我的博客系统</span><!--用来占据中间空白位置--><span class="spacer"></span><a href="index.html">主页</a><a href="editor.html">写博客</a><!--删除用户的登陆状态，需要动态处理--><a href="login.html">注销</a></div><!--正文部分--><div class="container"><!--个人信息--><div class="container-left"><div class="card"><img src="img/00.jpg" alt='作者头像' class="avatar"><h3>芊芊子</h3><a href="https://www.gitee.com/">我的gitee</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!--文章列表--><div class="container-right"><div class="blog"><div class="title">我的第一篇博客</div><div class="date">2021-12-1</div><div class="desc">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consecteturadipisicing elit. Cum distinctio ullam eum utveroab laborum numquam tenetur est in dolorum a sint, assumendaadipisci similique quaerat vel.Facere,et.</div><a href="article.html?blogId=1" class="detail">查看全文 > ></a></div><div class="blog"><div class="title">我的第二篇博客</div><div class="date">2021-12-3</div><div class="desc">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consecteturadipisicing elit. Cum distinctio ullam eum utveroab laborum numquam tenetur est in dolorum a sint, assumendaadipisci similique quaerat vel.Facere,et.</div><!-->是转义字符 ，他的意思是 >>--><a href="article.html?blogId=2" class="detail">查看全文 > ></a></div><div class="blog"><div class="title">我的第三篇博客</div><div class="date">2021-12-5</div><div class="desc">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consecteturadipisicing elit. Cum distinctio ullam eum utveroab laborum numquam tenetur est in dolorum a sint, assumendaadipisci similique quaerat vel.Facere,et.</div><!-->是转义字符 ，他的意思是 >>--><a href="article.html?blogId=3" class="detail">查看全文 > ></a></div></div></div>
</body>
</html>
CSS代码
index.css
/* 表示一篇博客 */
.blog{width: 100%;padding: 30px 20px;border-bottom: 2px dotted black;
}
/* 博客的标题 */
.blog .title{color: black;font-size: 20px;font-weight: 700;text-align: center;padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc{color: #000;text-indent: 2em;margin-top:20px;
}
/* 博客的日期 */
.blog .date{color: #008000;margin-top: 10px;text-align: center;
}
/* 查看详情 按钮 */
.blog .detail{display: block;width: 120px;height: 40px;line-height: 40px;color: black;text-align: center;text-decoration: none;margin: 10px auto 0 auto;border: 2px solid black;/* 给颜色加上过渡效果，动画的持续时间是多久 */transition: all 0.3s;
}
/* 查看详情按钮的鼠标 hover 效果 */
/*：hover:伪类选择器，意为鼠标滑过时应用该样式*/
.blog .detail:hover{background-color: #000;color: #fff;
}
实现博客正文页
效果
HTML代码
article.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正文页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/article.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav"><img src="img/12.jpg"><span class="title">我的博客系统</span><!--用来占据中间空白位置--><span class="spacer"></span><a href="index.html">主页</a><a href="editor.html">写博客</a><!--删除用户的登陆状态，需要动态处理--><a href="login.html">注销</a>
</div>
<!--正文部分-->
<div class="container"><!--个人信息--><div class="container-left"><div class="card"><img src="img/00.jpg" alt='作者头像' class="avatar"><h3>芊芊子</h3><a href="https://www.gitee.com/">我的gitee</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!--文章列表--><div class="container-right"><div class="blog-content" id="1"><h3>我的第一篇博客</h3><div class="date">2021-12-3</div><p>从今天起我要好好敲代码.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.</p></div><div class="blog-content" id="2"><h3>我的第二篇博客</h3><div class="date">2021-12-5</div><p>从今天起我要好好敲代码.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.</p></div><div class="blog-content" id="3"><h3>我的第三篇博客</h3><div class="date">2021-12-7</div><p>从今天起我要好好敲代码.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolormollitia dolorum animi.</p></div></div>
</div>
</body>
</html>
CSS代码
article.css
/* 博客正文容器 */
.blog-content{padding: 30px;line-height: 2em;
}
/* 博客标题 */
.blog-content h3{text-align: center;padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {color:#008000;padding: 10px 0;text-align: center;
}
/* 博客内容段落 */
.blog-content p{text-indent: 2em;padding: 10px 0;
}
实现博客登录页
效果
HTML代码
login.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav"><img src="img/12.jpg"><span class="title">我的博客系统</span><!--用来占据中间空白位置--><span class="spacer"></span><a href="index.html">主页</a><a href="editor.html">写博客</a><!--删除用户的登陆状态，需要动态处理--><a href="login.html">注销</a>
</div>
<!--正文部分-->
<div class="login-container"><div class="login-dialog"><form action="index.html"><h3>登录</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><button id="submit">提交</button></div></form></div>
</div>
</body>
</html>
CSS代码
login.css
.login-container{width: 100%;height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}
.login-dialog{width: 400px;height: 400px;background-color: rgba(255,255,255,.8);border-radius: 10px;
}
.login-dialog h3{padding: 50px 0;text-align: center;
}
.login-dialog .row{height: 50px;display: flex;justify-content: center;align-items: center;
}
.login-dialog .row span{display: block;width: 100px;font-weight: 700;
}
#username,#password{width: 200px;height: 40px;line-height: 40px;font-size: 24px;border-radius: 10px;border:none;outline: none;text-indent: 10px;
}
#submit{width: 300px;height: 50px;color: white;background-color: lightsalmon;border: none;border-radius: 10px;
}
#submit:active{background-color: brown;
}实现博客编辑页
效果
HTML代码
editor.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>编辑页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/editor.css"><link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav"><img src="img/12.jpg"><span class="title">我的博客系统</span><!--用来占据中间空白位置--><span class="spacer"></span><a href="index.html">主页</a><a href="editor.html">写博客</a><!--删除用户的登陆状态，需要动态处理--><a href="login.html">注销</a>
</div>
<!--正文-->
<div class="blog-editor-container"><form action="article.html"><div class="title"><input type="text" placeholder="在此写下文章标题" id="title"><button id="submit">发表文章</button></div><!-- 创建编辑器标签 --><div id="editor"></div></form>
</div>
<script src="js/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script><script>// 初始化编辑器var editor=editormd("editor",{// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.width:'100%',// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度height:'calc(100% - 50px)',// 编辑器中的初始内容markdown:"#在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path:'editor.md/lib/'});
</script>
</body>
</html>
CSS代码
editor.css
.blog-editor-container{width: 1200px;height: calc(100% - 50px);margin: 0 auto;
}
form{display: block;height: 100%;
}
.blog-editor-container .title{width: 100%;height: 50px;display: flex;justify-content: space-between;align-items: center;
}
#title{height: 40px;width: 990px;text-indent: 10px;border-radius: 10px;border: none;outline: none;background-color: rgba(255,255,255,.8);
}
#submit{height: 40px;width: 200px;color:white;background-color: orange;border: none;outline: none;border-radius: 10px;
}
#editor{border-radius:10px ;/* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 *//* background-color:rgba(255, 255, 255, 0.8); *//* 可以使用 opacity 属性实现 */opacity: 80%;
}
博客系统前端（页面设计）相关推荐
- 实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
- 博客系统（页面设计）
目录 博客系统(页面设计) 效果预览 博客列表页 博客详情页 博客登录页 博客编辑页 实现博客列表 实现导航栏 实现版心 实现左侧个人信息 实现博客列表 实现博客详情页 引入导航栏(HTML.CSS) ...
- 博客系统前端页面代码实现及页面展示(代码版)
hi,大家好,今天为大家带来博客系统的前端代码及页面展示 我们使用VS code 这个编码工具来编写代码 博客系统前端页面分为四个部分 1.博客列表页 2.博客编辑页 3.博客登录页 4.博客详情页
- 博客系统程序(页面设计)
咱们学习javaEE的目的就是完成一个网站.在当前学习的基础上,已经可以完成我们的博客系统的页面的设计了!!! 首先我们要进行统筹规划: 首先我们的博客页面将会有4个页面: 1.博客列表页 2.博客详 ...
- 博客系统前台页面设计
设计内容: 博客前台页面设计 分工: 美工设计与前台代码 开发软件: Photoshop cs5 Dreamweaver cs5 开发周期:5+3+8=16小时 兼容性调试: 通过IE8,Sougo, ...
- 【博客系统】页面设计（附完整源码）
- 【博客系统】后台设计
文章目录 博客系统(使用模板技术) 准备工作 数据库设计 表设计 文章表 用户表 完整`SQL` 封装数据库操作代码 创建`DBUtil` 创建`Blog`类和`User`类 创建`BlogDao`类 ...
- 使用Axure RP进行博客系统的原型设计
原型设计 我使用Axure RP软件对个人博客系统进行原型设计,其实就是仿照我的博客进行简单的设计,然后做一些改变.以下是博客首页的原型设计图.虽然很丑,但是是第一次接触原型设计.再接再厉. 查看全文 ...
- 博客系统项目：设计篇
博客系统项目:设计篇 1 由来 2 需求 3 设计 3.1 功能设计 3.1.1 用例图 3.1.2 实体类图 3.1.3 实体关系图 3.2 数据设计 3.2.1 数据模型 4 版面设计 4.1 首 ...
- 数据库设计-博客系统数据库的设计
数据库设计-博客系统数据库的设计 数据库整体设计 问题: 一个博客系统会有哪些功能呢,肯定会有的是博客列表,博客详情,评论,登陆注册等等这些功能,那应该建多少张表呢?应该给这些表添加哪些字段呢?字段的 ...
最新文章
- Android------Android.mk调用shell脚本
- 微信运动：抓住用户的小九九，一个都别跑！
- PMP知识点(三、范围管理)
- 关于华硕主板“USB Devices Over Current Status Detected!”
- 20 best jquery 截图
- container view_高级UI晋升之常用View（三）中篇
- 翻译：重载解决和Null
- css3 圣诞红包雨效果
- 【原创】无线LED条屏信息报警项目---2012.05
- gentoo linux u盘安装,Gentoo系统安装步骤详解
- OWT在企业远程智能视频服务场景中的应用
- 第三方支付网关的选择
- Bilinear CNN Faster代码解读
- ibmx340服务器硬盘,IBM3850安装操作系统
- html如何上下滚动字幕,css如何做滚动字幕效果？
- px,in,mm,pt,dp,dip,sp 之间的换算公式以及区别 屏幕密度
- 数字图像学笔记——14. 图像退化与复原（线性退化）
- 听六小桨讲AI | 第7期：3D卷积和分组卷积
- 腾讯会议、钉钉如何使用虚拟摄像头？详细教程
- HTML中的br标签讲解（菜鸟）