初入前端HTML+CSS+JS个人博客案例

xiaobuzq

已于 2023-01-12 23:21:27 修改

阅读量832

点赞数 2

文章标签：前端 javascript html

于 2023-01-12 23:17:33 首次发布

本文链接：https://blog.csdn.net/xiaobuzq/article/details/128667696

版权

在b站找到一个不错的前端学习视频：https://www.bilibili.com/video/BV19A41177Vy/

然后记录一下我跟着视频敲代码的成果。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://use.fontawesome.com/3d49329b17.js"></script>
		<title></title>
		<link rel="stylesheet" href="./main.css"/>
	</head>
	<body>
		<header>
			<div class="logo-nav">
				<p>AMBER</p>
				<nav>
					<a class="active">首页</a>
					<a>文章</a>
					<a>关于</a>
					<a>联系</a>
				</nav>
			</div>
			<div class="header-title">
				<h1>AMBER</h1>
				<p>欢迎来到Amber的博客</p>
				<div></div>
			</div>
		</header>
		<main>
			<section id="home-blog">
				<div class="home-blog-title">
					<p>最新博客</p>
					<div></div>
				</div>
				
				<div class="home-blog-content">
					<div class="home-blog-card">
							<img class="home-blog-img" src="https://images.unsplash.com/photo-1533038590840-1cde6e668a91?xlib=rb-1.2.1&auto=fromat&fit=crop&w=934&q=80"/>
							<div class="home-blog-card-title">
								<div></div>
								<p>这是我的第一篇博客</p>
							</div>
					</div>					
				</div>				
			</section>
			
			<section id="home-about">
				<img src="https://images.unsplash.com/photo-1581573429747-42f947a4e178?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80"/>
				<div class="home-about-content">
					<div>
						<p>我的简介</p>
						<div></div>
					</div>
					<p>
						这是关于我的一些简介，如果你看到，说明你厉害！这是关于我的一些简介，如果你看到，说明你厉害！
						这是关于我的一些简介，如果你看到，说明你厉害！这是关于我的一些简介，如果你看到，说明你厉害！
						这是关于我的一些简介，如果你看到，说明你厉害！
					</p>
				</div>
			</section>
			
			<section id="home-contact">
				<p class="home-contact-title">联系方式</p>
				<p class="home-contact-sentence">如果你有任何需求，留下你的邮箱，我会尽快联系你</p>
				<form>
					<input id="home-contact-email" type="text" placeholder="youremail@email.com"/>
					<button id="home-contact-submit">提 交</button>
				</form>
			</section>
			
		</main>
		
		<footer>
			<div>
				<i class="fa fa-qq" aria-hidden="true">
					<p>123456789</p>
				</i>
				<i class="fa fa-weixin" aria-hidden="true">
					<p>wechat</p>
				</i>
				<a href="https://www.baidu.com/" target="_blank">
					<i class="fa fa-weibo" aria-hidden="true"></i>
				</a>

			</div>
			<p>&copy Amber 2022</p>
		</footer>
		<script src="./content/blog.js"></script>
		<script src="./index.js"></script>
	</body>
</html>

main.css

*{
	margin: 0;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
header{
	background-image: url("https://s1.ax1x.com/2023/01/12/pSuxltI.jpg");
	background-size: cover;
	background-position: center;
	filter: grayscale(0.3);
	height: 500px;
	padding: 0 1rem;
}

.logo-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
}

nav a{
	padding: 5px 1rem;
	cursor: pointer;
}

nav a:hover{
	font-weight: 700;
}

nav a.active{
	padding: 5px calc(1rem - 2px);
	border: 2px solid rgb(71, 122, 58);
	font-weight: 700;
}

.header-title{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: calc(100% - 51px);
}

.header-title h1{
	font-size: 4rem;
}

.header-title p{
	margin: 1rem 0;
	font-size: 1.2rem;
}

.header-title div{
	width: 50px;
	height: 3px;
	background-color: rgb(96, 134, 87);
}

#home-blog{
	background-color: #f5f7f4;
	padding: 90px 0;
	
}

.home-blog-title{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100px;
	margin-top: 90px;
	color: rgb(96, 134, 87);
	font-size: 1.2rem;
	letter-spacing: 3px;
	margin-bottom: 30px;
}

.home-blog-title div{
	width: 40px;
	height: 3px;
	background-color: rgb(96, 134, 87);
	margin-top: 10px;
}

.home-blog-content{
	width: 90%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 0 auto;
	grid-column-gap: 30px;
}

.home-blog-card{
	box-shadow: 0px 0px 21px rgba(153, 153, 153, 0.267);
	background-color: #ffffff;
}

.home-blog-card:hover{
	box-shadow: 0px 0px 50px rgba(139, 139, 139, 0.267);
	cursor: pointer;
}

.home-blog-img{
	width: 100%;
	height: 250px;
	object-fit: cover;
}

.home-blog-card-title{
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	letter-spacing: 3px;
}

.home-blog-card-title div{
	width: 60px;
	height: 1px;
	background-color: rgb(96, 134, 87);
	margin-bottom: 10px;
}

#home-about{
	display: flex;
	height: 500px;
}

#home-about img{
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.home-about-content{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.home-about-content div p{
	letter-spacing: 3px;
	font-size: 1.2rem;
	color: rgb(63, 95, 56);
	margin-bottom: 4px;
}

.home-about-content div div{
	background-color: rgb(63, 95, 56);
	width: 40px;
	height: 3px;
	margin: 0 auto;
	margin-bottom: 25px;
}

.home-about-content > p {
	width: 60%;
	line-height: 2rem;
	letter-spacing: 2px;
}

#home-contact{
	height: 360px;
	background-color: #e4e8e2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.home-contact-title{
	font-size: 1.2rem;
	letter-spacing: 3px;
	color: rgb(63, 95, 56);
	margin-bottom: 10px;
}

.home-contact-sentence{
	letter-spacing: 3px;
	color: rgb(96, 134, 87);
	font-size: 14px;
}

form{
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}

#home-contact-email{
	width: 500px;
	padding: 5px 10px;
	font-size: 16px;
	border: 0;
	background-color: #f5f7f4;
	outline: none;
	transition: background-color 0.5s linear;
}

#home-contact-email::placeholder{
	opacity: 0.4;
}

#home-contact-email:focus{
	background-color: #ffffff;
}

#home-contact-submit{
	width: 150px;
	padding: 10px;
	border: 1px solid rgb(63, 95, 56);
	background-color: #e4e8e2;
	color: rgb(63, 95, 56);
	margin: 0 auto;
	margin-top: 20px;
	outline: none;
	cursor: pointer;
	transition: background-color 0.3s ease-out;
}

#home-contact-submit:hover{
	background-color: rgb(63, 95, 56);
	color: #e4e8e2;
}

footer{
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
	color: #858585;
}

footer i{
	margin-right: 20px;
}

footer div{
	position: relative;
}

footer i p{
	position: absolute;
	bottom: 25px;
	display: none;
}

footer i:hover p{
	display: block;
}

.fa-weibo{
	color: #858585;
}

content/blog.js

 const blog = [
	{
		id:1,
		title:"这是我的第一篇博客",
		href:"https://www.baidu.com/",
		image:"https://images.unsplash.com/photo-1533038590840-1cde6e668a91?xlib=rb-1.2.1&auto=fromat&fit=crop&w=934&q=80"
	},
	{
		id:2,
		title:"这是我的第二篇博客",
		href:"https://image.baidu.com/",
		image:"https://images.unsplash.com/photo-1533038590840-1cde6e668a91?xlib=rb-1.2.1&auto=fromat&fit=crop&w=934&q=80"
	},
	{
		id:3,
		title:"这是我的第三篇博客",
		href:"http://news.baidu.com/",
		image:"https://images.unsplash.com/photo-1533038590840-1cde6e668a91?xlib=rb-1.2.1&auto=fromat&fit=crop&w=934&q=80"
	},
	{
		id:4,
		title:"这是我的第四篇博客",
		image:"https://images.unsplash.com/photo-1533038590840-1cde6e668a91?xlib=rb-1.2.1&auto=fromat&fit=crop&w=934&q=80"
	}
 ]

index.js


document.addEventListener('DOMContentLoaded',init)

function init(){
	addListenders()
	createBlogCard()
}

function addListenders(){
	document.querySelectorAll('nav a').forEach(item => {
		item.addEventListener('click',onNavication)
	})
	document.getElementById('home-contact-submit').addEventListener('click',onSubmit)
}

function onNavication(ev){
	document.querySelectorAll('nav a').forEach(item => {
		item.classList.remove('active')
	})
	ev.target.classList.add('active')
}

function createBlogCard(){
	let contentDiv = document.querySelector('.home-blog-content')
	contentDiv.innerHTML = ""
	
	for(let i = 0; i < 3; i++){
		let cardContent = blog[i]
		
		let card = document.createElement('div')
		card.className = "home-blog-card"
		
		card.addEventListener('click',() => goToWebsite(cardContent.href))
		
		let img = document.createElement('img')
		img.className = "home-blog-img"
		img.src = cardContent.image
		
		let titleDiv = document.createElement('div')
		titleDiv.className = "home-blog-card-title"
		
		let line = document.createElement('div')		
		let title = document.createElement('p')
		title.textContent = cardContent.title
		
		titleDiv.appendChild(line)
		titleDiv.appendChild(title)
		
		card.appendChild(img)
		card.appendChild(titleDiv)
		
		contentDiv.appendChild(card)
		
	}
}

function goToWebsite(href){
	window.open(href)
}

function onSubmit(ev){
	ev.preventDefault()
	
	let input = document.getElementById('home-contact-email')
	let value = input.value
	
	if(!value){
		alert('请输入联系方式！')
		input.focus()
	}else{
		// console.log('email:',value)
		//数据处理
	}
	

}