aaronxu/security-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次上传

Browse Source
This commit is contained in:
aaronxu
2025-08-27 14:07:52 +08:00
commit ac04d1bdb4
1310 changed files with 42760 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
01.WEB网站开发/05.实战博客系统前端开发.md Normal file
View File

@@ -0,0 +1,427 @@
# 实战页面前端开发
## 前端部分
最终的效果
![image.png](05.实战博客系统前端开发/1670309793402-12d4726b-3621-4398-be6f-b0520858a1c9.png)
网页布局
![未命名绘图.png](05.实战博客系统前端开发/1670309899412-24dd3ad1-788b-4bca-8314-2f2495d7759a.png)
```html
<!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>Document</title>
<link rel="stylesheet" href="asset/style.css">
</head>
<body>
<div id="header">
<div class="head">
<div class="logo">
<img width="130px" src="asset/img/logo.png" alt="英格科技">
</div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">代码审计</a></li>
<li><a href="#">安全防御</a></li>
<li><a href="#">下载</a></li>
<li><a href="#">渗透测试</a></li>
<li><a href="#">渗透编程</a></li>
<li><a href="#">靶机练习</a></li>
<li><a href="#">安全培训</a></li>
<li><a href="#">公开课</a></li>
</ul>
<form class="f1" action="#" method="GET">
<input type="text" placeholder="请输入搜索的内容">
<input type="submit" value="搜索">
</form>
</div>
</div>
<div id="main">
<div id="main-left">
<div id="a1">
<a href="#">最新文章</a>
</div>
<div class="articles">
<div class="items-img">
<a href="#">
<img src="asset/img/articles-1.jpg" alt="">
</a>
<a href="#" class="img-tag">新闻资讯</a>
</div>
<div class="items-list">
<div class="item-title">
<a href="#">文章的标题文章的标题</a>
</div>
<div class="item-content">
<p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
</div>
<div class="item-date">
2022年12月5日
</div>
</div>
</div>
<div class="articles">
<div class="items-img">
<a href="#">
<img src="asset/img/articles-1.jpg" alt="">
</a>
<a href="#" class="img-tag">新闻资讯</a>
</div>
<div class="items-list">
<div class="item-title">
<a href="#">文章的标题文章的标题</a>
</div>
<div class="item-content">
<p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
</div>
<div class="item-date">
2022年12月5日
</div>
</div>
</div>
<div class="articles">
<div class="items-img">
<a href="#">
<img src="asset/img/articles-1.jpg" alt="">
</a>
<a href="#" class="img-tag">新闻资讯</a>
</div>
<div class="items-list">
<div class="item-title">
<a href="#">文章的标题文章的标题</a>
</div>
<div class="item-content">
<p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
</div>
<div class="item-date">
2022年12月5日
</div>
</div>
</div>
<div class="articles">
<div class="items-img">
<a href="#">
<img src="asset/img/articles-1.jpg" alt="">
</a>
<a href="#" class="img-tag">新闻资讯</a>
</div>
<div class="items-list">
<div class="item-title">
<a href="#">文章的标题文章的标题</a>
</div>
<div class="item-content">
<p>文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览文章预览</p>
</div>
<div class="item-date">
2022年12月5日
</div>
</div>
</div>
<div class="more">
<a href="#">点击查看更多</a>
</div>
</div>
<div id="main-right">
<div class="news">
<div class="newlist">近期文章</div>
<ul>
<li><a href="#">文章的标题文章的标题</a></li>
<li><a href="#">文章的标题文章的标题</a></li>
<li><a href="#">文章的标题文章的标题文章的标题文</a></li>
<li><a href="#">文章的标题文章的标题</a></li>
<li><a href="#">文章的标题文章的标题文章的标题文章的标题</a></li>
</ul>
</div>
<div class="news">
<div class="newlist">文章归档</div>
<ul>
<li><a href="#">2022-12-6</a></li>
<li><a href="#">2022-12-6</a></li>
<li><a href="#">2022-12-6</a></li>
<li><a href="#">2022-12-6</a></li>
<li><a href="#">2022-12-6</a></li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="footer">
<div class="footer-info">
<div class="link">
<li><a href="#">许老师博客</a></li>
<li><a href="#">许老师博客</a></li>
<li><a href="#">许老师博客</a></li>
<li><a href="#">许老师博客</a></li>
<li><a href="#">许老师博客</a></li>
</div>
<div class="copyright">
<p>Copyright &copy; 2022 英格科技 | <a href="#">苏ICP备20010123号-1</a></p>
</div>
</div>
</div>
</body>
</html>
```
```css
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #f5f5f5;
line-height: 1.8;
font-size: 14px;
color: #333;
}
##header {
background: #ffffff;
height: 70px;
box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
}
.nav {
list-style: none;
}
.nav li {
float: left;
margin-left: 15px;
padding-top: 20px;
}
a {
text-decoration: none;
color: #333333;
font-size: 16px;
}
a:hover {
color: #337ab7;
}
.logo {
padding-top: 10px;
float: left;
margin-right: 50px;
}
.head {
width: 1280px;
margin: 0px auto;
}
.f1 {
float: right;
padding-top: 20px;
}
.f1 input[type="text"] {
height: 20px;
border-radius: 3px;
}
.f1 input[type="submit"] {
width: 50px;
height: 30px;
}
##main {
width: 1280px;
margin: 0px auto;
margin-top: 15px;
}
##main-left {
background: #ffffff;
width: 900px;
box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
float: left;
}
##a1 {
font-size: 16px;
padding: 10px 0px 10px 0px;
margin-left: 10px;
border-bottom: 2px solid #337ab7;
width: 70px;
}
##a1 a {
color: #337ab7;
}
.articles {
border-top: 1px solid #efefef;
padding-top: 15px;
height: 200px;
background: #ffffff;
}
.articles:hover {
filter: brightness(95%);
}
.items-img img {
width: 250px;
}
.items-img,
.items-list {
float: left;
position: relative;
}
.items-list {
width: 600px;
}
.item-title a {
font-size: 20px;
}
.item-title a:hover {
color: #337ab7;
}
.item-content p {
font-size: 16px;
margin-top: 10px;
}
.item-date {
font-size: 8px;
color: #999;
margin-top: 40px;
}
.img-tag {
position: absolute;
left: 20px;
top: 10px;
background: rgba(0, 0, 0, .5);
color: #fff;
padding: 5px 6px;
font-size: 5px;
}
.img-tag:hover {
background: rgb(0, 0, 0);
color: #fff;
}
##main-right {
float: left;
margin-left: 10px;
width: 280px;
}
.newlist {
border-left: 5px solid #337ab7;
padding-left: 6px;
margin-left: 20px;
padding-top: 5px;
font-size: 20px;
line-height: 15px;
margin-bottom: 20px;
}
.news {
margin-bottom: 10px;
background: #ffffff;
box-shadow: 0 0 3px 1px rgb(0 0 0 /10%);
padding-top: 10px;
}
.news ul {
width: 250px;
margin-left: 10px;
border-top: 2px solid #eee;
}
.news ul li {
list-style: square inside url(/asset/img/square.svg);
color: #666;
font-size: 18px;
margin-top: 6px;
}
.news ul li:hover {
color: #337ab7;
}
.more a {
display: block;
border: 2px solid #eee;
text-align: center;
margin: 20px 40px;
line-height: 40px;
}
.more a:hover {
color: #337ab7;
border: 2px solid #9ac5eb;
}
##footer {
background: #2d3237;
color: #5f676f;
padding: 35px 0px;
margin-top: 10px;
}
.clearfix {
clear: both;
}
.footer-info {
width: 1280px;
margin: 0px auto;
}
.link {
list-style: none;
}
.link li {
float: left;
margin-right: 20px;
}
.link li a,
.copyright a, .copyright {
text-decoration: none;
color: #76818c;
}
.link li a:hover, .copyright a:hover {
color: #337ab7;
}
.copyright {
clear: left;
font-size: 16px;
}
```