我带着你，你带着钱，咱们去喝点饮料吧。

老板久仰你的大名，请你帮忙设计一个网站宣传他的饮料店

你要制定一个完美的方案还需要多学点东西

我先帮你设计一下

这是存放网站的文件夹

这是根目录

 

这是about文件夹

 

这是beverages文件夹

 

存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件，我们以前写的网页都是内部调用)

 

存放图片的images文件夹

 

首先，我要展示我写的index.html

 

以下是代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset = "utf-8">
 <title>Head First Lounge</title>
 <link type = "text/css" rel = "stylesheet" href = "CSSdom/lounge.css">
 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表-->
 </head>
 <body>
 <h1>Welcome to the New and Impproved Head First Lounge</h1>
 <img src = "images/drinks.jpg" alt ="果汁" title = "果汁">
 <p>
 A game of two of <em>Dance Dance Revolution.</em>
 </p>
 <p>Join us any evening for refershing
 <a href = "beverages/elixir.html" title ="elixirs" target = "_blank">elixirs</a>
 </p>
 <h2>Directions</h2>
 <p>You'll find us right the center of downtown Webbille. If you need help finding us, check out our
 <a href = "about/directions.html" title = "directions" target = "_blank">detailes directions</a>
 . Come join us!
 </p>
 </body>
 </html>

link元素所引用的文件就是CSSdom文件夹里的lounge.css

它的代码为

 h1,h2{
     font-family: sans-serif;
     color: gray;
 }
 h1{
     border-bottom: 1px solid black;
 }
 p{
     font-family: sans-serif;
     color: maroon;
 }
 em{
     font-family: serif;        /*我是CSS的注释，而且我是多行注释*/
 }                            /*用em标签覆盖p标签的继承，这叫做覆盖继承，你会在浏览器里看到en标签显示的文本有点不一样*/
 p.yellowtea
 {
     color: orange;
 }
 /*
 用p.yellowtea,这个对有yellowtea类名的p标签有作用
 用.yellowtea也可以，这个对所有有yellowtea类名的元素都起作用
 */
 p.blueberry{
     color: blue;
 }
 p.cranberry{
     color: yellow;
 }

注意：CSS的代码没有style元素，style元素只是把在html中内部调用CSS的媒介而已

接下来我们看elixir.html

这是它的代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset = "utf-8">
 <title>Head First Lounge Elixirs</title>
 </head>
 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css">
 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表-->
 <body>
 <h1>Our Elixirs</h1>
 <h2>Yellow Tea Cooler</h2>
 <img src = "../images/yellow.jpg" width = "100" height = "100">        <!--../是父目录，width是图片长度，height是图片宽度-->
 <p class = "yellowtea">
 Chock full of vitamins and mineral, this elixir comblines the herlthful benefits of yellow tea with a twist of chamorimile biossoms and ginger root.
 </p>
 <h2>Resberry Ice Concentration</h2>
 <img src = "../images/red.jpg" width = "100" height = "100">
 <p>
 Concentration resberry juice grass, citrus peel and roschips, this icy drink will mack your mind feel clear and crisp.
 </p>
 <h2>Blueberry Bliss Elixir</h2>
 <img src = "../images/blue.jpg" width = "100" height = "100">
 <p class = "blueberry">
 Blueberry and chreey essence mixed into a base of elderflower herb tea will put you in a relexd state of bliss in no time.
 </p>
 <h2>Cranberry Antioxdant Blast</h2>
 <img src = "../images/lightyellow.jpg" width = "100" height = "100">
 <p class = "cranberry">
 Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
 </p>
 <p>
 <a href = "../index.html" title = "回到主页面">回到主页面</a>
 </p>
 </body>
 </html>
 <!--元素可以定义多个类,如:
 <p class = "greenberry yellowberry bluwberry"></p>
 -->

这里包含了新知识，请仔细理解和阅读

以下是它的显示

 
 

directions.html的代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset = "utf-8">
 <title>Head First Lounge Directions</title>
 </head>
 <link type = "text/css" rel = "stylesheet" href = "../CSSdom/lounge.css">
 <!--link标签用于调用外部css，type是文件类型这里是层叠样式表(也就是CSS)，rel是html文件所链接的文件的关系，这里是链接到一个样式表-->
 <body>
 <h1>Directions</h1>
 <p>
 Take the 305 S exit to Webville - go 0.4 mi
 </p>
 <p>
 Continue on 305 - go 12 mi
 </p>
 <p>
 Turn right at Structure A ve N - go 0.6 mi
 </p>
 <p>
 Turn right and head toward Structure A ve N - go 0.0 mi
 </p>
 <p>
 Turn right at Structure A ve N - go 0.7 mi
 </p>
 <p>
 Continue on Structure A ve S - go 0.2 mi
 </p>
 <p>
 Turn right at SW Persebtation Way - go 0.0 mi
 </p>
 <p>
 <a href = "../index.html" title = "回到主页面">回到主页面</a>
 </p>
 </body>
 </html>

以下是它的显示

 

我们的网站得到了饮料店老板的青睐

而你也学会了外部调用CSS，这样一来HTML就更模块化了

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处  by:M_ZPHr

最后修改日期：2019-01-17

 

#WEB安全基础 : HTML/CSS | 0x9美丽的饮料店的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  2. #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

    HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...

  3. #WEB安全基础 : HTML/CSS | 0x10实现交互_表单

    先看看表单如何工作吧 请求   响应   简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件   这是显示   你可以向空白框框 ...

  4. #WEB安全基础 : HTML/CSS | 0x8CSS进阶

    你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页   这是index.html的代码 <html> <head> <title ...

  5. #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

    标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...

  6. #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

    没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下

  7. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  8. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  9. #WEB安全基础 : HTML/CSS | 0x8.1CSS继承

    CSS的一大特性——继承,怎么样没听说过吧,没了它我们修饰网页时就变得十足的麻烦 这是本节课准备的文件   这是others文件夹   先看看index.html,代码如下 <!DOCTYPE ...

随机推荐

  1. 长沙学院APP之校园模块设计

    一.简单回顾 在上次的scrum冲刺中,我将整个长沙学院的APP做了一个基本的架构设计以及框架设计,确定好了APP的功能结构以及实现时所要达到的效果,并且做了一个简单的用户登录界面,由于所学知识有限, ...

  2. LeetCode编程训练 - 合并查找(Union Find)

    Union Find算法基础 Union Find算法用于处理集合的合并和查询问题,其定义了两个用于并查集的操作: Find: 确定元素属于哪一个子集,或判断两个元素是否属于同一子集 Union: 将 ...

  3. 获取安卓应用APK包名的方法

    应用商店按照符合Android标准的原则进行设计,使用包名(Package Name)作为应用的唯一标识.即:包名必须唯一,一个包名代表一个应用,不允许两个应用使用同样的包名.包名主要用于系统识别应用 ...

  4. 判断二叉树是否BST

    一.问题: 请实现一个函数,检查一棵二叉树是否为二叉查找树.给定树的根结点指针TreeNode* root,请返回一个bool,代表该树是否为二叉查找树. 二.思路: 解法一:从根节点开始遍历二叉树, ...

  5. [Swift]LeetCode258. 各位相加 | Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  6. [Swift]LeetCode330. 按要求补齐数组 | Patching Array

    Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...

  7. [Swift]LeetCode433. 最小基因变化 | Minimum Genetic Mutation

    A gene string can be represented by an 8-character long string, with choices from "A", &qu ...

  8. [Swift]LeetCode996. 正方形数组的数目 | Number of Squareful Arrays

    Given an array A of non-negative integers, the array is squareful if for every pair of adjacent elem ...

  9. 记录eclipse安装SpringBoot插件及搭建SpringBoot项目

    刚学习了下SpringBoot 插件安装 创建项目在此记录下 在spring官网上下载相关的插件,然后导入到eclipse中,以下是下载步骤: 1.首先查看自己eclipse版本号 help--> ...

  10. 网络协议 9 - TCP协议（下）：聪明反被聪明误

    网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网络协议 5 - I ...