1.前端零基础入门
步骤二：页面化妆师CSS
CSS文本样式
2-3
<html> <head lang="en"> <meta charset="UTF-8"> <title>font-familytitle> <style type="text/css"> h3{font-family: "宋体",serif;}style> head> <body> <h3>CSS样式表h3> <p style="font-family: '微软雅黑','隶书';"> CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 p> body>html>2-7
<html> <head lang="en"> <meta charset="UTF-8"> <title>font-sizetitle> <style type="text/css"> h3{ font-family: "宋体"; font-size: 2em; } p{ font-family: "微软雅黑"; font-size: 1.5em; } a{font-size: 1.5em;}style> head> <body> <div> <h3>web前端工程师h3> <p class="em"> <a href="#">Web前端开发工程师a>，主要职责是利用HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序(也就是浏览器端)的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 p> div> body>html>2-10
<html> <head lang="en"> <meta charset="UTF-8"> <title>colortitle> <style type="text/css"> div{font-size: 20px;} h3{ color: rgb(255,0,0); font-family: "宋体"; font-size: 1.5em; } p{font-family: "微软雅黑";} span{ color: #0000ff; font-size: 2em; }style> head> <body> <div> <h3>CSS层叠样式表h3> <p> <span>CSSspan>目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 p> div> body>html>2-15
<html><head> <meta charset="utf-8"> <title>title> <style type="text/css"> p{ color: blue; font-size: 2em; font-family: "微软雅黑"; } p.fontWeight{font-weight: bold;} p.fontStyle{font-style: italic;} p.fontVariant{font-variant: small-caps;}style>head><body> <p class="fontWeight">font-weight属性规定字体的粗细p> <p class="fontStyle">font-style属性规定字体的样式p> <p class="fontVariant">font-variant属性设置文本为小型大写字母p>body>html>2-19
<html><head> <meta charset="utf-8"> <title>title> <style type="text/css"> div.one{ color: red; font: italic small-caps bold 1em "微软雅黑"; } div.two{ color: blue; font-variant: small-caps; font-weight: bold; }style>head><body> <div class="one">Web前端攻城狮(Web front siege lion)div> <div class="two">CSS层叠样式表(Cascading Style Sheets)div>body>html>3-4
<html><head> <meta charset="utf-8"> <title>title> <style type="text/css"> div.image{text-align: right;} div.text{text-align: center;}style>head><body> <div class="image"><img src="http://climg.mukewang.com/58c137930001b08102000065.jpg" />div> <div class="text">慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、使用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供一个迅速提升技能、共同分享进步的学习平台。div>body>html>3-6
<html> <head lang="en"> <meta charset="UTF-8"> <title>line-height属性title> <style type="text/css"> p{ font-family: "微软雅黑"; text-indent: 2em; } p.p1{ color: orange; line-height: 20px; } p.p2{ color: green; line-height: 1.5em; } p.p3{ color: red; line-height: 200%; }style> head> <body> <div> <h2>1.《三体》h2> <p class="p1">《三体》是刘慈欣创作的系列长篇科幻小说，由《三体》、《三体Ⅱ•黑暗森林》、《三体Ⅲ•死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。p> div> <div> <h2>2.《盗墓笔记》h2> <p class="p2">《盗墓笔记》系列是南派三叔的代表作，其堪称近年来中国出版界的经典之作，获得百万读者狂热追捧。南派三叔也凭此作名满天下，跻身中国超级畅销书作家行列。p> div> <div> <h2>3.《福尔摩斯侦探小说全集》h2> <p class="p3">本套书分为上中下三卷，主要章节包括了上卷：血字分析、第一部 原陆军军医部医学博士约翰•H•华生回忆录、第二部 圣徒的故园、四签名、冒险史、巴斯克维尔的猎犬；中卷：回忆录、福尔摩斯的归来；下卷：最后奉献、恐怖谷、第一部 伯尔斯通的悲剧、第二部 亡命党徒、新探索详细内容。p> div> body>html>3-12
<html> <head> <meta charset="UTF-8"> <title>vertical-aligntitle> <style type="text/css"> *{padding:0px;margin: 0px;} .warp1{ height:80px; width: 100%; background-color: #14191e; } .warp1 h1{ color:#fff; text-align: center; line-height: 80px; font-size: 24px; } .warp2{ height:400px; width: 100%; border:1px #14191e solid; display: table; } .content{ display: table-cell; vertical-align: middle; } .content p{ width:500px; font-family: "微软雅黑"; margin:0 auto; line-height: 1.5em; font-size: 14px; }style> head><body> <div class="warp1"> <h1>欢迎来到慕课网h1> div> <div class="warp2"> <div class="content"> <p>慕课网，只学有用的！p> <p>慕课网(IMOOC)是IT技能学习平台。慕课网(IMOOC)提供了丰富的移动端开发、php开发、web前端、android开发以及html5等视频教程资源公开课。并且富有交互性及趣味性，你还可以和朋友一起编程。p> div> div> body>html>3-14
<html> <head lang="en"> <meta charset="UTF-8"> <title>文本样式title> <style type="text/css"> div{ color: red; line-height: 2em; text-indent: 2em; } span{ font-weight: bold; color: green; text-transform: uppercase; word-spacing: 0.5em; text-decoration: underline; }style> head> <body> <div> HTML是超文本标记语言，是<span>HyperText Markup Languagespan>的缩写，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准 它通过标记符号来标记要显示的网页中的各个部分。 div> body>html>4-2
<html> <head lang="en"> <meta charset="UTF-8"> <title>文本样式title> <style type="text/css"> h3{color: green;} a{ color: #009; text-decoration: none; } span{color: orange;}style> head> <body> <h3>大话西游之大圣娶亲的影评h3> <div class="key"> <a href="#">热门a>/<a href="#">最新a>/<a href="#">好友a> div> <hr /> <div class="content"> <div> <p><a href="#">罗弘霉素a> <span>★★★★★span> 2010-07-26p> <p>有人跟我比赛背台词么p> <p>阅读：1615 <a href="#">有用a>p> div> <hr /> <div> <p><a href="#">十七只猫和鱼a> <span>★★★★span> 2006-04-26p> <p>任何时候任何场合都可以再看一遍的电影p> <p>阅读：515 <a href="#">有用a>p> div> <hr /> <div> <p><a href="#">暖家男a> <span>★★★★span> 2006-04-22p> <p>一定有一些电影 永远都不能被超越p> <p>阅读：490 <a href="#">有用a>p> div> <hr /> div> body>html>4-3
<html> <head lang="en"> <meta charset="UTF-8"> <title>文本样式title> <style type="text/css"> div{ text-align: center; background-color: #eee; font-size: 2em; line-height: 5em; } img,span{ vertical-align: middle; } .font{font-size: 2em;} .word{ color: red; text-decoration: underline; }style> head> <body> <div> <img src="http://climg.mukewang.com/59c21bae000157fa01000059.jpg"> <span class="font">CSS层叠样式表span> <span class="word">(Cascading Style Sheets)span> div> body>html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
