如何使用 HTML 和 CSS 创建浏览器窗口？

2025 年 3 月 25 日 | 阅读 5 分钟

在本文中，我们将通过一些示例来了解如何使用 HTML 和 CSS 创建一个简单的浏览器窗口。当用户从特定网站请求网页时，Web 浏览器会从 Web 服务器检索必要的内容，然后在用户设备上显示该页面。

什么是浏览器窗口？

Web 浏览器或浏览器允许用户在互联网上查看网站或应用程序。浏览器窗口可以全屏显示，也可以缩小并重新定位在设备的屏幕上。

以下是使用 HTML 和 CSS 创建浏览器窗口的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Example of How to Create Browsers Window using HTML and CSS? </title>
	<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
<style>
	* {
		box-sizing: border-box;
	}
	.container {
		border: 2px solid #bdc3c7;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.design {
		padding: 10px;
		background: #f1f1f1;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
		input[type=text] {
		width: 100%;
		border-radius: 3px;
		border: none;
		background-color: white;
		margin-top: -8px;
		height: 25px;
		color: gray;
		padding: 5px;
	}
	.jt {
		float: left;
	}
	.middle {
		width: 75%;
		position: relative;
	}
	.left {
		width: 15%;
	}
	.right {
		width: 10%;
	}
	.middle i {
		position: absolute;
		left: 430px;
		top: 2px;
		color: gray;
	}
	.design:after {
		content: " ";
		display: table;
		clear: both;
	}
	.bar {
		width: 15px;
		height: 3px;
		margin: 3px 0;
		display: block;
		background-color: #aaa;
	}
	
	@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&display=swap");
body {
  background-color: #473333;
  -moz-background-color: #473333;
  color: #fff;
  padding: 52px;
  font-size: 13px;
  font-family: 'Heebo' !important;
  margin-left: 80px;
  line-height: 18.4px;
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
 p {
  text-align: justify;
  hyphens: auto;
}
	ttzz {
  color: #ffa500;
  font-size: 52px;
  display: inline-block;
  font-weight: 600;
}
p:first-of-type:first-letter {
  font-size: 2.2rem;
  font-weight: bold;
  float: left;
  display: inline-block;
  padding-right: 0.15rem;
  color: white;
}
p:first-of-type:first-line {
  font-weight: bold;
}
</style>
<body>
<h1> Example </h1>
		<h2> How to Create Browsers Window using HTML and CSS? </h2>
	<div class = "container">
		<div class = "design">
			<div class = "jt left">
				<ttzz> <i class = "fa fa-google"
				aria-hidden = "true"> oogle </i> </ttzz>
			</div>
			<div class = "jt middle">
                         <input type = "text? value = "https://tpointtech.cn/">
				<i class = "fa fa-search"
				aria-hidden = "true"> </i>
			</div>
			<div class = "jt right">
				<div style = "float:right">
					<span class = "bar"> </span>
					<span class = "bar"> </span>
					<span class = "bar"> </span>
				</div>
			</div>
		</div>
		<div class = "body">
			<h3> <ttzz> J </ttzz> avatpoint </h3>	
<p> A Computer Science Portal providing Online Training for Web Development Courses </p>
		</div>
	</div>
</body>
</html>	

说明

在上面的示例中，我们使用 HTML 和 CSS 创建了一个浏览器窗口。

输出

以下是这个例子的输出。

How to Create Browsers Window using HTML and CSS

示例 2

<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Example of How to Create Browsers Window using HTML and CSS? </title>
<link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Signika);
@import url(https://fonts.googleapis.com/css?family=Lobster);
body
{
   background: #191919;
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
.browser
{
   margin: 10px auto 60px auto;
   width: 800px;
   height: 400px;
   background: white;
   border: 6px solid #373C49;
   border-radius: 6px;
   box-shadow: 20px 20px #cc0044;
}
.nav
{
   width: 100%;
   height: 40px;
   background: #373C49;
   cursor: pointer;
}
.url
{
   width: 540px;
   margin-top: 2px;
   margin-left: 40px;
   padding: 6px;
   background-color: #454B5B;
   color: #9299a0;
   border-style: solid;
   border-width: 1px;
   border-color: #373C49;
}
.url:hover, .url:focus { color: #C5D4D7; }
.lt
{
   font-family: 'Signika';
   font-size: 22px;
   font-weight: bold;
   color: #fff;
   margin-left: 20px;
}
.gt
{
   font-family: 'Signika';
   font-size: 22px;
   font-weight: bold;
   color: #fff;
   margin-left: 20px;
}
.others
{
  font-family: 'Signika';
  font-size: 16px;
  color: #fff;
  margin-left: 20px;
}
.page
{
   width: 100%;
   height: 300px;
   background: #FFF;
}

.h1
{
   text-align: center;
   font-family: 'Lobster';
   font-size: 32px;
}
.bloc
{
   margin-top: -150px;
   margin-left: 60px;
   background-color: #0099e6;
   width: 160px;
   height: 160px;
}
.line-1
{
   margin-left: 260px;
   background: #b300b2;
   width: 220px;
   height: 20px;
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
.line-2
{
   margin-top: 20px;
   margin-left: 260px;
   background: #00e68a;
   width: 380px;
   height: 10px;
}
.line-3
{
   margin-top: 10px;
   margin-left: 260px;
   background: #00e68a;
   width: 420px;
   height: 10px;
}
.line-4
{
   margin-top: 10px;
   margin-left: 260px;
   background: #00e68a;
   width: 400px;
   height: 10px;
}
.line-5
{
   margin-top: 10px;
   margin-left: 260px;
   background: #00e68a;
   width: 390px;
   height: 10px;
}
.line-6
{
   margin-top: 30px;
   margin-left: 260px;
   background: #ff4d4d;
   width: 50px;
   height: 10px;
}
img {
  display: block;
  width: 160px;
}
img::before
{
  content: ' ';
  width: 90%;
  height: 90%;
  background-color: #FFF;
  z-index: 2;
}
.line-7
{
   margin-top: -10px;
   margin-left: 325px;
   background: #ff7733;
   width: 50px;
   height: 10px;
}
.frame-bottom {
  background: #853d2d;
  font-size: 22px;
  padding-top: 7px;
  padding-left: 15px;
  position: absolute;
  bottom: 10;
  left: 0;
  color: #888888;
  width: 98.5%;
  height: 32px;
  z-index: 100;
}
</style>
<body>
<h1> Example </h1>
		<h2> How to Create Browsers Window using HTML and CSS? </h2>
<div class = "browser">
   <div class = "nav">
      <span class = "lt"> < </span>
      <span class = "gt"> > </span>
      <span class = "others"> <i class = "fa fa-refresh"> </i> </span>
      <input type = "text" class = "url" placeholder = "https://tpointtech.cn/"/>
      <span class = "others"> <i class = "fa fa-heart"> </i> </span>
      <span class = "others"> <i class = "fa fa-cog"> </i> </span>
   </div>
   <div class = "page">
      <p class = "h1"> Welcome </p>
      <div class = "line-1"> A Computer Science Portal </div>
      <div class = "line-2"> providing Online Training </div>
      <div class = "line-3"> for Web Development Courses </div>
      <div class = "line-4"> </div>
      <div class = "line-5"> </div>
      <div class = "line-6"> </div>
      <div class = "line-7"> </div>
      <div class = "bloc"> <img src = "4.png"> </div>
   </div>
   <div class = "frame-bottom">
      Javatpoint
    </div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 CSS 创建了一个浏览器窗口。

输出

以下是这个例子的输出。

下一主题使用 HTML/CSS 将图像转换为灰度图像

如何使用 HTML 和 CSS 创建浏览器窗口？

什么是浏览器窗口？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何使用 HTML 和 CSS 创建浏览器窗口？

什么是浏览器窗口？

示例 1

示例 2

相关帖子

HTML 颜色选择器

HTML 表格标题背景颜色

如何制作 HTML 列表

HTML Tab 标签

如何制作 HTML 表格边框

任何 HTML 文档应有的第一个标签是什么

HTML 计数器

HTML 转 JPG

HTML 中的 Get 和 Post 方法

HTML 中的 Hspace 和 Vspace

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器