javaee的目标就是为了做一个网站，接下来我们做一个简单的博客系统~~
博客列表页：
存放的是导航栏,背景的样式.每个页面都会用到,上述详情页直接引入该代码
/* 去除浏览器的公共样式，并设置border-box，避免元素盒子被内边距撑大 */
*{margin: 0;padding: 0;box-sizing: border-box;
}
/*html是页面的最顶层元素，高度100%是相对父元素来说高度是100%（和父元素一样高） 对于html标签来说，父元素就是浏览器窗口，浏览器窗口有多高，html就有多高，body的父元素是html，设为100%意思是body和html一样高此时，body和html的高度就和浏览器窗口一样高了如果不设置高度，此时元素的默认高度取决于内部的内容高度，背景图就不好设置尺寸了
*/
html,body{height: 100%;
}body{/* 引入背景图 */background-image: url(../image/background_image.png); /* 让背景图不要重复 */background-repeat: no-repeat;/* 有白边，让背景图尽量伸展开 */background-size: cover;/* 背景图垂直水平都居中 */background-position: center center;
}/* 导航栏的css样式 */
.nav{/* 和父元素一样宽 */width: 100%;/* 高度来一点 ，50px差不多*/height: 50px;/* 设置背景色 */background-color:rgba(50,50,50,0.4);/* 文字颜色设为白色 */color:white;/* 元素都是水平排列的，那就用弹性布局来设置 */display: flex;/* 垂直方向子元素居中 */align-items: center;
}/* 设置背景图 */
.nav img{width: 40px ; height: 40px ;margin-left: 30px;margin-right: 10px;/* 方形转为圆型 */border-radius: 50%;
}.nav .spacer{width: 70%;
}
.nav a{color: white;/* 去掉下划线 */text-decoration: none; /* 间隔 */padding: 0 10px;
}.container{width: 1000px;/* calc可以自适应页面大小,-50是因为导航栏 */ height: calc(100% - 50px);/* 水平居中 */margin: 0 auto;/* 弹性布局 */display: flex;align-items: center;justify-content: space-between;/* background-color: black; */
}.container-left{/* 尺寸写%,是相对于父元素而言的 */height: 100%;width: 200px;/* background-color: aqua; */
}.container-right{height: 100%;/* 留出缝 */width: 795px;background-color: rgba(255,255,255,0.8);border-radius: 10px;/* 让这个元素自己能带上滚动条 *//* 这个属性表示，内容没有溢出不加滚动条，内容溢出，自动加上滚动条 */overflow: auto;}/* 左侧用户信息 */
.card{background-color: rgba(255,255,255,0.8);border-radius: 10px;padding: 30px;
}/* 用户头像 */
.card img{width: 140px;height: 140px;border-radius: 50%;
}.card h3{text-align: center;/* 边距 */padding: 10px;
}.card a{color: #777;text-align: center;text-decoration: none;/* 没有居中,是因为a是行内元素 ,所以要转为块级元素*/display: block;padding: 10px;
}.card .counter{/* 为了让里面的元素水平排列,使用弹性布局 */display: flex;justify-content: space-around;padding: 5px;
}实现的是博客列表专用的样式(题目,日期,段落居中,段落缩进等)
/* 这个文件是给博客列表页实现样式的 *//* 设置整个博客的容器元素的样式 */
.blog{width: 100% ;padding: 20px;
}.blog .title{text-align: center;font-size: 24px;font-weight: 700;padding: 10px;
}.blog .date{text-align: center;color: rgb(15,189 ,114 );padding: 10px;
}.blog .desc{text-indent: 2em;
}.blog a{/* a标签不方便设置样式，转为块元素 */display: block;width: 120px;height: 40px;margin-top: 20px;margin-left: auto;margin-right: auto;border:2px solid black;color: black;text-align: center;text-decoration: none;/* 让文字垂直居中 */line-height: 40px;transition: all 0.2s;border-radius: 10px;
}.blog a:hover{color: white;background-color: #666;
}<!DOCTYPE html>
<html lang="en">
<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><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog_detail.css">
</head>
<body><!-- 导航栏 --><div class="nav"><img src="./image/logo.png" alt="" ><span class="title">我的博客系统</span><!-- 这个标签仅仅用于占位 --><a class="spacer"></a><a href="#">主页</a><a href="#">写博客</a><a href="#">注销</a> </div><div class="container"><!-- 左侧信息 --><div class="container-left"> <div class="card"><!-- 用户头像 --><img src="./image/屏幕截图 2023-04-04 090658.png" alt=""><!-- 用户名字 --><h3>小金春春</h3><a href="">github 地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>3</span></div></div></div><!-- 右侧信息 --><div class="container-right"><!-- 博客标题 --><h3 class="title">我的第一篇博客</h3><!-- 博客发布时间 --><div class="date">2023-5-6</div><!-- 博客正文 --><div class="content"> <p>一、“双一流”大学名单根据2022年教育部公布的《“双一流”建设高校名单》可知，我国目前共有42所“双一流”大学，其中又分为A、B两个类别。具体名单如下：1.“双一流”A类高校目前共有36所大学入选“双一流”A类高校：北京（8所）：北京大学、中国人民大学、清华大学、北京航空航天大学、北京理工大学、中国农业大学、北京师范大学、中央民族大学天津（2所）：南开大学、天津大学辽宁（1所）：大连理工大学吉林（1所）:</p> </div></div></div>
</body>
</html>
/* 这个样式给博客详情页使用 */
.container-right .title{text-align: center;padding-top: 30px;
}.container-right .date{text-align: center;color: rgb(15,189 , 114);padding: 10px;
}.container-right .content p{ text-indent: 2em; padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<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><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><!-- 导航栏 --><div class="nav"><img src="./image/logo.png" alt="" ><span class="title">我的博客系统</span><!-- 这个标签仅仅用于占位 --><a class="spacer"></a><a href="#">主页</a><a href="#">写博客</a> </div><!-- 正文部分 --><!-- 贯穿整个页面的容器 --><div class="login-container"><!-- 垂直水平居中的登入对话框 --><div class="login-dialog"><h3>登入</h3><div class="row"><span>用户名</span><input type="text" id="username" placeholder="手机号邮箱"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"> <button id="submit">登录</button></div></div></div>
</body>
</html>.login-container{width: 100%;height: calc(100% - 50px);/* background-color: brown; */justify-content: center;align-items: center;display: flex;
}.login-dialog{width: 400px;height: 330px;background-color: rgba(255, 255, 255,0.8);border-radius: 10px;
}.login-dialog h3{text-align: center;padding: 50px 0;}.login-dialog .row{height: 50px;display: flex; justify-content: center;align-items: center;}.login-dialog .row span{width: 100px;}#username,#password{height: 40px;width: 200px;border-radius: 5px;/* 去掉边框 */border: none;/* 放大字体 */font-size: 15px;/* 边距 */padding-left: 5px;
}#submit{width: 300px;height: 40px;color: white;background-color: orange;border: none;border-radius: 10px;
}#submit:active{background-color: rgb(15,189,114);
}<!DOCTYPE html>
<html lang="en">
<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><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog_edit.css"><!-- 引入 jquery--> <script src=".0.0/jquery.min.js"></script> <!-- 引入 editor.md 的依赖 --> <link rel="stylesheet" href="editor.md/css/editormd.min.css" /><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></head>
<body><!-- 导航栏 --><div class="nav"><img src="./image/logo.png" alt="" ><span class="title">我的博客系统</span><!-- 这个标签仅仅用于占位 --><a class="spacer"></a><a href="#">主页</a><a href="#">写博客</a><a href="#">注销</a> </div><!-- 编辑区的容器 --><div class="bolg-edit-container"><!-- 博客标题编辑区 --><div class="title"><input type="text" id="title" placeholder="请输入文章标题"><button id="submit">发布文章</button></div><!-- 博客编辑器,这里用id是为了和markdown编辑器对接 --><div id="editor"></div></div><script>var editor = editormd("editor", {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: "100%",// 设定编辑器高度height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"});
</script></body>
</html>.bolg-edit-container{width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}.bolg-edit-container .title {height: 50px;display: flex;align-items: center;justify-content: space-around;}#title{height: 40px;width:895px;border: none;padding-left: 5px;font-size: 15px;border-radius: 5px;/* 去掉轮廓线 */outline: none;/* 设置背景半透明 */background-color: rgba(255, 255, 255, 0.7);;
}#title:focus {/* 获取到焦点，变不透明 */background-color: rgb(255, 255, 255);
}
#submit{height: 40px;width: 100px;border: none;color: white;background-color: orange;border-radius: 5px;font-size: 15px;}#submit:active{background-color: rgb(15,189,114);
}#editor{border-radius: 10px;/* 透明 */opacity: 80%;
}本文发布于:2024-02-03 03:18:13，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170690149048315.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
