你以为自己学这么点CSS就厉害了？

学点新东西吧，让你的网页更漂亮

我们只需要用到图片和网页

 

这是index.html的代码

 <html>
 <head>
 <title>Head First Lounge</title>
 </head>
 <style>
 body{
 margin-left: 15%;
 margin-right: 15%;
 font-family: sans-serif;
 padding: 10px 10px 10px 10px;
 border: 3px solid green;
 }
 p.myp{
 background-color: pink;
 color: blue;
 }
 </style>
 <body>
 <h1>Welcome to the Head First Lounge</h1>
 <img src = "images/drinks.jpg" alt = "果汁" title = "果汁" width = "400" height = "200">
 <P>Join us any evening for refreshing elixirs, conversation and maybe a game of two of <em>Dance Revolution</em>Wireless access is always provided;BYOWS (Brinf you Web server).
 </p>
 <h2>Directions</h2>
 <p class = "myp">
 You'll find us right in the center of downtown Website. Come join us!
 </p>
 </body>
 </html>
 <!--
 background-color: pink;        <p>标签的背景颜色
 -->

请看效果

 

我添加了元素的背景颜色，结合学过的class(类)自己试试能不能让它变得更漂亮

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

转载请注明出处  by:M_ZPHr

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

 

#WEB安全基础 : HTML/CSS | 0x8CSS进阶的更多相关文章

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

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

  2. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  3. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. [BlueZ] 1、Download install and use the BlueZ and hcitool on PI 3B+

    星期日, 02. 九月 2018 11:58下午 - beautifulzzzz 1. Introduction Bluez is the default Bluetooth protocol sta ...

  2. Dora.Interception，为.NET Core度身打造的AOP框架 [2]：以约定的方式定义拦截器

    上一篇<更加简练的编程体验>提供了最新版本的Dora.Interception代码的AOP编程体验,接下来我们会这AOP框架的编程模式进行详细介绍,本篇文章着重关注的是拦截器的定义.采用“ ...

  3. MyEclipse设置Console输出到文件

    Java程序默认输出为Console,如果要想将Console输出结果保存到文件中,则需要做如下配置: 在JAVA程序上右键--> Run As --> Run Configuration ...

  4. [Swift]LeetCode202. 快乐数 | Happy Number

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  5. [Swift]LeetCode955. 删列造序 II | Delete Columns to Make Sorted II

    We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...

  6. MySQL5.7.25（解压版）Windows下详细的安装过程

    大家好,我是浅墨竹染,以下是MySQL5.7.25(解压版)Windows下详细的安装过程 1.首先下载MySQL 推荐去官网上下载MySQL,如果不想找,那么下面就是: Windows32位地址:点 ...

  7. mysql怎么修改密码

    第一种方式: 最简单的方法就是借助第三方工具Navicat for MySQL或Navicat Premium来修改,方法如下: 1.登录mysql到指定库,如:登录到student库. 2.然后点击 ...

  8. 【java设计模式】（3）---代理模式（案例解析）

    设计模式之代理模式 一.概述 1.什么是代理模式? 解释第一遍:代理模式主要由三个元素共同构成: 1)一个接口,接口中的方法是要真正去实现的. 2)被代理类,实现上述接口,这是真正去执行接口中方法的类 ...

  9. 【从零开始自制CPU之学习篇05】总线

    总线定义:总线(Bus)是计算机各种功能部件之间传送信息的公共通信干线,它是由导线组成的传输线束, 按照计算机所传输的信息种类,计算机的总线可以划分为数据总线.地址总线和控制总线,分别用来传输数据.数 ...

  10. 『NOIP2018普及组题解』

    标题统计 题目描述 凯凯刚写了一篇美妙的作文,请问这篇作文的标题中有多少个字符? 注意:标题中可能包含大.小写英文字母.数字字符.空格和换行符.统计标题字 符数时,空格和换行符不计算在内. 输入格式 ...