我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点css设置行高，首行缩进，模拟百度Logo样式，定义标题样式，定义正文样式，设计文本块样式，设计新闻版面，设计图文版面，设计单页版式
1.css设置行高
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.p1 {
font-size: 16px;
line-height: 14pt;
}
.p2 {
font-size: 12px;
line-height: 2em;
}
</style>
<title>上机练习</title>
</head>
<body>
<p class="p1">明月几时有，把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间！转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
<p class="p2">大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰！遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，强虏灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-size:12px;
line-height:1.6;
}
p { font-size:30px;}
</style>
<title>上机练习</title>
</head>
<body>
<p class="p1">明月几时有，把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间！转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
<p class="p2">大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰！遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，强虏灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</p>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-size:12px;
line-height:1.6em;
}
p { font-size:30px;}
</style>
<title>上机练习</title>
</head>
<body>
<p class="p1">明月几时有，把酒问青天。不知天上宫阙，今夕是何年？我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间！转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
<p class="p2">大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰！遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，强虏灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。</p>
</body>
</html>
2.css首行缩进,这个首行缩进对排版要求比较高的网站经常看到
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p { text-indent:2em; }
</style>
<title>上机练习</title>
</head>
<body>
<h1>社戏</h1>
<h2>鲁迅 </h2>
<p>我在倒数上去的二十年中，只看过两回中国戏，前十年是绝不看，因为没有看戏的意思和机会，那两回全在后十年，然而都没有看出什么来就走了。</p>
<p>第一回是民国元年我初到北京的时候，当时一个朋友对我说，北京戏最好，你不去见见世面么？我想，看戏是有味的，而况在北京呢。于是都兴致勃勃的 跑到什么园，戏文已经开场了，在外面也早听到冬冬地响。我们挨进门，几个红的绿的在我的眼前一闪烁，便又看见戏台下满是许多头，再定神四面看，却见中间也 还有几个空座，，挤过去要坐时，又有人对我发议论，我因为耳朵已经喤的响着了，用了心，才听到他是说“有人，不行！” </p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p {
text-indent:-2em;
padding-left:2em;
}
</style>
<title>上机练习</title>
</head>
<body>
<h1>社戏</h1>
<h2>鲁迅 </h2>
<p>我在倒数上去的二十年中，只看过两回中国戏，前十年是绝不看，因为没有看戏的意思和机会，那两回全在后十年，然而都没有看出什么来就走了。</p>
<p>第一回是民国元年我初到北京的时候，当时一个朋友对我说，北京戏最好，你不去见见世面么？我想，看戏是有味的，而况在北京呢。于是都兴致勃勃的 跑到什么园，戏文已经开场了，在外面也早听到冬冬地响。我们挨进门，几个红的绿的在我的眼前一闪烁，便又看见戏台下满是许多头，再定神四面看，却见中间也 还有几个空座，，挤过去要坐时，又有人对我发议论，我因为耳朵已经喤的响着了，用了心，才听到他是说“有人，不行！” </p>
</body>
</html>
3.模拟百度Logo样式
<!doctype html>
<html>
<head>
<title>百度logo</title>
<style>
/* 引入外部字体文件 */
@font-face {
/* 选择默认的字体类型 */
font-family: "bai";
/* 兼容IE */
src: url(fonts/Handel.eot);
/* 兼容非IE */
src: local("bai"), url(fonts/Handel.ttf) format("truetype");
}
@font-face {
font-family: "du";
src: url(fonts/方正新综艺简体.eot);
src: local("du"), url(fonts/方正新综艺简体.ttf) format("truetype");
}
p {
color: #eb0005;
text-align: center
}
p img {
position: relative;
top: 8px;
}
.g1 {
font-size: 60px; /* 字体大小*/
font-family: bai, MS Ui Gothic, Arial, sans-serif;
letter-spacing: 1px; /* 字间距 */
font-weight: bold;
}
.g2 {
font-size: 50px;
font-family: du, MS Ui Gothic, Arial, sans-serif;
letter-spacing: 1px;
font-weight: 900; /* 字体粗细 */
}
</style>
<meta charset="utf-8">
</head>
<body>
<p><span class="g1">Bai</span><img src="//freemuban.com/img/baidu.jpg" border="0"><span class="g2">百度</span></p>
</body>
</html>
4.css定义标题样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题样式</title>
<style>
body {
font-family: 宋体;
font-size: 14px;
margin: 30px;
background: url('//freemuban.com/img/20200417bg.jpg');
}
h1 {
font-family: 隶书;
font-size: 50px;
color: #086916;
padding-bottom: 24px;
text-align: center;
border-bottom: 2px solid #cecaca;
}
img {
position: relative;
height:80px;
bottom: -24px;
}
</style>
</head>
<body>
<h1><img src="//freemuban.com/img/tang.jpg" >《唐诗三百首》</h1>
</body>
</html>
5.css定义正文样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题样式</title>
<style>
body {
font-family: 宋体;
font-size: 14px;
margin: 30px;
background: url('//freemuban.com/img/20200417bg.jpg');
}
h1 {
font-family: 隶书;
font-size: 50px;
color: #086916;
padding-bottom: 24px;
text-align: center;
border-bottom: 2px solid #cecaca;
}
img {
position: relative;
height:60px;
bottom: -14px;
}
p {
line-height:1.6em;
font-size:14px;
color:#000;
text-indent:2em;
margin:6px 0;
}
</style>
</head>
<body>
<h1><img src="//freemuban.com/img/tang.png" >唐诗欣赏</h1>
<p>清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。 ——杜牧 《清明》 </p>
<p>空山新雨后，天气晚来秋。明月松间照，清泉石上流。 竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。 ——王维 《山居秋暝》 </p>
<p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归；谁言寸草心，报得三春晖。——孟郊《游子吟》</p>
</body>
</html>
6.css设计文本块样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本块样式</title>
</head>
<style>
body {
background: #383838;
margin: 50px 40px;
text-align: center;
}
h1 {
color: #ffffff;
background: #009933;
display: inline;
padding:6px 12px;
}
p {
font-family: Arial, 宋体, sans-serif;
font-size: 16px;
color: #c5c4c4;
line-height: 1.4em;
text-align: left;
padding-top: 14px;
margin:0;
text-indent:2em;
}
.strong {
color:#ffffff;
font-weight:bold;
}
.top{
margin-top:24px;
}
</style>
<body>
<h1>黑科技是什么</h1>
<p class="top"><span class="strong">黑科技</span>就是现实中看起来不可能存在的技术。例如，在动漫或小说中，为使剧情合理化而空想出的科学技术，这些技术大多没有理论根据，有些都是胡扯，如高达中的阳电子破城搜索炮、GN粒子等。</p>
<p>黑科技原意指，没有科学依据但很厉害又挂着科技噱头，用起来和魔法一样的东西。理论上来说，目前人类无法实现或根本不可能产生的技术统称为“黑科技”，其标准是不符合现实世界常理，以及现有科技水平。</p>
<p>另外像政府未公开的科技，如SARS AIDS（HIV）之类及其变种。也有把黑科技引申为现实中某些超乎寻常厉害的事或物。</p>
</body>
</html>
7.css设计新闻版面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新闻版面</title>
<style>
body {
background-color: #f1e2d9;
margin: 0;
padding: 0;
font-family: 宋体;
text-align: center;
}
.container {
width: 800px;
border: 2px solid #c1bebc;
margin: 0px auto;
background-color: #c0f5ef;
}
h1 { margin-top: 50px; font-family:"黑体";}
.p1 {
color: #999;
padding-bottom: 12px;
text-align: center;
}
.header {
border-bottom: 1px solid #c1bebc;
width: 800px;
}
.main {
width: 750px;
text-align: left;
margin: 30px;
padding-bottom: 10px;
}
.main p {
font-size: 15px;
text-indent: 2em;
line-height: 1.6em;
margin: 0;
padding: 0
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>当人工智能变成一匹脱缰的野马</h1>
<p class="p1">2016-08-29 13:39 雷锋网</p>
</div>
<div class="main">
<p>当现在还处在弱人工智能（ANI）的阶段时，就有人开始「危言耸听」了，特斯拉CEO马斯克就曾说： 未来人类在智力上将被远远抛在后面，将沦为人工智能的「宠物」。然而与之持对立观点的扎克伯格则认为，这些担忧毫无依据 (not valid fear)，简直就是发神经 (hysterical)。</P>
<P>对于今天的我们来说，人工智能听起来似乎还是颇为高端和神秘。但它可不是什么冰山美人、低调的边缘者。也许在未来的几十年内，它就将会变成一匹脱缰的野马，对人类有限的认知发起一波又一波的冲击。人类社会瞬息万变，不管你信不信，时代正站在变革的边缘。目前关于人工智能的大部分研究集中在ANI上，即让机器专注于具体的任务，例如人脸识别、语音识别、自然语言处理等方面。现在已经运用在了聊天机器人、无人驾驶、精准医疗、人机对弈等领域。</p>
<p>前段时间，日本有名女子患了白血病，治疗效果一直不佳。Watson（认知计算系统IBM Watson）通过快速大量的阅读有关白血病的文档资料，通过对该名患者的基因分析与系统联系，实现对这名女子病情的有效分析。很快诊断出了这位患者的病发原因。 </P>
<P>让我们想象一下这样的画面，当AI的运作越来越稳定，开始深度介入你的生活，从厨房到卧室，从生活起居再到工作社交…… AI作为一种辅助工具，当它几乎可以满足我们所有能想象到需求，被运用在天文、气候、医学、军事等重要领域，能让人类的生活更加美好吗？</p>
<p>......</p>
</div>
</div>
</body>
</html>
8.css设计图文版面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排</title>
<style>
body {
font-family: "宋体";
text-align: center;
background-color: #445545;
margin-top: 20px;
}
.container {
width: 800px;
border: 1px #66CCFF solid;
margin: 0px auto 0 auto;
padding: 20px 40px;
background-color: #CCCCCC;
font-size: 16px;
}
.container p {
font-size: 14px;
text-align: left;
line-height: 1.8em;
text-indent: 2em;
}
h1 {
font-weight: bold;
color: #000066;
text-align: center;
margin: 20px auto;
padding-bottom: 20px;
}
.sh {
font-size: 60px;
color: green;
float: left;
padding-bottom: 12px;
padding-right: 6px;
font-weight: bold;
font-family: 黑体;
position: relative;
top: 16px;
}
.s1 {
font-style: italic;
text-decoration: underline;
color: #0000FF;
}
img {
border: #339999 2px solid;
float: left;
width: 300px;
margin: 10px;
}
.container p.noindent { text-indent: 0; }
</style>
</head>
<body>
<div class="container">
<h1>少年马云二三事</h1>
<p class="noindent"><span class="sh">马</span>云于<span class="s1">1964年9月10日</span>，出生在上海西南百里外的杭州。这一年正好是中国的龙年。作为未来一个有代表性的中国企业家，马云却降生在一个私营经济几乎销声匿迹的年代。</p>
<p>马云小时候就很喜欢英语及英文著作，特别喜欢听收音机中电台朗读的马克·吐温所著的《汤姆·索亚历险记》。1979年，杭州接待的外国游客猛增到了4万多人。马云不放过任何练习英文的机会。常常是天刚破晓，他就起床，骑上自行车，花40分钟赶到杭州饭店去和外国游客攀谈。后来他回忆道：“每天早晨从5点开始，我就在宾馆前读英语。很多游客来自美国，也有一些是欧洲人。我免费带他们游览西湖，他们教我英语。整整9年！我每天早晨都在练英语，不管天气好坏。”</p>
<p>马云一直认为学习英语给他的人生带来了巨大的帮助：“英语帮了我大忙。它让我更好地了解这个世界，让我遇到了一些非常优秀的CEO和领导者，也让我认识到了中国和世界的差距。” </p>
<p><img src='//freemuban.com/img/demo1.jpg'></p>
<p>1980年，在杭州的外国游客中有这么一家人，他们是来自澳大利亚的莫利一家。对于马云，这家人的杭州之行改变了他的生活。</p>
<p>戴维·莫利回忆道：“晚上自由活动的时候，我们在公园里玩火柴，一个男孩儿走过来和我们打招呼，他想锻炼一下自己新学的英语口语技能。他介绍了自己，我们互相寒暄了几句，约定之后再来这个公园碰面。” </p>
<p>戴维的父亲肯·莫利说他第一次见到马云时，还以为他是货郎，或者说街头小贩。“他非常想练习自己的英语，又很友善，我的几个孩子们都被他打动了。” </p>
<p>他们家与马云后来一直保持着联系，戴维说：“杭州一别后，我和他就成了笔友，一直就靠写信联系。这样过了几年后， 我爸爸打算帮助一下这个男孩了。”马云还定期与肯通信，称他为“父亲”。</p>
<p>马云的英语水平在不断提高，加之熟知杭州风情和悠久历史，又善于讲故事，于是他就找机会带领越来越多的外国游客游览西湖景点。他特别喜欢去杭州的茶馆，当地人会在茶馆里下象棋、打牌，以及听“大书”。</p>
</div>
</body>
</html>
9.css设计单页版式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设计中文版式</title>
<style type="text/css">
body {
background: #fff;
color: #000;
font-size: 0.875em;
font-family: "新宋体", Arial, Helvetica, sans-serif;
}
h1,
h2,
h3 {
text-align: center;
margin-bottom: 1em;
}
h2 {
color: #666;
text-decoration: underline;
}
h3 {
letter-spacing: 0.4em;
font-size: 1.4em;
}
p {
margin: 0;
line-height: 1.8em;
}
.first:first-letter {
font-size: 50px;
float: left;
margin-right: 6px;
padding: 2px;
font-weight: bold;
line-height: 1em;
background: #000;
color: #fff;
}
#quickSummary .p2 { text-align: right; }
#quickSummary .p1 { color: #444; }
#quickSummary .p1,
.p2,
.p3 { text-indent: 2em; }
#quickSummary {
margin-left: 4em;
margin-right: 4em;
}
a { color: #222; }
a:hover {
color: #000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="intro">
<div id="pageHeader">
<h1><span>CSS Zen Garden</span></h1>
<h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>展示以<acronym
title="cascading style sheets">CSS</acronym>技术为基础，并提供超强的视觉冲击力。只要选择列表中任意一个样式表，就可以将它加载到本页面中，并呈现不同的设计效果。</span></p>
<p class="p2"><span>下载<a title="这个页面的HTML源代码不能够被改动。"
href="#">HTML文档</a> 和 <a
title="这个页面的CSS样式表文件，你可以更改它。"
href="#">CSS文件</a>。</span></p>
</div>
<div id="preamble">
<h3><span>启蒙之路</span></h3>
<p class="p1 first"><span>不同浏览器随意定义标签，导致无法相互兼容的<acronym
title="document object model">DOM</acronym>结构，或者提供缺乏标准支持的<acronym
title="cascading style sheets">CSS</acronym>等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会一路坎坷。</span></p>
<p class="p2"><span>现在，我们必须清除以前为了兼容不同浏览器而使用的一些过时的小技巧。感谢<acronym
title="world wide web consortium">W3C</acronym>、<acronym
title="web standards project">WASP</acronym>等标准组织，以及浏览器厂家和开发师们的不懈努力，我们终于能够进入Web设计的标准时代。</span></p>
<p class="p3"><span>CSS Zen
Garden（样式表禅意花园）邀请您发挥自己的想象力，构思一个专业级的网页。让我们用慧眼来审视，充满理想和激情去学习CSS这个不朽的技术，最终使自己能够达到技术和艺术合而为一的最高境界。</span></p>
</div>
</div>
</body>
</html>
