一起学WEB（八）一个网页练习（一）

最新推荐文章于 2024-10-15 23:57:40 发布

二月圆舞曲

最新推荐文章于 2024-10-15 23:57:40 发布

阅读量2.1k

点赞数

分类专栏： WEB 文章标签：一起学WEB WEB html css 网页

本文链接：https://blog.csdn.net/FebWaltz/article/details/54922903

版权

WEB 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一个网页练习（一）

关于CSS应该了解的最基本的东西已经讲过了，从这次开始，通过一个练习来讲解HTML和CSS的更多运用。

首先在上一次的基础上继续完善网站，主要是针对主页lounge进行。先给页面添加一些新内容。代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Head First Lounge</title>
		<link type="text/css" rel="stylesheet" href="lounge.css">	
	</head>
	<body>
		<p>
			<img src="images/logo.gif" alt="Head First Lounge">
		</p>

		<h1>Welcome to the New and Improved Head First Lounge</h1>

		<p>
			The Head First Lounge is, no doubt, the biggest trendsetter in Webville. 
			Stop in to sample the eclectic offering of elixirs, teas, and coffees,
			or, stay a bit longer and enjoy the multicultural culinary menu that 
			combines a harmony of taste, texture, and color with the best in fresh
			and healthy ingredients.  
		</p>

		<p>
		  During your stay at the lounge, you'll enjoy a smooth mixture of 
		  ambient and mystic sounds, filling the lounge and adding an extra dimension 
		  to your dining experience. The decor surrounds you with the relaxing sentiments 
		  of sights from eras past. And, don't forget, the lounge offers free wireless 
		  access to the Internet, so bring your laptop.  
		</p>

		<p>
		  Our guarantee: at the lounge, we're committed to providing you, 
		  our guest, with an exceptional experience every time you visit. 
		  Whether you're just stopping by to check in on email over an 
		  elixir, or are here for an out-of-the-ordinary dinner, you'll 
		  find our knowledgeable service staff pay attention to every detail. 
		  If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
		</p>

		<p>
		  But that's not all; at night, join us in the backroom as our resident 
		  DJ spins a choice selection of trance and drum&bass beats across 
		  our spacious tiki-themed dance floor. Or just hang out in one of our 
		  comfy white vinyl booths at the dance bar. You can have your elixirs 
		  delivered from the main lounge right to the dance floor. If you've 
		  had enough of the beat, just head back to the lounge area to relax.
		  And, no matter where you find yourself in the lounge, you'll always be 
		  connected with our wireless Internet access.
		</p>

		<p>
		  Now that you've experienced the lounge <em>virtually</em>, isn't
		  it time to check us out <em>for real</em>? We're located right 
		  in the heart of Webville, and we've create some 
		  <a href="about/directions.html" title="Detailed Directions to the Lounge">detailed directions</a> 
		  to get you here in record time. No reservations necessary; 
		  come and join us anytime.
		</p>

		<h2>Weekly Elixir Specials</h2>
		<p>
			<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
		</p>
		<h3>Lemon Breeze</h3>
		<p>
		  The ultimate healthy drink, this elixir combines
		  herbal botanicals, minerals, and vitamins with
		  a twist of lemon into a smooth citrus wonder
		  that will keep your immune system going all
		  day and all night.
		</p>

		<p>
		<img src="images/chai.gif" alt="Chai Chiller Elixir">
		</p>
		<h3>Chai Chiller</h3>
		<p>
		  Not your traditional chai, this elixir mixes maté
		  with chai spices and adds an extra chocolate kick for
		  a caffeinated taste sensation on ice.
		</p>

		<p>
		  <img src="images/black.gif" alt="Black Brain Brew Elixir">
		</p>
		<h3>Black Brain Brew</h3>
		<p>
		  Want to boost your memory?  Try our Black Brain Brew
		  elixir, made with black oolong tea and just a touch
		  of espresso.  Your brain will thank you for the boost.
		</p>

		<p>
		  Join us any evening for these and all our 
		  other wonderful 
		  <a href="beverages/elixir.html" 
			 title="Head First Lounge Elixirs">elixirs</a>.
		</p>

		<h2>What's playing at the Lounge</h2>
		<p>
		  We're frequently asked about the music we play at the lounge, and no wonder, 
		  it's great stuff. Just for you, we keep a list here on the site, updated weekly. 
		  Enjoy.
		</p>

		<ul>													<!--在网页中增加了一个无序列表<ul>（Unorder List与之相对的是有序列表<ol> Order List-->
			<li>Buddha Bar, Claude Challe</li>					<!--<li>为列表元素List Item）-->
			<li>When It Falls, Zero 7</li>
			<li>Earth 7, L.T.J Bukem</li>
			<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
			<li>Music For Airports, Brian Eno</li>
		</ul>

		<p>
			&copy; 2012, Head First Lounge<br>
			All trademarks and registered trademarks appearing on this site are 
			the property of their respective owners.
		</p>
	</body>
<html>

lounge.html代码

内容做了改变，网页的外观和配色也随之logo的加入做了重新设计，相应的CSS如下：

body {
	font-size: small;
	font-family: Verdana, Helvetica, Arial, sans-serif;  /*设置了多种备用字体，以适应不同的客户系统*/
	line-height: 1.6em;		/*设置了1.6倍的行高*/
}
h1,h2 {
	color: #007e7e;		/*与logo颜色一致的颜色*/
}
h1 {
	font-size: 150%;	/*内容字体的150%大*/
}
h2 {
	font-size: 130%;
}

lounge.css代码

经过这些修改以后网页效果如图：

先来讲一个知识点，列表。他又分为两个种类，有序列表<ol>，order list；无序列表<ul>，unorder list。他们都在内容中嵌套列表项<li>，list item。所谓有序列表是指其中的列表项是以1、2、3...的序号开头的，而无序列表则是以点号（如上图）或者其他图形符号开头。

网页中还有一个“©”符号（页脚声明版权信息处），在HTML代码中他是以“©”表示的，这种表示特殊字符的方法叫做字符实体，通常用他来表示一些键盘上没有的字符，或者有特殊用途的字符。例如：“<”“>”分别用“<”、“>”表示，因为在HTML中“<”“>”用来标识元素，再作为内容出现会引发歧义。关于字符实体可以通过http://www.w3schools.com/tags/ref_entities.asp和http://www.unicode.org/charts 进行查询。