一个简简单单的许愿墙

王殿堂~

已于 2022-10-25 11:11:06 修改

阅读量447

点赞数 1

文章标签： css 前端 html

于 2022-10-25 08:49:34 首次发布

本文链接：https://blog.csdn.net/qw_aszx_/article/details/127506237

版权

学号后四位：（必填）0219
邀请人ID：（非必填）

知识点

对整体布局的考察，边框线的设置，边距的调整，边框长宽高的调整。还有相对位置的设置，边框线圆弧的处理。还有字体的设置。

项目名称及描述

一个类似于许愿墙的项目，对body里边的三个边框线进行设置调整，形成一个合理的布局。

项目代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			html {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			body {
				background: linear-gradient(to bottom, #7ec7a2 0%, #3794c0 100%);
			}
			
			.container {
				margin: 20px auto;
				padding: 50px 0;
				width: 1000px;
				overflow: hidden;
			}
			
			.container p {
				height: 85px;
				margin: 30px 10px;
				overflow: hidden;
				word-wrap: break-word;
				line-height: 1.6;
			}
			
			.container span {
				text-decoration: none;
				color: white;
				position: relative;
				left: 150px;
				font-size: 14px;
			}
			
			.item1 {
				background: #E3E197;
				width: 200px;
				height: 200px;
				line-height: 30px;
				box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
				float: left;  /*左浮动不换行*/
				margin-right: 20px;
				border-bottom-left-radius: 20px 500px;  /*定义左下角的半径，就是有弧度*/
				border-bottom-right-radius: 500px 30px;
				border-top-right-radius: 5px 100px
			}
			.item2 {
				background: #F8B3D0;
				width: 200px;
				height: 200px;
				line-height: 30px;
				box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
				float: left;  /*左浮动不换行*/
				margin: 0 120px;
				border-bottom-left-radius: 20px 500px;  /*定义左下角的半径，就是有弧度*/
				border-bottom-right-radius: 500px 30px;
				border-top-right-radius: 5px 100px
			}
			.item3 {
				background: #BBE1F1;
				width: 200px;
				height: 200px;
				line-height: 30px;
				box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
				float: left;  /*左浮动不换行*/
				margin-left: 20px;
				border-bottom-left-radius: 20px 500px;  /*定义左下角的半径，就是有弧度*/
				border-bottom-right-radius: 500px 30px;
				border-top-right-radius: 5px 100px
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="item1" style="background:#E3E197">
				<p>开学</p>
				<span>关闭</span>
			</div>
			<div class="item2" style="background: #F8B3D0;">
				<p>赶紧开学</p>
				<span>关闭</span>
			</div>
			<div class="item3" style="background: #BBE1F1;">
				<p>我们市这里有疫情，难搞</p>
				<span>关闭</span>
			</div>
		</div>

	</body>

</html>

项目完成思路

设置一个大边框也就是父边框，然后在这里边设置三个边框也就是子边框。并在css中进行布局调整，最主要的就是在css中进行调整。

项目实现过程中遇到的问题及解决方案

就是在css中对边框弧度的设置根本不会，就去网上查询，或者是问老师；还有就是三个边框之间的间距调整多次调整的布局不标准，在问过同学后对数据进行调整才完成的

笔记整理

border-bottom-left-radius: 20px 500px; /*定义左下角的半径，就是有弧度*/

float: left; /*左浮动不换行*/

box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);对于阴影的设置。

position: relative;相对的定位。

提醒：在发布作品前请把不用的内容删掉