#WEB安全基础 : HTML/CSS | 0x1初识CSS
"我受够这些难看的网页了，我怎么才能让它变得好看点？"你说。
我答道:"看来你得学点CSS了"
学习这些东西只有一个原则，就是用你的脑袋想，用你的眼睛看，用的你手敲。很简单，对吧？
这次我写了两个网页
看代码就用到了你的眼睛,
下面是index.html的代码
<html>
<head>
<title>Starbuzz Coffe</title>
<!--CSS内部调用(就是在html文本中写<style>标签从而使用CSS)-->
<style type = "text/css">
body{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffe Menu</h1>
<h2>House Blend, $1.49</h2>
<p>
A swooth, mild blend of coffees from Mexico, Bolivia and Guatemala.
</p>
<h2>Mocha Cafe Latte, $2.35</h2>
<p>
Espresso, steamed milk and chocolate syrup.
</p>
<h2>Cappuccino, $1.89</h2>
<p>
A mixture of esresso, steamed milk and foam.
</p>
<h2>Chai Tea, $1.85</h2>
<p>
A spicy drink made with black tea, spices, milk and honey.
</p>
</body>
</html>
<!--
body{ CSS作用的标签
background-color: #d2b48c; 背景颜色，#d2b48c是RGB十六进制颜色代码
margin-left: 20%; 左边空出20%的页面
margin-right: 20%; 右边空出20%的页面
border: 2px dotted black; 2px大小的虚线黑色边框
padding: 10px 10px 10px 10px; 内边距上下左右的边距都是10px的大小
font-family: sans-serif; 字体
}
不要在CSS内尝试写html的注释
-->
请记住
不要在CSS内尝试写html的注释!!! 否则CSS会失效
这是网页的一个页面，称为默认页面，默认页面的文件名一般是index.html或者是default.html它们的作用是当你只是通过域名访问到网站时，网站会展示给你默认网页而不是随便一个网页（网站不只是由一个网页组成）。比如访问百度，百度就会向你展示一个“百度一下你就知道”的页面。
我们现在是在自己的电脑上写网页，所以默认网页并不起作用。
这是index.html在浏览器中的显示
AE.png)
这是网页在自己电脑里的路径（这不是域名）
把文件名，也就是index.html去掉，可以查看目录下的索引
如：
.png)
接下来是mission.html的代码
<html>
<head>
<title>Starbuzz Coffee's Misson</title>
<style type = "text/css">
body{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>
To provide all the caffeine that you need to power you life.
</p>
<p>
Just drink it.
</p>
</body>
</html>
试着自己分析各个元素的作用
这是mission.html在浏览器中的显示
不要只是看一看代码就行了，你需要理解，也不是只要理解就行，你需要动手。
怎么样，加了CSS的网页好不好看？
//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买
转载请注明出处 by:M_ZPHr
最后修改日期：2019-01-16
#WEB安全基础 : HTML/CSS | 0x1初识CSS的更多相关文章
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- web前端基础知识-（二）CSS基本操作
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信
TCP/IP是如何通信的呢? 请看图 用TCP/IP协议族通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接受层从链路层往上走. 客户端为了浏览界面在应用层发送请求,为了方便传输在传输层的 ...
- #WEB安全基础 : HTTP协议 | 0x6 初识HTTP报文
欢迎来到HTTP最精彩的部分 请注意:应用HTTP协议时,必定有一方担任客户端,另一方担任服务器 客户端向服务器发出请求,服务器向客户端返回响应 下面是一个请求与相应的例子: 请求: GET /ind ...
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- #WEB安全基础 : HTTP协议 | 文章索引
本系列讲解WEB安全所需要的HTTP协议 #WEB安全基础 : HTTP协议 | 0x0 TCP/IP四层结构 #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信 #WEB安全基础 : ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- #WEB安全基础：HTML/CSS | 0x0 我的第一个网页
#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...
- Web前端基础——CSS
一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...
随机推荐
- 知乎技术分享：从单机到2000万QPS并发的Redis高性能缓存实践之路
本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动 ...
- ruby-super用法
ruby语法-super用法 本文主要介绍ruby中super方法的使用.super方法参数传递.method执行顺序. 下面主要通过实例来说明super方法的使用: 示例1: #!/usr/bin/ ...
- feign包名路径添加问题
1. feign包名路径添加问题 1.1. 问题 在SpringCloud中使用feign调用路径中,不能在类上直接添加@RequestMapping(value = "/hospital- ...
- python基础-字典(8)
一.字典介绍 字典和列表一样,也是存储多个数据的容器,只不过存储和读取的方式不同 字典的语法格式: 字典名 = {key1 : value1,key2:value2,key3:value3,……} 说 ...
- 在Mac上安装MongoDB，配置全局路径
1.访问MongoDB官方下载地址 http://www.mongodb.org/downloads 2.点击“DOWNLOAD(tgz)”按钮: 3.将下载的文件压缩包解压后剪切到你的Mac中某个位 ...
- ExternalException (0x80004005): 无法执行程序
今天更新系统上传到阿里云服务器,报错如下: “/”应用程序中的服务器错误. 组策略阻止了这个程序.要获取详细信息,请与系统管理员联系. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆 ...
- stack源码
stack概述 stack是一种先进后出的数据结构,它只有一个出口,允许新增元素.移除元素.取得最顶端元素,但每次只能处理顶端元素,也就是说,stack不允许遍历行为. stack定义 以某种既有容器 ...
- Spring 依赖注入方式详解（四）
IoC 简介 平常的Java开发中,程序员在某个类中需要依赖其它类的方法. 通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理. Spring提出了依赖注入的思想 ...
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Spring Cloud微服务下的权限架构调研
随着微服务架构的流行,系统架构调整,项目权限系统模块开发提上日程,需要对权限架构进行设计以及技术选型.所以这段时间看了下相关的资料,做了几个对比选择. 一.架构图 初步设想的架构如下,结构很简单:eu ...