花博客静态页面

最新推荐文章于 2024-10-09 20:00:56 发布

学前端的阿杨

最新推荐文章于 2024-10-09 20:00:56 发布

阅读量176

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/youfatherme/article/details/140513420

版权

项目结构如下：

common.css代码如下：

html,
body,
#app {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #f0f0f0;
}

* {
	padding: 0;
	margin: 0;
}

input,
textarea,
button,
a {
	outline: 0;
}

#app {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 清除li默认黑色圆圈符号 */
li {
	list-style: none;
}

/*------------------------------ 初始化结束end----------------------------- */
.w_940 {
	width: 940px;
}

.ft-se12 {
	font-size: 12px;
}

.ft_se13 {
	font-size: 13px;
}

.ft-se14 {
	font-size: 14px;
}

.ft-se15 {
	font-size: 15px;
}

.ft-se16 {
	font-size: 16px;
}

.ft-se18 {
	font-size: 18px;
}

.ft-se20 {
	font-size: 20px;
}

.ft-se24 {
	font-size: 24px;
}

.ft-se28 {
	font-size: 28px;
}

.ft-se29 {
	font-size: 29px;
}

.white {
	color: white;
}

/* --------------------------弹性样式------------------------- */
/* 横向排列 */
.row {
	display: flex;
}

.row-x-ctr {
	display: flex;
	justify-content: center;
}

.row-y-ctr {
	display: flex;
	align-items: center;
}

/* 竖向排列 */
.col {
	display: flex;
	flex-direction: column;
}

/*竖向水平居中 */
.col-x-ctr {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 竖向垂直居中 */
.col-y-ctr {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 横向-垂直水平居中 */
.row-xy-ctr {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 竖向-垂直水平居中 */
.col-xy-ctr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.col-xy-start {
	display: flex;
	flex-direction: column;
	/* 横向向左对齐 */
	align-items: flex-start;
	/* 竖向向顶部对齐 */
	justify-content: flex-start;
}


/* 粗体 */
.bd {
	font-weight: bold;
}

如果把所有html结构都写到App.vue里面，会很冗余，看得眼花缭乱，很难维护。

把整体直接拆分为header、nav、bannner、main、footer，并封装成组件，就方便管理。

bannerBox.vue

<script setup>
</script>
<template>
	<!-- banner部分 -->
	<div class="banner_container ">
		<div class="banner_title_box ">
			<p><span>Do you love flowers as</span></p>
			<p>much as we do?</p>
		</div>
		<div class="banner_paragraph">
			<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit,</span></p>
			<p>sed do eiusmod tempor incididunt ut labore et dolore</p>
			<p>magna aliaqua.Ut enim ad minim veniam,quis nostrud</p>
			<p>exercitation ullamco laboris nisi ut.</p>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.banner_container {
		width: 940px;
		margin-top: 22px;
		background-image: url(/src/assets/logo.png);
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 10px;

		.banner_title_box {
			padding-left: 32.64px;

			p {
				font-size: 28px;
				color: white;
			}

			p:nth-child(1) {
				margin-top: 50.5px;
				margin-bottom: 13.5px;
			}

			p:nth-child(2) {
				margin-bottom: 33.5px;
			}
		}

		.banner_paragraph {
			color: #cee446;
			padding-left: 32.64px;
			font-size: 13px;

			p:nth-child(-n+3) {
				margin-bottom: 7.77px;
			}

			p:nth-child(4) {
				margin-bottom: 43.77px;
			}
		}
	}
</style>

footerBox.vue

<script setup>
</script>
<template>
	<!-- banner部分 -->
	<div class="banner_container ">
		<div class="banner_title_box ">
			<p><span>Do you love flowers as</span></p>
			<p>much as we do?</p>
		</div>
		<div class="banner_paragraph">
			<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit,</span></p>
			<p>sed do eiusmod tempor incididunt ut labore et dolore</p>
			<p>magna aliaqua.Ut enim ad minim veniam,quis nostrud</p>
			<p>exercitation ullamco laboris nisi ut.</p>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.banner_container {
		width: 940px;
		margin-top: 22px;
		background-image: url(/src/assets/logo.png);
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 10px;

		.banner_title_box {
			padding-left: 32.64px;

			p {
				font-size: 28px;
				color: white;
			}

			p:nth-child(1) {
				margin-top: 50.5px;
				margin-bottom: 13.5px;
			}

			p:nth-child(2) {
				margin-bottom: 33.5px;
			}
		}

		.banner_paragraph {
			color: #cee446;
			padding-left: 32.64px;
			font-size: 13px;

			p:nth-child(-n+3) {
				margin-bottom: 7.77px;
			}

			p:nth-child(4) {
				margin-bottom: 43.77px;
			}
		}
	}
</style>

logoTextHeader.vue


<template>
	<!-- 外层logo盒子940宽度 -->
	<header>
		<h1><span>The Flower Blog</span></h1>
	</header>
</template>

<style lang="scss" scoped>
	header {
		width: 100%;
		display: flex;
		justify-content: center;

		h1 {
			width: 940px;
			padding-top: 50px;
			padding-bottom: 24px;
			font-size: 28px;
		}
	}
</style>

mainArticleBox.vue

<template>
	<!-- 文章容器 -->
	<div class="article_container row">
		<!-- 左侧文章 -->
		<div class="left_article_box">
			<!-- 开头段落 -->
			<article class="start_article">
				<p>Lorem ipsum dolor sit amet. consectetur adipiscing</p>
				<p>elit. Proin euismod tellus eu orci imperdiet nec</p>
				<p>rutrum lacus blandit. Cras enim nibh. sodales</p>
				<p>ultricies elementum vel.fermentum id tellus. Proin</p>
				<p>metus odio. ulthcies eu pharetra dictum, laoreet id</p>
				<p>odio.Curabitur in odio augue. Morbi congue auctor</p>
				<p>interdum.Phasellus sit amet metus justo.Phasellus</p>
				<p>vitae tellus orci. at elementum ipsum. In in quam</p>
				<p>eget diam adipiscing condimentum. Maecenas</p>
				<p>gravida diam vitae nisi convallis vulputate quis sit</p>
				<p>amet nibh.Nullam ut velit tortor Curabitur ut elit id</p>
				<p>nisi volutpat consectetur ac ac lorem. Quisque non</p>
				<p>elit et elit lacinia lobortis nec a velit. Sed ac nisi</p>
				<p>sed enim consequat porttitor.</p>
			</article>
			<!-- 末尾图文 -->
			<article class="end_article">
				<img src="/src/assets/flower.png" />
				<p>Pellentesque ut sapien arcu. egestas mollis massa.</p>
				<p>Fusee lectus leo. fringilla at aliquet sit amet.</p>
				<p>volutpat non erat. Aenean molestie nibh vitae turpis</p>
				<p>venenatis vel accumsan nunc tincidunt.</p>
			</article>
		</div>
		<!-- 右侧文章 -->
		<div class="right_article_box">
			<!-- 顶部 -->
			<article class="right_start_box">
				<p>Suspendisse id purus vel felis auctor mattis non ac</p>
				<p>erat.Pellentesque sodales venenatis condimentum.</p>
				<p>Aliquam sit amet nibh nisi, ut pulvinar est.Sed</p>
				<p>ullamcorper nisi vel tortor volutpat eleifend.</p>
				<p>Vestibulum iaculis ullamcorper diam consectetur</p>
				<p>sagittis. Quisque vitae mauhs ut elit semper</p>
				<p>condimentum vahus nec nisi. Nulla tempus porttitor</p>
				<p>dolor ac eleifend. Proin vitae purus lectus. a</p>
				<p>hendreht ipsum.Aliquam mattis lacinia hsus in</p>
				<p>blandit.</p>
			</article>
			<!-- 底部 -->
			<article class="right_end_box">
				<p>Vivamus vitae nulla dolor Suspendisse eu lacinia</p>
				<p>justo. Vestibulum a felis ante, non aliquam leo.</p>
				<p>Aliquam eleifend. est viverra semper luctus. metus</p>
				<p>purus commodo elit. a elementum nisi lectus vel</p>
				<p>magna. Praesent faucibus leo sit amet arcu</p>
				<p>vehicula sed facilisis eros aliquet. Etiam sodales.</p>
				<p>enim sit amet mollis vestibulum.ipsum sapien</p>
				<p>accumsan lectus. eget ultricies arcu velit ut diam.</p>
				<p>Aenean femmentum luctus nulla,eu malesuada urna</p>
				<p>consequat in.Pellentesque habitant morbi thstique</p>
				<p>senectus et netus et malesuada fames ac turpis</p>
				<p>egestas.Pellentesque massa lacus. sodales id</p>
				<p>facilisis ac. lobortis sed arcu. Donee hendreht</p>
				<p>fringilla ligula. ac rutrum nulla bibendum id. Cras</p>
				<p>sapien ligula. tincidunt eget euismod nec. ultricies</p>
				<p>eu augue. Nulla vitae velit sollicitudin magna mattis</p>
				<p>eleifend. Nam enim justo. vulputate vitae pretium</p>
				<p>ac. rutrum at turpis.Aenean id magna neque. Sed</p>
				<p>rhnoncus aliquet viverra.</p>
			</article>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.article_container {
		width: 641px;
		border-bottom: 1px solid #d8d8d8;

		.left_article_box {
			width: 321px;
			font-size: 12px;

			.start_article {
				p:nth-child(-n+13) {
					margin-bottom: 7.5px;
				}
			}

			.end_article {
				padding-bottom: 31.5px;

				img {
					width: 286px;
					height: 234px;
					box-shadow: 5px 5px 6px #8f8f8f;
					margin-bottom: 32.5px;
					margin-top: 54.5px;
				}

				p:nth-child(-n+4) {
					margin-bottom: 7.5px;
				}
			}
		}

		.right_article_box {
			width: 320px;
			font-size: 12px;

			.right_start_box {
				p:nth-child(-n+9) {
					margin-bottom: 7.5px;
				}

				p:nth-child(10) {
					margin-bottom: 34.5px;
				}

			}

			.right_end_box {
				p:nth-child(-n+18) {
					margin-bottom: 7.5px;
				}
			}
		}
	}
</style>

mainBottomBox.vue

<template>
	<div class="end_container">
		<!-- 左侧部分 -->
		<h1><span>Post a comment</span></h1>
		<h6 class="name_input">
			<span>Name</span>
			<input type="text" />
		</h6>
		<h6 class="email_input">
			<span>E-mail</span>
			<input type="text" />
		</h6>
		<h6 class="website_input">
			<span>Website</span>
			<input type="text" />
		</h6>
		<div class="comment_textarea row">
			<h6><span>Comment</span></h6>
			<textarea></textarea>
		</div>
		<button>Post comment</button>
	</div>
</template>
<style lang="scss" scoped>
	.end_container {
		h1 {
			font-size: 20px;
			padding-top: 29.5px;
			padding-bottom: 10.5px;
		}

		.name_input {
			font-size: 14px;
			padding-left: 123.06px;

			span {
				margin-right: 20px;
			}

			input {
				width: 306.86px;
				height: 26.5px;
				margin-bottom: 17.5px;
			}
		}

		.email_input {
			@extend .name_input;
			padding-left: 119.07px;

		}

		.website_input {
			@extend .name_input;
			padding-left: 108.07px;

			input {
				margin-bottom: 17.5px;
			}
		}

		.comment_textarea {
			padding-left: 97.07px;

			h6 {
				margin-right: 20px;
				font-size: 14px;
			}

			textarea {
				width: 304.86px;
				height: 97.5px;
				margin-bottom: 24.5px;
			}
		}

		button {
			margin-left: 178.14px;
			margin-bottom: 18.5px;
		}

	}
</style>

mainBox.vue(因为代码量太高了，就把左侧文章容器和右侧文章容器给拆分为两个组件了)

<template>
	<!-- 中间文章部分940 -->
	<main class="row">
		<mainLeftBox />
		<mainRightBox />
	</main>
</template>
<style lang="scss" scoped>
	main {
		width: 940px;
	}
</style>

mainLeftBox.vue

<template>
  <!-- 左侧文章容器 -->
  <div class="main_left_container">
    <!-- 标题 -->
    <h1><span>This is the title of a blog post</span></h1>
    <!-- 副标题 -->
    <p class="subtitle_box">
      <i
        >Posted on June 29th 2009 by <span class="gry-btm-brdr-2">Mads Kiaer </span>-
        <span class="gry-btm-brdr-2">3 comments</span>
      </i>
    </p>
    <!-- maintop文章组件 -->
    <mainArticleBox />
    <!-- main中间Comments组件 -->
    <mainMiddleBox />
    <!-- post a comment组件 -->
    <mainBottomBox />
  </div>
</template>

<style lang="scss" scoped>
.main_left_container {
  width: 641px;
  border-right: 1px solid #cbcbcb;

  // This is the title of a blog post
  h1 {
    padding-top: 33.45px;
    padding-bottom: 28.45px;
    font-size: 29px;
  }

  .subtitle_box {
    color: #858a80;
    padding-bottom: 24.84px;
    font-size: 15px;

    .gry-btm-brdr-2 {
      border-bottom: 2px solid #cccccc;
    }
  }
}
</style>

mainMiddleBox.vue

<template>
	<!-- Comment容器 -->
	<div class="middle_container row">
		<!-- 左侧盒子 -->
		<div class="middle_left_box">
			<h1 class="middle_title"><span>Comments</span></h1>
			<h1 class="underline_title "><u>George Washington</u></h1>
			<p class="middle_subtitle"><span>on June 29th 2009 at 23:35</span></p>
			<h1 class="underline_title "><u>George Washington</u></h1>
			<p class="middle_subtitle">on June 29th 2009 at 23:35</p>
			<h1 class="underline_title "><u>George Washington</u></h1>
			<p class="middle_subtitle_end">on June 29th 2009 at 23:35</p>
		</div>
		<!-- 右侧盒子 -->
		<div class="middle_right_box">
			<p><span>Lorem ipsum dolor sit amet. consectetur adlpisicing elit.</span></p>
			<p>on June 29th 2009 at 23:35 sed do eiusmod tempor</p>
			<p> magna aliqua.Ut enim ad minim veniam. quis nostrud</p>
			<p>exercitation ullamco laboris nisi ut.</p>
			<p>Lorem ipsum dolor sit amet. consectetur adlpisicing elit.</p>
			<p>on June 29th 2009 at 23:35 sed do eiusmod tempor</p>
			<p> magna aliqua.Ut enim ad minim veniam. quis nostrud</p>
			<p>exercitation ullamco laboris nisi ut.</p>
			<p>Lorem ipsum dolor sit amet. consectetur adlpisicing elit.</p>
			<p>on June 29th 2009 at 23:35 sed do eiusmod tempor</p>
			<p> magna aliqua.Ut enim ad minim veniam. quis nostrud</p>
			<p>exercitation ullamco laboris nisi ut.</p>
		</div>
	</div>
</template>


<style lang="scss" scoped>
	.middle_container {
		width: 641px;
		border-bottom: 1px solid #d8d8d8;

		.middle_left_box {
			width: 264px;

			// Comments标题
			.middle_title {
				font-size: 19px;
				margin-top: 30.11px;
				margin-bottom: 39.11px;
			}

			// George Washington
			.underline_title {
				font-size: 15px;
				margin-left: 12.71px;
				margin-bottom: 4.72px;
			}

			// on June 29th 2009 at 23:35
			.middle_subtitle {
				margin-left: 9.88px;
				margin-bottom: 94.4px;
				font-size: 14px;
			}

			//最后一个On June 29TH 2009 23:35
			.middle_subtitle_end {
				margin-left: 9.88px;
				margin-bottom: 92.4px;
				font-size: 14px;
			}
		}

		.middle_right_box {
			font-size: 12px;
			padding-top: 92.1px;

			p:nth-child(-n+3) {
				margin-bottom: 7.1px;
			}

			p:nth-child(4) {
				margin-bottom: 52.1px;
			}

			p:nth-child(n+5):nth-child(-n+7) {
				margin-bottom: 7.1px;
			}

			p:nth-child(8) {
				margin-bottom: 52.1px;
			}

			p:nth-child(n+9):nth-child(-n+11) {
				margin-bottom: 7.1px;
			}

			p:nth-child(12) {
				margin-bottom: 51.1px;
			}
		}
	}
</style>

mainRightBox.vue

<template>
	<!-- 右侧阴影容器 -->
	<div class="shadow_container">
		<!-- 上部分外层盒子 -->
		<div class="shadow_top_box ">
			<h1><span>Categories</span></h1>
			<p><span>Lorem ipsum dolor</span></p>
			<p>Sit amet consectetur</p>
			<p>Adipisicing elit sed</p>
			<p>Do eiusmod tempor</p>
			<p>Incididunt ut labore</p>
		</div>
		<!-- 下部分盒子 -->
		<div class="shadow_btm_box top_rds10">
			<h1 class="ft-se18">Archives</h1>
			<p>December 2008</p>
			<p>January 2009</p>
			<p>February 2009</p>
			<p>March 2009</p>
			<p>April 2009</p>
			<p>May 2009</p>
			<p>June2009</p>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.shadow_container {
		background: linear-gradient(to left, rgba(255, 255, 255, 0), #eaeaea);
		width: 298px;
		padding-left: 20px;
		padding-top: 22px;

		.shadow_top_box {
			background: linear-gradient(to bottom, #dedede, rgba(255, 255, 255, 0) 80%);
			border-radius: 10px 10px 0 0;
			width: 278px;

			h1 {
				font-size: 20px;
				padding-left: 17.86px;
				padding-top: 20.67px;
				padding-bottom: 12.67px;
			}

			p {
				font-size: 13px;
				margin-left: 39.42px;
			}

			p:nth-child(-n+5) {
				margin-bottom: 8.06px;
			}

			p:nth-child(6) {
				margin-bottom: 36.06px;
			}
		}

		.shadow_btm_box {
			@extend .shadow_top_box;

			p:nth-child(-n+7) {
				margin-bottom: 8.06px;
			}

		}
	}
</style>

nav.vue

<template>
	<!-- 导航栏部分 -->
	<nav>
		<ul class="row ">
			<li><span>Blog</span></li>
			<li>About</li>
			<li>Archives</li>
			<li>Contact</li>
			<li>
				<img src="/src/assets/wifi.png" />
				<span>Sybscnbe via RSS</span>
			</li>
		</ul>
	</nav>
</template>
<style lang="scss" scoped>
	nav {
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: #2c2c2c;

		ul {
			width: 940px;
			color: #858a80;
			font-size: 14px;


			li {
				height: 44px;
				display: flex;
				align-items: center;

				&:nth-child(1) {
					margin-right: 126.32px;
					margin-left: 53.32px;
				}

				&:nth-child(2) {
					margin-right: 111.32px;
				}

				&:nth-child(3) {
					margin-right: 109.36px;
				}

				&:nth-child(4) {
					margin-right: 86.36px;
				}

				&:nth-child(5) img {
					margin-right: 12px;
				}
			}
		}
	}
</style>

这是一个粗略版，大家可以提出可优化的建议