如何建设一个双语的网站,接入商 济南网站建设,仓库管理软件哪个好,北京建设网办事大厅目录
主页
HTML
CSS
文章详细页面
HTML
CSS
登录页面
HTML
CSS
文章编辑页
HTML
CSS 这只是前端的页面组成#xff0c;还没有接入后端#xff0c;并不是完全体
主页 HTML
!DOCTYPE html
!-- html langen --
head还没有接入后端并不是完全体
主页 HTML
!DOCTYPE html
!-- html langen --
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title墨轩博客页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog.css
/head
body!-- 导航栏 --div classnav!-- logo图片 --img srcimage/logo.jpg alt width50pxspan classtitle我的博客系统/spanspan classspacer/span!-- 导航栏 --a hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa href#注销/a/div!-- 页面主体 --div classcontainer!-- 左侧个人信息 --div classcontainer-leftdiv classcardimg srcimage/蕾姆.jpg alth2墨轩/h2a href#github链接/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan3/span/div/div!-- 右侧个人信息 --/divdiv classcontainer-rightdiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva hrefblog_detail.html查看全文 gt;gt; /a!-- gt;是html的 正常的无法之间写入 --div classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /adiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /adiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /adiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /adiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /adiv classblog这是我的第一篇文章/divdiv classdate2024-3-27 20:20/divdiv classdesc文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque./diva href#查看全文 gt;gt; /a/div/div
/body
/html
CSS
html,body{/* 让html和body占满浏览器窗口 */height: 100%;width: 100%;background-image: url(../image/风景图.jpg);/* background-repeat: no-repeat; */background-size: cover;
}.nav{width: 100%;height: 50px;background-color: rgba(50, 50, 50,0.3);color: white;/* 开启弹性布局 */display: flex;/* 水平居中 */align-items: center;
}.nav img{/* 将图片设为圆的 */border-radius: 50px;/* 左侧间距 */margin-left: 30px;/* 右侧间距 */margin-right: 20px;
}/* 用于隔开我的博客和主页 */
.nav .spacer{width: 78%;
}.nav a{color: white;/* 上下间隔0 左右6px */padding: 0 6px;
}.container{width: 1000px;/* 使用这个函数 -直接必须有空格 *//* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */height: calc(100% - 100px);margin: 0 auto;/* 让两个div能在同一行 */display: flex;/* 元素之间留有空隙 */justify-content: space-between;
}.container-left{height: 30%;width: 200px;}.container-right{height: 100%;width: 750px;background-color: rgba(255, 255, 255, 0.5);/* 边框圆角 */border-radius: 10px;overflow: auto;
}.card{background-color: rgba(255,255,255,0.5);/* 内边距距离 */padding: 30px;/* 边框圆角 */border-radius: 10px;
}/* 用户图片 */
.card img{width: 140px;height: 140px;border-radius: 70px;
}/* 用户昵称 */
.card h2{text-align: center;/* padding: 10px; */
}/* 链接属性 */
.card a{/* 开启弹性布局后 居中 */display: block;text-align: center;
}/* 文章属性 */
.card .counter{/* 开启弹性布局 */display: flex;text-align: center;/* 文章与分类分开 */justify-content: space-around;
}/* 因为右侧文章会变换 所有右侧的css单独出来 */右侧文章只要这个页面有所以css是单独出来的
/* 右侧个人信息栏 */
.container-right{/* 一个em为一个字的长度 */text-indent: 3em;/* 距离四个边都有20px的距离 */padding: 20px;
}.blog{text-align: center;/* 字体大小 */font-size: 37px;/* 行间距 上下5 左右0 */padding: 5px 0;/* 字体粗细 */font-weight: 600;
}.date{text-align: center;font-size: 20px;color: grey;/* 行间距 上下5 左右0 */padding: 5px 0;
}.container-right a{/* 设置成块级元素 */display: block;width: 150px;height: 30px;/* 块级元素居中 上下10 左右自适应 */margin: 10px auto;/* 边框 粗细 黑色 实习 */border: 2px black solid;text-align: center;color: black;/* 去除下划线 */text-decoration: none;/* 颜色过渡 1s */transition: all 1s;
}/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{background-color: black;color: white;
}
文章详细页面 HTML
里面包含多个css文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客详情页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog.csslink relstylesheet hrefcss/blog_detail.css
/head
body!-- 导航栏 --div classnav!-- logo图片 --img srcimage/logo.jpg alt width50pxspan classtitle我的博客系统/spanspan classspacer/span!-- 导航栏 --a hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa href#注销/a/div!-- 页面主体 --div classcontainer!-- 左侧个人信息 --div classcontainer-leftdiv classcardimg srcimage/蕾姆.jpg alth2墨轩/h2a href#github链接/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan3/span/div/div!-- 右侧个人信息 --/divdiv classcontainer-rightdiv classblog-contenth3我的第一篇博客/h3div classdate2024-3-27 22:33/divpLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/ppLorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!/p/div/div/div
/body
/html
CSS
.blog-content h3{text-align: center;
}登录页面 HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/head
body!-- 导航栏 --div classnav!-- logo图片 --img srcimage/logo.jpg alt width50pxspan classtitle我的博客系统/spanspan classspacer/span!-- 导航栏 --a hrefblog_list.html主页/aa hrefblog_edit.html写博客/a/div!-- 登录板块 --div classlogin-containerdiv classlogin-dialogp登录/pdiv classrowspan用户名/spaninput typetext idusername/divdiv classrowspan密码/spaninput typepassword idpassword/divdiv classrowinput typebutton value提交idsubmit/div/div/div
/body
/html
CSS
.login-container{height: calc(100% - 50px);/* 开启弹性布局 block和flex 盒子用flex */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;
}.login-dialog{width: 500px;height: 300px;/* 半透明 */background-color: rgba(255,255,255,0.5);/* 圆角 */border-radius: 10px;
}.login-dialog p{font-weight: 700;font-size: 30px;text-align: center;
}.login-dialog h3{padding: 20px 0;/* 文字水平居中 */text-align: center;
}.login-dialog .row{height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span{width: 100px;font-size: 20px;font-weight: 700;
}#username, #password{/* 框大小 */width: 200px;height: 40px;font-size: 24px;/* 去掉框的边框黑线 */border: none;/* 去掉选择时的边框黑线 */outline: none;/* 输入字体的缩进 */padding-left: 5px;/* 圆角 */border-radius: 15px;
}#submit{width: 300px;height: 40px;color: black;background-color: rgba(255,255,255,0.5);border-radius: 10px;/* 去掉边框 */border: none;
}/* 点击变色 */
#submit:active{background-color: gray;
}
文章编辑页 这里需要放入editor.md和JS文件的jquery.min.js的依赖放入文章编辑的库
HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title博客编辑页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog-edit-container.css!-- 引入 editor.md 的依赖 --link relstylesheet hrefeditor.md/css/editormd.min.css /script srcjs/jquery.min.js/scriptscript srceditor.md/lib/marked.min.js/scriptscript srceditor.md/lib/prettify.min.js/scriptscript srceditor.md/editormd.js/script
/head
body!-- 导航栏 --div classnav!-- logo图片 --img srcimage/logo.jpg alt width50pxspan classtitle我的博客系统/spanspan classspacer/span!-- 导航栏 --a hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa href#注销/a/divdiv classblog-edit-container!-- 标题编辑区 --div classtitle!-- placeholder默认文字 --input typetext idtitle placeholder请输入文章标题input typebutton idsubmit value发布文章/div!-- 博客编辑区 --div ideditor/div/divscriptvar editor editormd(editor, {width: 100%,height: calc(100% - 50px),markdown: # 在这里写下一篇博客,path: editor.md/lib/});/script
/body
/html
CSS
.blog-edit-container{width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}/* 标题编辑区 */
.title{height: 50px;/* 水平方向布局 */display: flex;/* 中间有间隙 */justify-content: space-between;/* 居中 */align-items: center;
}/* 字体 */
#title{height: 40px;width: 890px;font-size: 24px;padding-left: 5px;/* 去掉边框轮廓线 */border: none;/* 选中时轮廓线 */outline: none;border-radius: 10px;
}#submit{height: 45px;width: 100px;border-radius: 10px;color: white;background-color: coral;border: none;transition: all 0.5;
}/* 点击时变色 */
#submit:active{background-color: gray;
}#editor {/* 圆角 */border-radius: 10px;/* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 *//* background-color: rgba(255, 255, 255, 0.8); *//* 用这个就都可以 */opacity: 80%;
}
