HTML学习记录 2021.05.21_lighthouse island bistro网页-CSDN博客

本文链接：https://blog.csdn.net/Stan_lu/article/details/117134389

1. 部分元素属性

<br> 换行符，不需要结束标签 “</br>”

<ul>中的 list-style-type: none 消除 <ul> 中子元素 <li>前的小圆点

<a>中的 text-decoration: none 消除 <a> 元素本身的超链接文本样式

2. 侧边栏<nav>

界面效果：

侧边栏

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<style>
body { background-color: #00005D; font-family: Verdana, Arial, sans-serif; }
#wrapper { margin: 0 auto; 
	width: 80%; 
	min-width: 940px;
	background-color: #B3C7E6; 
	color: #000066; }
header { background-color: #869DC7; 
	color: #00005D; 
	font-size: 150%;
	padding: 10px 10px 10px 155px; 
	background-repeat: no-repeat;
	background-image: url(lighthouselogo.jpg); 
	height: 130px; }
nav { float: right; 
	width: 150px; 
	font-weight: bold; 
	letter-spacing: 0.1em; }
main { background-color: #FFFFFF; 
	color: #000000; 
	display: block;
	padding: 10px 20px; 
	overflow: auto; }
h2 { color: #869DC7; font-family: Arial, sans-serif; }
main img { float: right; margin: 10px; }
nav ul { list-style-type: none; margin: 0; padding: 0; }
nav a { text-decoration: none; 
	padding: 20px; 
	display: block;
	background-color: #B3C7E6; 
	border-bottom: 1px solid #FFFFFF;
	background-image: url(sprites.gif);
    background-repeat: no-repeat;
    background-position: right 0; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #EAEAEA; }
nav a:hover { color: #869DC7;
	background-color: #EAEAEA; 
	background-position: right -100px;
	}
footer { font-size: 70%; 
	text-align: center; 
	padding: 10px;
	background-color: #869DC7; 
	clear: both;}
</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>Lighthouse Island Bistro</h1>
  </header> 
  <nav>
    <ul>
	 <li><a href="index.html">Home</a></li>
     <li><a href="#">Menu</a></li>
     <li><a href="#">Map</a></li>
     <li><a href="#">Contact</a></li>
	</ul> 
   </nav> 
  <main> 
   	<h2>AAA</h2>
    <p>aaaaaaaaaa</p>
    <h2>BBB</h2>
    <p>bbbbbbbbbbbbbbbbbbbbb</p>
     <img src="lighthouseisland.jpg" width="250" height="355"  alt="Lighthouse Island">
  	<h2>CCC</h2>
    <p>cccccccccccccccccccccc</p>
    <h2>DDD</h2>
	<p>ddddddddddddd!</p>
	<p>ddddddddddddddddddddddd.</p>
   </main> 
   <footer>Copyright &copy; 2021
   </footer>
  </div> 
</body>
</html>

代码分析：

float: right <nav>侧边栏出现在右侧（还可以设置为 left 和 top）

display: block 以块为单位显示元素，超链接的响应不只限于文本区域，并且该元素独占一行（可以使用 inline-block 使多元素处在同一行）

background-repeat 如果背景图尺寸不够如何和补足（repeat-y为纵向复制补足，no-repeat为不补足，repeat为纵向和横向同时补足）

background-position 设置背景图从哪个坐标点开始对齐并显示（用于将多个图标放置在一张图片上进行存储，显示时设置background的左上角对应 background-image 中的坐标点）

3. Gallery鼠标移入，图片放大显示

鼠标未移入时：

鼠标未移入

鼠标移入后：

鼠标移入

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>	
<title>Image Gallery</title>
<meta charset="utf-8">
<style> 
#gallery { position: relative; }
#gallery ul { width: 250px; 
             list-style-type: none; }
#gallery li { display: inline;
              float: left;
			  padding: 10px; }
#gallery img { border-style: none; }
#gallery a { text-decoration: none; 
             color: #333; 
			 font-style: italic; }
#gallery span { display: none; }    
#gallery a:hover span { display: block;
                        position: absolute;
					    top: 10px;
                        left: 300px;
						text-align: center; }
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div id="gallery">
<ul>
  <li><a href="photo1.jpg"><img src="photo1thumb.jpg" 
       width="100"   height="75" alt="Golden Gate Bridge">
       <span><img src="photo1.jpg" width="250" height="150"
        alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a>
  </li>
  <li><a href="photo2.jpg"><img src="photo2thumb.jpg" 
       width="100"   height="75" alt="California Beach">
       <span><img src="photo2.jpg" width="250" height="150"
        alt="California Beach"><br>California Beach</span></a>
  </li>
</ul>
</div>
</body>
</html>

代码分析：

<1> position

#gallery { position: relative; }

relative是生成相对定位的元素，相对于其正常位置进行定位。

可以通过 “left: 20px” 使其实际位置处于原位置靠右20px处，或通过 “left: -20px” 使其实际位置处于原位置靠左20px处。注意：这里提到的 “left” 是以左边为基准的意思

<2> 移入显示

#gallery span { display: none; }    
#gallery a:hover span { display: block;
                        position: absolute;
					    top: 10px;
                        left: 300px;
						text-align: center; }

初始状态

display: none 不显示

当 a 处于 hover 状态，也就是鼠标移入时，其内部的 span 有如下状态：

display: block 以block（块）形式显示

position: absolute 以相对于 static 定位以外的第一个父元素进行定位（爷爷元素）

top: 10px 相较于爷爷元素向下10px

left: 300px 相较于爷爷元素向右300px （爷爷元素 <ul> 的宽度为250px, 这里设置为300px 是为了与左侧的小图片保持一定距离）

text-align: center 文字居中