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

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

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

我先帮你设计一下

这是存放网站的文件夹

这是根目录

 

这是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. [Swift]LeetCode249.群组偏移字符串 $ Group Shifted Strings

    Given a string, we can "shift" each of its letter to its successive letter, for example: & ...

  2. [Swift]LeetCode350. 两个数组的交集 II | Intersection of Two Arrays II

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  3. [Swift]LeetCode538. 把二叉搜索树转换为累加树 | Convert BST to Greater Tree

    Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...

  4. [Swift]LeetCode905. 按奇偶排序数组 | Sort Array By Parity

    Given an array A of non-negative integers, return an array consisting of all the even elements of A, ...

  5. 【dotNet Core】Swagger下简单的给WebApi分组

    Startup.cs下ConfigureServices代码 这里主要在DocInclusionPredicate控制输出那些api. Startup.cs下Configure代码 给Controll ...

  6. 在asp.net web api 2 (ioc autofac) 使用 Serilog 记录日志

    Serilog是.net里面非常不错的记录日志的库,另外一个我认为比较好的Log库是NLog. 在我个人的asp.net web api 2 基础框架(Github地址)里,我原来使用的是NLog,但 ...

  7. 了解 HTTPS，读这篇文章就够了

    今天接到个活儿,让我科普 HTTPS .讲 HTTP 我都“方”,想要通俗易懂的说完 HTTPS, 我有点“圆”.在讲什么是 HTTPS 之前,我们先来看个漫画.   △ 图片来源于阮一峰的网络日志 ...

  8. PHP 扩展管理

    一直对 PHP 扩展了解的似是而非,每次安装扩展都要百度教程,很容易出现各种错误.所幸整理下管理扩展的所有操作,方便日后操作. 查看已加载的扩展 输出 phpinfo(): 使用 get_loaded ...

  9. SpringCloud(8)---zuul权限校验、接口限流

    zuul权限校验.接口限流 一.权限校验搭建 正常项目开发时,权限校验可以考虑JWT和springSecurity结合进行权限校验,这个后期会总结,这里做个基于ZuulFilter过滤器进行一个简单的 ...

  10. 《深入理解Java虚拟机》-----第2章 Java内存区域与内存溢出异常

    2.1 概述 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝又是执行最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任 ...