CSS3 新特性

1.新增选择器

1.1属性选择性

image.png

image.png

image.png
image.png
image.png
image.png

image.png

1.2伪类结构选择器

image.png
image.png

image.png

image.png

image.png
image.png

//选偶数行或者奇数行


image.png

image.png
image.png

//公式


image.png

image.png

//


image.png

image.png

image.png

前n个和后n个


image.png
image.png

image.png

//


image.png

区别：
image.png

nth-child(1)效果:哪个都没有选上


image.png

nth-of-type(1)效果：将熊大选上
image.png
image.png

image.png

小结：


image.png
image.png

1.3 伪元素选择器

image.png

image.png
image.png

image.png

伪元素使用场景

image.png

image.png
image.png
image.png

给图片加上罩层：


image.png

image.png

image.png

image.png

伪元素使用场景：清除浮动
1.额外标签


image.png

2.伪元素清除浮动
写法一、


image.png

image.png

写法二、


image.png

image.png

css盒子模型

image.png

image.png

image.png
image.png

image.png

p标签的盒子不会被撑开

css3其他属性

filter滤镜

image.png

image.png
image.png
image.png

其他特性

image.png

需求：子盒子永远比父盒子宽度小30px；


image.png

image.png

image.png

过渡（transition）

image.png
image.png

image.png

image.png

image.png

想要样式都改变：


image.png
image.png

image.png

案例：进度条


image.png

image.png

image.png

image.png

image.png

image.png

项目：
1.准备工作：
1.1.图标：


image.png

再在index.html引入文件
1.2.符合SEO搜索


image.png

1.2.1网站title
image.png

1.2.2网站说明
image.png

1.2.3关键字


image.png

image.png

2.首页制作
2.1常用模板命名：
image.png

2.2快捷导航shortcut制作
image.png

image.png

image.png

第二header：
image.png

logo SEO优化：


image.png

注意：
image.png

搜索框
image.png

image.png
image.png

热词部分：


image.png

image.png

购物车：


image.png

image.png

image.png

image.png

nav导航模块：

image.png
image.png
image.png

footer底部模块

footer第一部分：服务信息

image.png
image.png

先放一个大的footer盒子，再放.mod_service盒子80px高，
给了一个下边框，里面有四个小li浮动起来，
每个小li分左右两部分，左边h5放图标，右边放一个div，叫service_txt，
上放h4文字，右下放p段落


image.png

image.png

image.png

footer第二部分：帮助信息部分

image.png

先放一个大的mod_help盒子，有底边框，然后里面放6个列表dl，清除浮动使之在同一行；最后一个列表宽度为80px；每个dl里面有dt和dd。


image.png

image.png

footer第三部分：版权信息

image.png

image.png

image.png

main模块：

image.png

image.png

左侧轮播：

暂时先只放图片：设置一个div，把图片当背景放进去


image.png

image.png

右侧newsflash新闻快报模块：

分为上中下三个部分，分别设置不同的高度即可


image.png

“上”：news新闻快报模块

image.png

1号盒子又分成左右两个盒子


image.png

image.png

生活服务模块：


image.png

一个div盒子里面ul放了12个小li，12个小li，4个一行排放，最后一个超出div盒子右边界，使用overflow：hidden将多余的部分切掉即可
image.png

今日推荐

image.png

一个大的div分左右两个盒子，1号盒子确定好高、宽，直接用图片替换掉内容；2号盒子里面装了4个li，再把对应图片替换


image.png

image.png

image.png
image.png
image.png

image.png

image.png

image.png

image.png
image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 10-CSS3新特性
    CSS3简介 CSS3的现状 浏览器支持程度差，需要添加 私有前缀 ； 移动端支持优于PC端； 不断改进中； 应用...
    magic_pill阅读 821评论 0赞 1
  • HTML5和CSS3新特性一览
    HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构： 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,838评论 0赞 4
  • No.16 CSS3新特性
    一、属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 选择符描述E...
    testleaf阅读 431评论 1赞 9
  • css3 新特性 最新总结
    一、选择器 CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 eleme...
    johnnie_wang阅读 1,172评论 3赞 17
  • h5和css3新特性汇总
    HTML5 新的特殊内容元素 增加的标签及描述 -----------定义页面独立的内容区域。 ---------...
    Mr无愧于心阅读 1,644评论 0赞 2