HTML+CSS基础——CSS控制器（盒子模型，盒子控制、display、visibility）

发布时间：2023年12月29日

<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			body{
				font-size:80%;
				font-family:"Courier New",Courier,monospace;
				letter-spacing:0.15em;
				background-color:#efefef;}
			#page{
				max-width:940px;
				min-width:720px;
				margin:10px auto 10px auto;
				padding:20px;
				border:4px double #000;
				background-color:#ffffff;}
			#logo{
				width:150px;
				margin:10 px auto 25px auto;}
			ul{
				width:570px;
				padding:15px;
				margin:0px auto 0px auto;
				border-top:2px solid #000;
				border-bottom:1px solid #000;
				text-align:center;}
			li{
				display:inline:
				margin:0px 3px;}
			p{
				text-align:center;
				width:600px;
				margin:20px auto 20px auto;
				font-weight:normal;}
			a{
				color:#00000;
				text-transform:uppercase;
				text-decoration:none;
				padding:6px 18px 5px 18px;}
			a:hover,a.om{
				color:#cc3333;
				background-color:#ffffff;}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="logo">
				<img src="img/1.jpg" alt="The Analog Specialists" width=50px height=50px/>
			</div>
			<ul id="navigation">
				<li><a href="#" class="on">Home</a></li>
				<li><a href="#">For Sale</a></li>
				<li><a href="#">Repairs</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<p>
				<img src="img/2.jpg" alt="A handsome person" width=50px height=50px/>
			</p>
			<p>
				We specialise in the sales and repair of classic keyboards,in particular the Fender Rhodes,Wurliter EP200,and Hohner Clavinet.
			</p>
		</div>
	</body>
</html>

这是一个使用HTML和CSS编写的网页代码。代码中包括网页的结构和样式定义。

<title>?标签定义了网页的标题。
在?<style>?标签内，使用 CSS 样式对网页元素进行了定义，如文字大小、字体、背景颜色等。
<body>?标签内包含了整个网页的内容。
<div>?元素使用 id 属性指定了两个容器元素，id 分别为 “page” 和 “logo”。
<img>?标签用于在网页中插入图片，其中?src?属性指定了图片文件的路径，alt?属性用于指定图片无法加载时的替代文本，width?和?height?属性指定了图片的宽度和高度。
<ul>?标签定义了一个无序列表，其中包含了网页的导航链接。
<li>?标签定义了列表项，用于包裹每一个导航链接。
<a>?标签定义了一个超链接，href?属性指定了链接的目标地址，class?属性用于指定链接的样式类。
<p>?标签定义了段落，用于包裹文字内容。

除了上述结构元素以外，这个网页还使用了下面的CSS样式：

font-size?属性设置了字体大小。
font-family?属性设置了字体类型。
letter-spacing?属性设置了字母间隔。
margin?属性设置了元素在外部的边距。
padding?属性设置了元素内部的内边距。
border?属性设置了元素的边框。
background-color?属性设置了元素的背景颜色。
width?和?height?属性设置了元素的宽度和高度。

其中，?#page、#logo、ul?等选择器指定了样式应用的对象，例如?#page?通过 id 属性应用于整个页面的最外层容器元素。

这个网页中有一个导航栏，其中包含了一些链接，可以通过点击链接来跳转到其他页面。导航栏位于页面顶部，使用无序列表?<ul>?和列表项?<li>?实现。

在导航栏中，有五个链接分别是 “Home”、“For Sale”、“Repairs”、“About” 和 “Contact”。这些链接使用?<a>?标签定义，通过设置?href?属性来指定链接的目标地址。
这些链接中的一个被设置为 “on” 类，通过添加?class="on"?属性，表示当前所处页面的链接。这样可以在导航栏中以不同的样式显示当前页面。

此外，网页还包含两个图片。一个是位于?<div id="logo">?内的图像，使用?<img>?标签可以插入图片并设置图片的路径、大小等属性。

另一个图片位于两个段落?<p>?之间，同样使用?<img>?标签插入图片并设置图片的路径、大小等属性。

两个段落?<p>?分别包含了一些文本内容，描述了网站的主要特点和业务。可以看到，文本内容在CSS样式中设置了居中对齐和字体样式等属性。

总的来说，这个网页结构简单明了，通过合理的布局和样式设置，提供了导航功能和相关信息展示，使用户能够方便地浏览和了解网站的内容。

根据代码片段，以下是可能存在的功能和内容：

页面标题：该网页的标题，显示在浏览器标签页上。
Logo 图片：一个具有特定 id 的图像容器。显示的是网站的 logo 或标志。可能用作页面标题的替代文字。
导航栏：一系列链接，用于导航到其他页面或网站的不同部分。通过点击链接，用户可以访问其他页面。

“Home” 链接：跳转到网站的主页。
“For Sale” 链接：可能是一个页面，展示销售产品或商品的信息。
“Repairs” 链接：可能是一个页面，提供关于维修服务或信息的内容。
“About” 链接：可能是一个页面，包含有关公司或网站的信息。
“Contact” 链接：可能是一个页面，提供联系方式或联系表单供用户与网站进行沟通。

图片插入：该网页中有两个图片插入的位置。在指定的容器内，通过?img?标签插入图片。这些图片可能是产品图片、公司标识或网站设计的一部分。
段落内容：页面中可能包含有关产品、服务、公司介绍或其他相关信息的段落内容。

?代码分析：

这部分代码表示HTML文档的头部，也就是页面的结构和样式。包括文档类型声明（<!DOCTYPE html>）、HTML开始标签、头部标签（<head>）、页面标题（<title>）和CSS样式声明等。

	<body>
		<div id="page">
			<div id="logo">
				<img src="img/1.jpg" alt="The Analog Specialists" width=50px height=50px/>
			</div>
			<ul id="navigation">
				<li><a href="#" class="on">Home</a></li>
				<li><a href="#">For Sale</a></li>
				<li><a href="#">Repairs</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<p>
				<img src="img/2.jpg" alt="A handsome person" width=50px height=50px/>
			</p>
			<p>
				We specialise in the sales and repair of classic keyboards, in particular the Fender Rhodes, Wurliter EP200, and Hohner Clavinet.
			</p>
		</div>
	</body>
</html>

这部分表示HTML文档的主体部分，页面的实际内容。主体标签包含了一个用于导航的无序列表（<ul>）和两个段落标签（<p>）。

第一个段落标签包含一个图像元素（<img>），该元素显示了一个路径为img/1.jpg的图像文件，宽度为50像素，高度为50像素，并用alt属性提供了一个显示替代文本。第二个段落标签包含一些文字描述。

整个页面还包裹在一个ID为page的<div>标签中，该标签定义了页面的最大宽度、最小宽度、边距、内边距以及边框样式和背景色。

总的来说，这是一个包含导航、图像和文字的简单网页，它的样式由CSS样式表控制。

继续

好的，接下来我们看一下CSS样式部分的每一段代码：

body{
    font-size:80%;
    font-family:"Courier New",Courier,monospace;
    letter-spacing:0.15em;
    background-color:#efefef;
}

这段代码设置了整个页面的字体、字号和字间距，以及背景色。其中font-size设置字体大小为默认值的80%；font-family指定字体为Courier New、Courier或monospace中的一种；letter-spacing设置字母间距为0.15个字母宽度；background-color为页面背景色。

#page{
    max-width:940px;
    min-width:720px;
    margin:10px auto 10px auto;
    padding:20px;
    border:4px double #000;
    background-color:#ffffff;
}

这段代码设置了ID为page的<div>标签的样式，指定了最大和最小宽度、边距、内边距、边框样式和背景色。

#logo{
    width:150px;
    margin:10 px auto 25px auto;
}

这段代码设置了ID为logo的<div>标签的样式，指定了宽度和边距。这个标签包含一个图像元素，所以设置宽度可以帮助图像在页面上正确显示。

ul{
    width:570px;
    padding:15px;
    margin:0px auto 0px auto;
    border-top:2px solid #000;
    border-bottom:1px solid #000;
    text-align:center;
}

li{
    display:inline:
    margin:0px 3px;
}

这段代码设置了无序列表（<ul>）和列表项（<li>）的样式，包括宽度、内边距、外边距、边框样式和对齐方式。其中ul样式还设置了border-top和border-bottom属性，创建了上下边框线。li样式设置了列表项的显示方式为内联，之间的间距为3像素。

p{
    text-align:center;
    width:600px;
    margin:20px auto 20px auto;
    font-weight:normal;
}

a{
    color:#00000;
    text-transform:uppercase;
    text-decoration:none;
    padding:6px 18px 5px 18px;
}
 
a:hover,a.om{
    color:#cc3333;
    background-color:#ffffff;
}

这段代码设置了段落（<p>）和链接（<a>）的样式，包括文本对齐、宽度、内边距、外边距、字体重量、字体颜色、文本转换、文本装饰和鼠标悬停时样式的改变。其中a:hover和.om选择器会在鼠标悬停和其他动作时改变链接的颜色和背景色。

文章来源:https://blog.csdn.net/weixin_66547608/article/details/135297938
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！