html&&html5（2）

来源：互联网发布：如何备份iphone数据编辑：程序博客网时间：2024/06/05 00:49

Css3 强大选择器

1.关系选择器(层次选择器):

              后代元素 E F 匹配作为所有作为 E元素后代的 F元素
              儿子元素 par>son 匹配 par 元素的子级 son 元素
              相邻元素 E+F 匹配紧贴着 E 元素的 F 元素
              兄弟元素 E~F 匹配 E 后面所有同级别 F 元素

2.属性选择器(用在表单里比较多)

E[属性名] 含有某属性的元素

E[属性名=值] 某属性=某值的元素

        3.伪类选择器
              E:first-child 匹配作为第 1 个子元素的元素
              E E:last-child 匹配作为最后一个子元素的元素
              E E:nth-child(N) 匹配作为第 N 个子元素的元素 E

        4.伪对象选择器人为的伪造出来的对象,本身没有这个对象
              E::before 设置 E 元素前面的内容
              E::after 设置 E 元素后面的内

应用：

伪造对象清除浮动：

#main::after { content: ''; display: block; width: 0px; height: 0px; clear: both; }

min-height:400px;[min-width]

刚开始可以给父元素一个最小高,内容再少,也是400px ；

内容多会自动撑开父元素 max-height [max-width] ；

那如何选中最后一个article article元素且是最后一个article类型的元素 -> last-of-typ

border-radius：10px;

手写网页实战

第一步：div+css

div切出分区填充标签head body hearder nav main footer lside rside ； css 控制大小 style设置；

第二步：导航制作

nav {    height: 60px;    background: #222; }
nav ul {    width: 1100px;    height: 60px;    margin: 0px auto; }
nav li {    float: left; }
#nav1 {    background: #3f3f3f; }

nav a { color: white; display: block; width: 74px; height: 60px; font-size: 15px; line-height: 60px; padding-left: 20px; }
nav a:hover { background: #3f3f3f; }

第三步： main 区域

第四步： lside rside main 等区域

第五步：基线

div { width: 200px; height: 80px; background: pink; text-align: center; line-height: 80px; }

第六步:图标字体

1.打开官网,复制直接引用字体,看是否可行 http://fortawesome.github.io/Font-Awesome/ 打开 -> icons
<i class="fa fa-hourglass-start"></i

页面 -> 引入外部 awesome字体页面内设置: font-family:awesome; 页面内部调用 -> 气泡 -> 浏览器显示这个气泡字体

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),

url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0')

format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

</head> <body> <div></div> </body>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head>
<body> <i class="fa fa-hand-paper-o">我是图标</i> </body> </html>

awesome字体实际运用到中
.catlink::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f07c"; }
.comment::before { font-family: 'FontAwesome'; padding: 0px 4px; content: "\f075"; }
<span><a href="#" class="catlink">闲谈随笔</a></span> <span><a href="#" class="comment">9条评论</a></span>

教程：：

观察小图标,既不是背景图,也不是图片.其实是个字 twitter团队开发的常用图标效果,用图片或者背景图来做(不方便) 所以他们就做了一种独特的字,是个特殊的字体
1.打开官网,复制直接引用字体,看是否可行 http://fortawesome.github.io/Font-Awesome/ 打开 -> icons
<i class="fa fa-hourglass-start"></i>

首先这是一种字体,我们机器上没有这种字体但是你要求来你网站看的人,都有这种字体吗?不是的 css允许我们引入外部字体页面 -> 引入外部 awesome字体页面内设置: font-family:awesome; 页面内部调用 -> 气泡 -> 浏览器显示这个气泡字体

显示awesome字体: 1)css,引入外部awesome字体 2)写图标文字 3)声明文字使用awesome字体 font-family
下载awesome字体 -> 解压 -> 只需要fonts目录 css如何引入外部文字: 字体有多种格式,它用src引入了不同格式的文字,为了保证各种浏览器都能适应,可以使用这套文字
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
字符的unicode码 http://fortawesome.github.io/Font-Awesome/cheatsheet/
每一个字符,都有独特的unicode码使用字符的unicode码来引用这个字符
<style>    div {        font-family: 'FontAwesome';    } </style> </head> <body>    <div></div> </body>
利用伪对象选择器,在a标签[9条评论]前加上小图标注意:在css中写,跟标签中写法不同,同样是16进制标签中是 &#xf css中是 \f
<style>    div {        font-family: 'FontAwesome';    }
    a::before {        font-family: 'FontAwesome';        content: "\f042";    } </style> </head> <body>    <div></div>    <a href="#">9条评论</a> </body> </html>
推特工程师对这400多个图片,早已经写好了400多个类在元素的::before 加上这个图标文字 http://fortawesome.github.io/Font-Awesome/get-started/
在head标签中直接引入这个css即可看一个这个类干了些什么 -> 类名::before{content:''}; 所有的图标: http://fortawesome.github.io/Font-Awesome/icons/
<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> </head>
<body>    <i class="fa fa-hand-paper-o">我是图标</i> </body> </html>

并不一定要用i标签,只要在标签中加入这个类就可以使用
<body>    <i class="fa fa-hand-paper-o">我是小手</i>    <a href="#" class="fa fa-comment">9条评论</a> </body>
awesome字体实际运用到blog中
.catlink::before {    font-family: 'FontAwesome';    padding: 0px 4px;    content: "\f07c"; }
.comment::before {    font-family: 'FontAwesome';    padding: 0px 4px;    content: "\f075"; }
<span><a href="#" class="catlink">闲谈随笔</a></span> <span><a href="#" class="comment">9条评论</a></span>

0 0