我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点css图文混排，css图片布局，css多图版式，css设置圆角栏目，css设计个人简历1，css设计个人简历2
1.css图文混排
<!doctype html>
<html>
<head>
<title>中国的传统节日</title>
<style type="text/css">
<!--
body { background-color: #d8c7b4;/* 页面背景色 */ }
p { font-size: 13px;/* 段落文字大小 */ }
p.title1 {/* 左侧标题 */
text-decoration: underline;/* 下划线 */
font-size: 18px;
font-weight: bold;/* 粗体*/
text-align: left;/* 左对齐 */
color: #59340a;/* 标题颜色 */
}
p.title2 {/* 右侧标题 */
text-decoration: underline;
font-size: 18px;
font-weight: bold;
text-align: right;
color: #59340a;
}
p.content {/* 正文内容 */
line-height: 1.2em;/* 正文行间距 */
margin: 0px;
}
img { border: 1px solid #664a2c;/* 图片边框 */ }
img.pic1 {
float: left;/* 左侧图片混排 */
margin-right: 10px;/* 图片右端与文字的距离 */
margin-bottom: 5px;
}
img.pic2 {
float: right;/* 右侧图片混排 */
margin-left: 10px;/* 图片左端与文字的距离 */
margin-bottom: 5px;
}
span.first {/* 首字放大 */
font-size: 60px;
font-family: 黑体;
float: left;
font-weight: bold;
color: #59340a;/* 首字颜色 */
}
-->
</style>
<meta charset="utf-8">
</head>
<body>
<img src="//freemuban.com/img/demo1.jpg" class="pic2">
<p><span class="first">中</span>国的传统节日形式多样，内容丰富，是我们中华民族悠久的历史文化的一个组成部分。传统节日的形成过程，是一个民族或国家的历史文化长期积淀凝聚的过程，下面列举的这些节日，无一不是从远古发展过来的，从这些流传至今的节日风俗里，还可以清晰地看到古代人民社会生活的精彩画面。</p>
<p class="title1">春节</p>
<img src="//freemuban.com/img/demo2.jpg" class="pic1">
<p class="content">春节是我国一个古老的节日，也是全年最重要的一个节日，如何过庆贺这个节日，在千百年的历史发展中，形成了一些较为固定的风俗习惯，有许多还相传至今。扫尘：“腊月二十四，掸尘扫房子” 。贴春联：每逢春节，无论城市还是农村，家家户户都要精选一幅大红春联贴于门上，为节日增加喜庆气氛。贴窗花和倒贴“福”字：在民间人们还喜欢在窗户上贴上各种剪纸——窗花。窗花不仅烘托了喜庆的节日气氛，也集装饰性、欣赏性和实用性于一体。剪纸在我国是一种很普及的民间艺术，千百年来深受人们的喜爱，因它大多是贴在窗户上的，所以也被称其为“窗花”。在贴春联的同时，一些人家要在屋门上、墙壁上、门楣上贴上大大小小的“福”字。守岁：除夕守岁是最重要的年俗活动之一，守岁之俗由来已久。拜年：新年的初一，人们都早早起来，穿上最漂亮的衣服，打扮得整整齐齐，出门去走亲访友，相互拜年，恭祝来年大吉大利。拜年的方式多种多样，有的是同族长带领若干人挨家挨户地拜年；有的是同事相邀几个人去拜年。</p>
<p class="title2">清明节</p>
<img src="//freemuban.com/img/demo1.jpg" class="pic2">
<p class="content">清明是我国的二十四节气之一。由于二十四节气比较客观地反映了一年四季气温、降雨、物候等方面的变化，所以古代劳动人民用它安排农事活动。《淮南子?天文训》云:“春分后十五日，斗指乙，则清明风至。”按《岁时百问》的说法：“万物生长此时，皆清洁而明净。故谓之清明。”清明一到，气温升高，雨量增多，正是春耕春种的大好时节。故有“清明前后，点瓜种豆”、“植树造林，莫过清明”的农谚。可见这个节气与农业生产有着密切的关系。清明节是我国传统节日，也是最重要的祭祀节日，是祭祖和扫墓的日子。扫墓俗称上坟，祭祀死者的一种活动。汉族和一些少数民族大多都是在清明节扫墓。清明节，英文标准译名：Tomb-sweeping Day或者Pure Brightness。是中国的二十四节气之一，每年的阳历四月五日。（此节日现已列入国假3天）。由于二十四节气比较客观地反映了一年四季气温、降雨、物候等方面的变化，所以古代劳动杜牧的《清明》人民用它安排进行农事活动。《淮南子·天文训》云：“春分后十五日，斗指乙，则清明风至。”按《岁时百问》的说法：“万物生长此时，皆清洁而明净。故谓之清明。”清明一到，气温升高，雨量增多，正是春耕春种的大好时节。故有“清明前后，种瓜点豆”、“植树造林，莫过清明”的农谚。可见这个节气与农业生产有着密切的关系。 </p>
<p class="title1">中秋节</p>
<img src="//freemuban.com/img/demo2.jpg" class="pic1">
<p class="content">每年农历八月十五日，是传统的中秋佳节。这时是一年秋季的中期，所以被称为中秋。在中国的农历里，一年分为四季，每季又分为孟、仲、季三个部分，因而中秋也称仲秋。八月十五的月亮比其他几个月的满月更圆，更明亮，所以又叫做“月夕”，“八月节”。此夜，人们仰望天空如玉如盘的朗朗明月，自然会期盼家人团聚。远在他乡的游子，也借此寄托自己对故乡和亲人的思念之情。所以，中秋又称“团圆节”。因中秋节的主要活动都是围绕“月”进行的，所以又俗称“月节”、“月夕”、“追月节”、“玩月节”、“拜月节”；在唐朝，中秋节还被称为“端正月”。中秋节的盛行始于宋朝，至明清时，已与元旦齐名，成为我国的主要节日之一。关于中秋节的起源，大致有三种：起源于古代对月的崇拜、月下歌舞觅偶的习俗，古代秋报拜土地神的遗俗。为传承民族文化，增强民族凝聚力， 中秋节从2008年起被国务院列为国家法定节假日。国家非常重视非物质文化遗产的保护，2006年5月20日，该节日经国务院批准列入第一批国家级非物质文化遗产名录。 </p>
<p class="title2">重阳节</p>
<img src="//freemuban.com/img/demo1.jpg" class="pic2">
<p class="content"> 农历九月九日，为传统的重阳节。因为古老的《易经》中把“六”定为阴数，把“九”定为阳数，九月九日，日月并阳，两九相重，故而叫重阳，也叫重九，古人认为是个值得庆贺的吉利日子，并且从很早就开始过此节日。九九重阳，因为与“久久”同音，九在数字中又是最大数，有长久长寿的含意，况且秋季也是一年收获的黄金季节，重阳佳节，寓意深远，人们对此节历来有着特殊的感情，唐诗宋词中有不少贺重阳，咏菊花的诗词佳作。在1989年，我国把每年的九月九日定为老人节。“重阳节”名称见于记载却在三国时代。据曹丕《九日与钟繇书》中载：“岁往月来，忽复九月九日。九为阳数，而日月并应，俗嘉其名，以为宜于长久，故以享宴高会。”到了魏晋时期有了赏菊、饮酒的习俗，这在陶渊明的作品中有所体现。 唐朝时，重阳节才被定为正式节日。从此以后，宫廷、民间一起庆祝重阳节，并且在节日期间进行各种各样的活动。到了明代，九月重阳，皇宫上下要一起吃花糕庆祝，皇帝要亲自到万岁山登高，以畅秋志。到了清代，这种风俗依旧盛行。 </p>
<p class="title1">元宵节</p>
<img src="//freemuban.com/img/demo2.jpg" class="pic1">
<p class="content"> 每年农历的正月十五日，春节刚过，迎来的就是中国的传统节日--元宵节。
正月是农历的元月，古人称夜为“宵”，所以称正月十五为元宵节。正月十五日是一年中第一个月圆之夜，也是一元复始，大地回春的夜晚，人们对此加以庆祝，也是庆贺新春的延续。元宵节又称为“上元节”。
按中国民间的传统，在这天上皓月高悬的夜晚，人们要点起彩灯万盏，以示庆贺。出门赏月、燃灯放焰、喜猜灯谜、共吃元宵，合家团聚、同庆佳节，其乐融融。
元宵节也称灯节，元宵燃灯的风俗起自汉朝，到了唐代，赏灯活动更加兴盛，皇宫里、街道上处处挂灯，还要建立高大的灯轮、灯楼和灯树，唐朝大诗人卢照邻曾在《十五夜观灯》中这样描述元宵节燃灯的盛况“接汉疑星落，依楼似月悬。” </p>
<p class="title2">端午节</p>
<img src="//freemuban.com/img/demo1.jpg" class="pic2">
<p class="content">农历五月初五，是中国民间的传统节日——端午节，它是中华民族古老的传统节日之一。端午也称端五，端阳。过端午节，各地有着不尽相同的习俗，如给小孩涂雄黄，饮用雄黄酒、菖蒲酒，吃五毒饼、咸蛋、粽子和时令鲜果等，除了有迷信色彩的活动渐已消失外，其余至今流传中国各地及邻近诸国。有些活动，如赛龙舟等，已得到新的发展，突破了时间、地域界线，成为了国际性的体育赛事。纪念屈原
此说最早出自南朝梁代吴均《续齐谐记》和南朝宗懔《荆楚岁时记》。据说，屈原投汨罗江后，当地百姓闻讯马上划船捞救，一直行至洞庭湖，始终不见屈原的尸体。那时，恰逢雨天，湖面上的小舟一起汇集在岸边的亭子旁。当人们得知是为了打捞贤臣屈大夫时，再次冒雨出动，争相划进茫茫的洞庭湖。为了寄托哀思，人们荡舟江河之上，此后才逐渐发展成为龙舟竞赛。百姓们又怕江河里的鱼吃掉他的身体，就纷纷回家拿来米团投入江中，以免鱼虾糟蹋屈原的尸体，后来就成了吃粽子的习俗。看来，端午节吃粽子、赛龙舟与纪念屈原相关，有唐代文秀《端午》诗为证：“节分端午自谁言，万古传闻为屈原。堪笑楚江空渺渺，不能洗得直臣冤。”</p>
</body>
</html>
2.css图片布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片布局</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
width: 430px;
padding-left: 30px;
}
.one .left {
float: left;
width: 85px;
height: 30px;
margin-top: 10px;
}
.one .right {
float: right;
width: 345px;
border-bottom: #CCCCCC 1px dashed;
height: 35px;
margin-bottom: 15px;
}
.two .left {
float: left;
width: 120px;
height: 85px;
}
.two .right {
float: right;
width: 280px;
height: 85px;
padding-left: 30px;
}
.two .left img {
border: #FF3300 1px solid;
margin-left: 5px;
}
h3 {
color: #FF0000;
padding-bottom: 10px;
font-size: 16px;
}
ul {
padding-left: 10px;
font-size: 14px;
}
li { padding-bottom: 5px; }
</style>
</head>
<body>
<div class="container">
<div class="one">
<div class="left"> <img src="//freemuban.com/img/20200417001.jpg"> </div>
<div class="right"> </div>
</div>
<div class="two">
<div class="left"> <img src="//freemuban.com/img/20200417002.jpg"> </div>
<div class="right">
<h3>性感透视衫席卷8月街头</h3>
<ul>
<li>明星来示范 早秋穿搭有新招</li>
<li>时尚女生2011早秋的色调搭</li>
<li>秋风起 最潮手袋购入必读美容</li>
</ul>
</div>
</div>
<div class="one">
<div class="left"> <img src="//freemuban.com/img/20200417003.jpg"> </div>
<div class="right"> </div>
</div>
<div class="two">
<div class="left"> <img src="//freemuban.com/img/20200417004.jpg"> </div>
<div class="right">
<h3>海滩度假造型 成就假期摩登女郎</h3>
<ul>
<li>9款网友口碑超赞的滋润面霜</li>
<li>艺术家眼妆演绎迪斯尼经典</li>
<li>6大恶习 让你白不回来！</li>
</ul>
</div>
</div>
<div class="one">
<div class="left"> <img src="//freemuban.com/img/20200417005.jpg"> </div>
<div class="right"> </div>
</div>
<div class="two">
<div class="left"> <img src="//freemuban.com/img/20200417006.jpg"> </div>
<div class="right">
<h3>夏日随心搭</h3>
<ul>
<li>热销男士洁面排行榜TOP10</li>
<li>达人晒其家当 超范超给力</li>
<li>左手团购 右手返利</li>
</ul>
</div>
</div>
<div class="one">
<div class="left"> <img src="//freemuban.com/img/20200417007.jpg"> </div>
<div class="right"> </div>
</div>
<div class="two">
<div class="left"> <img src="//freemuban.com/img/20200417008.jpg"> </div>
<div class="right">
<h3>店主清新文艺风美搭</h3>
<ul>
<li>年中大促PK 22款秒杀单品</li>
<li>潮流掌控 今夏最宠粗跟鞋</li>
<li>50元以下潮包大集合 超美</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3.css多图版式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多图排列</title>
<style>
body {
margin: 20px;
padding: 0;
text-align: center;
}
.container {
width: 800px;
height: 240px;
background-image: url('//freemuban.com/img/20200417bg.jpg');
background-repeat: repeat-x;
border: 2px #aaa solid;
}
.container div { float: left; }
.one {
margin-top: 30px;
margin-left: 35px;
}
.container p {
font-size: 20px;
margin-top:6px;
font-family: 黑体;
}
a {
text-decoration: none;
color: #204402;
}
a img { border: 0; border: 2px #666 solid; }
a:hover {
text-decoration: underline;
color: red;
}
a:hover img { border: 2px red solid; }
</style>
</head>
<body>
<div class="container">
<div class="one"><a href="#"><img src="//freemuban.com/img/202004171.jpg">
<p>老虎</p>
</a></div>
<div class="one"><a href="#"><img src="//freemuban.com/img/202004172.jpg">
<p>大熊猫</p>
</a></div>
<div class="one"><a href="#"><img src="//freemuban.com/img/202004173.jpg">
<p>大象</p>
</a></div>
<div class="one"><a href="#"><img src="//freemuban.com/img/202004174.jpg">
<p>野马</p>
</a></div>
</div>
</body>
</html>
4.css圆角栏目
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {/*定义页面中所有标签的统一样式*/
margin: 0;
padding: 0;
font-size: 12px;
text-align: center;
}
body { background: #d3d3d3; /*页面背景色*/ }
.container {
width: 844px;
margin: 0 auto; /*居中显示*/
}
.bgimg {
width: 840px;
border: 2px #fff solid; /*给header部分图片定义2px宽的边框*/
}
.lanmu {
width: 416px;
height: 250px;
float: left;
margin: 2px;
border: 1px solid;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.bcolor1 {
border-color: #C146A4;
border-top-left-radius: 16px;
}
.bcolor2 {
border-color: #31639F;
border-top-right-radius: 16px;
}
.bcolor3 {
border-color: #EEA92A;
border-bottom-left-radius: 16px;
}
.bcolor4 {
border-color: #F36F5A;
border-bottom-right-radius: 16px;
}
.headline img {
width: 100%;
height: 33px;
}
h3 {
padding: 20px 30px;
font-size: 16px;
color: #000066;
text-align: left;
}
ul { padding-left: 40px; }
li {
text-align: left;
list-style: disc;
line-height: 1.8em;
}
.more {
text-align: right;
padding-right: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class=”header”><img class="bgimg" src="//freemuban.com/img/202017bg.jpg"></div>
<div class="main">
<div class="lanmu bcolor1">
<div class="headline"><img src="//freemuban.com/img/202017bg1.gif"></div>
<div>
<h3>散文随笔</h3>
<ul class="topic">
<li>[生活感悟] 多年后，我们或许会嫁给这样的他 </li>
<li>[生活感悟] 从今以后，试着做个这样的人</li>
<li>[生活感悟] 人最大的不幸，就是不知道自己是幸福的</li>
<li>[生活感悟] 人生至境是不争 恬静出尘心自宁 </li>
<li>[生活感悟] 没有如意的生活，只有看开的人生</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu bcolor2">
<div class="headline"><img src="//freemuban.com/img/202017bg2.gif"></div>
<div>
<h3>心情驿站</h3>
<ul class="topic">
<li>什么是随和？随和是一种素质和修养，是淡泊名利时的超然</li>
<li>快乐是自己的事情,只要愿意,你可以随时调换手中的遥控器</li>
<li>如果我是一个从前的哲人，来到今天的世界，我会怀念什么</li>
<li>男孩的父亲对即将恋爱的儿子说的话 </li>
<li>总有一种平凡，叫人泪流满面——白芳礼 </li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu bcolor3">
<div class="headline"><img src="//freemuban.com/img/202017bg3.gif"></div>
<div>
<h3>名家名作</h3>
<ul class="topic">
<li>[励志格言] 相信自己一定能行</li>
<li>一切困难都是为了让我们更强大</li>
<li>巴菲特:人一生中最重要的是专注</li>
<li>靠山山会倒，靠人人会跑，只有自己可靠。</li>
<li>与其用泪水悔恨今天，不如用汗水拼搏今天</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu bcolor4">
<div class="headline"><img src="//freemuban.com/img/202017bg4.gif"></div>
<div>
<h3>校园文章</h3>
<ul class="topic">
<li>献给学生生涯里的每一个同桌们 </li>
<li>情人节，要向暗恋了多年的人表白</li>
<li>人与人之间的差距，是从大学开始拉大的 </li>
<li>叶子的离去,是风的追求,还是树的不挽留</li>
<li>美术生走在淡淡金色的黄昏</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
5.css设计个人简历1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #423949;
text-align: center;
}
#info {
background: url(//freemuban.com/img/1614bg1.gif) no-repeat center;
width: 893px;
height: 384px;
position: relative;
margin: 6px auto;
padding-top: 36px;
text-align: left;
}
html>/**/body #info {
height: 405px;
padding-top: 15px;
}
#info h1 {
position: absolute;
right: 180px;
top: 60px;
color: #FFF;
font-family: "幼圆";
font-size: 46px;
}
#info h2 img {
position: absolute;
right: 205px;
top: 160px;
width: 120px;
padding: 2px;
background: #fff;
border-bottom: solid 2px #888;
border-right: solid 2px #444;
}
#info dl {
margin-left: 70px;
margin-top: 20px;
font-size: 12px;
color: #A8795B;
}
#info h3 {
margin-top: 6px;
font-size: 12px;
}
#info dt {
float: left;
clear: left;
margin-top: 6px;
width: 60px;
background: url(//freemuban.com/img/1614dou.gif) no-repeat 36px center;
}
#info dd { margin-top: 6px; }
.top { margin-top: 42px!important; }
</style>
</head>
<body>
<div id="info">
<h1>个人简历</h1>
<h2><img src="//freemuban.com/img/1614header.jpg" alt="张三的头像" title="张三"></h2>
<dl>
<h3>基本信息</h3>
<dt>姓名</dt>
<dd>张三</dd>
<dt>性别</dt>
<dd>田力</dd>
<dt>年龄</dt>
<dd>大男</dd>
<dt>地址</dt>
<dd>北京京北</dd>
</dl>
<dl class="top">
<h3>联系信息</h3>
<dt>QQ</dt>
<dd>111111111</dd>
<dt>Email</dt>
<dd>zhangsan@163.com</dd>
<dt>Tel</dt>
<dd>13512345678</dd>
<dt>HTTP</dt>
<dd>http://www.mysite.cn/</dd>
</dl>
<dl class="top">
<h3>专业信息</h3>
<dt>英语</dt>
<dd>5.4级</dd>
<dt>职称</dt>
<dd>98级程序员</dd>
<dt>技术</dt>
<dd>HTML、CSS、JavaScript幼儿版</dd>
<dt>特长</dt>
<dd>PHP.MYSQL</dd>
</dl>
</div>
</body>
</html>
6.css设计个人简历2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #CEAE71;
text-align: center;
}
#info {
background: url(//freemuban.com/img/1615bg.jpg) no-repeat center;
width: 944px;
height: 582px;
margin: 6px auto;
padding-top: 36px;
text-align: left;
}
#info h1 {
color: #333;
font-family: "幼圆";
font-size: 46px;
float: left;
margin: 260px 0 0 230px;
}
* html #info h1 { margin: 260px 20px 0 160px; }
#info h2 { display: none; }
#info dl {
margin-right: 200px;
margin-top: 130px;
float: right;
clear: right;
font-size: 12px;
color: #695200;
width: 240px;
}
* html #info dl {
margin-left: 60px;
margin-right: 144px;
}
#info h3 {
font-size: 12px;
margin-top: 6px;
}
#info dt {
float: left;
clear: left;
width: 50px;
background: url(//freemuban.com/img/1614dou.gif) no-repeat 32px center;
}
#info dd { margin-top: 2px; }
.top { margin-top: 0!important; }
</style>
</head>
<body>
<div id="info">
<h1>个人简历</h1>
<h2><img src="//freemuban.com/img/1614header.jpg" alt="张三的头像" title="张三"></h2>
<dl>
<h3>基本信息</h3>
<dt>姓名</dt>
<dd>张三</dd>
<dt>性别</dt>
<dd>田力</dd>
<dt>年龄</dt>
<dd>大男</dd>
<dt>地址</dt>
<dd>北京京北</dd>
</dl>
<dl class="top">
<h3>联系信息</h3>
<dt>QQ</dt>
<dd>111111111</dd>
<dt>Email</dt>
<dd>zhangsan@163.com</dd>
<dt>Tel</dt>
<dd>13512345678</dd>
<dt>HTTP</dt>
<dd>http://www.mysite.cn/</dd>
</dl>
<dl class="top">
<h3>专业信息</h3>
<dt>英语</dt>
<dd>5.4级</dd>
<dt>职称</dt>
<dd>98级程序员</dd>
<dt>技术</dt>
<dd>HTML、CSS、JavaScript幼儿版</dd>
<dt>特长</dt>
<dd>PHP MYSQL JQUERY</dd>
</dl>
</div>
</body>
</html>
