首页 > > 网页制作 > css >

#WEB安全基础 : HTML/CSS | 0x1初识CSS

2019-01-21 02:37:55来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

"我受够这些难看的网页了，我怎么才能让它变得好看点？"你说。

我答道:"看来你得学点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在浏览器中的显示

这是网页在自己电脑里的路径（这不是域名）

file:///C:/Users/Administrator/Desktop/WebFrontEnd/HTML%E5%92%8CCSS/02%E5%88%9D%E8%AF%86CSS/index.html

把文件名，也就是index.html去掉，可以查看目录下的索引

如：

接下来是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


原文链接:https://www.cnblogs.com/MZPHr/p/10278243.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：博客园的推荐栏，怎么漂起来？

下一篇：转：从输入url到显示网页发生了什么

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签