web实验6

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

Broly>

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

阅读量74

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/brolyLoveEng/article/details/130314970

版权

本文主要探讨了Web实验的第六部分，重点集中在CSS3的使用上。通过实验，展示了CSS3的一些精彩效果。

摘要由CSDN通过智能技术生成

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
	<!DOCTYPE html>
<html>
<head>
	<title>在线词典</title>
	<style>
		body {
   
			background-image: url("background.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		.container {
   
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			padding: 20px;
			box-sizing: border-box;
			text-align: center;
		}

		h1 {
   
			font-size: 48px;
			margin-top: 0;
			margin-bottom: 20px;
			color: #fff;
			text-shadow: 2px 2px 4px #000;
			font-family: 'Comic Sans MS', cursive, sans-serif;
		}

		form {
   
			display: flex;
			align-items: center;
			margin-bottom: 20px;
		}

		input[type="text"] {
   
			padding: 10px;
			border-radius: 20px;
			border: none;
			box-shadow: 2px 2px 4px #000;
			font-size: 24px;
			flex-grow: 1;
			margin-right: 20px;
			margin-top: 20px;
			margin-bottom: 30px;
			width: 60%;
			background-color: rgba(255, 255, 255, 0.8);
		}

		input[id="search"] {
   
			background-color: #0080ff;
			color: #fff;
			border: none;
			border-radius: 50%;
			font-size: 24px;
			padding: 15px;
			box-shadow: 2px 2px 4px #000;
			cursor: pointer;
			transition: all 0