30个html+CSS和html5动画经典案例

4.淘宝商品展示

 

                                   30个html+CSS和html5动画经典案例_第1张图片

代码部分:



  
    
    
    
    产品展示
    
  
  
    
图片

快速煮水,安心使用

需要注意的地方:

1.设置块间距如图片 按钮等

30个html+CSS和html5动画经典案例_第2张图片  30个html+CSS和html5动画经典案例_第3张图片

 

 2.边框三要素颜色、线条类型、线条像素值缺一不可.否则边框无法显示。

color: white; border-radius: 3px;

运行效果如图所示:30个html+CSS和html5动画经典案例_第4张图片

 试用场景:淘宝商品展示。橱窗展示。

5.html+css实战小案例,CSS小米商城首页侧边导航栏效果

30个html+CSS和html5动画经典案例_第5张图片

代码部分:



  
    
    
    
    侧边栏
    
  
  
    
    
  

需要注意的地方:

 .menu ul li a{
        /* 设置块元素,目的是为了让a标签占据整行 */
        display: block;
        /* 文字首行缩进2个字 加字 */
        text-indent: 2em;
        background-image: url('5箭头.png');
        background-repeat: no-repeat;
        background-position: 255px;
      }

运行效果

 应用场景;左侧菜单,二级菜单导航栏下拉列表

6.第五节:html+css实战小案例,不定向水平居中解决方案开发精美分页效果

代码部分




    
    
    
    分页效果
    


    
<1 2 3 4 5 ... 100 >

运行效果:

30个html+CSS和html5动画经典案例_第6张图片

 需要注意的地方:

30个html+CSS和html5动画经典案例_第7张图片

30个html+CSS和html5动画经典案例_第8张图片

 在编译过程中浏览器会默认把回车空格进行编译

解决办法:

30个html+CSS和html5动画经典案例_第9张图片

应用场景:进行分页设置 

7.CSS打造精美选项卡菜单效果

代码部分:




    
    
    
    css打造精美选项卡
    



        
备孕期间 怀孕 0-1岁 1-2岁 2-3岁
备孕期间 怀孕 0-1岁 1-2岁 2-3岁

运行结果

30个html+CSS和html5动画经典案例_第10张图片

需要注意的地方:

涉及到了

30个html+CSS和html5动画经典案例_第11张图片

 30个html+CSS和html5动画经典案例_第12张图片

 CSS精灵图技术就是把每一个需要用到的图放到一个里面

30个html+CSS和html5动画经典案例_第13张图片

尽量使用类选择器

8.前端必会的三种CSS网页布局技术

30个html+CSS和html5动画经典案例_第14张图片

代码部分




    
    
    
    布局格式
    


    

这个布局格式需要基本掌握

30个html+CSS和html5动画经典案例_第15张图片

9. 酷狗音乐热榜效果

30个html+CSS和html5动画经典案例_第16张图片

代码部分:




    
    
    
    酷狗热搜
    


    

 运行效果:

30个html+CSS和html5动画经典案例_第17张图片

 注意的地方:绝对路径的设置

关于url()和 src路径

30个html+CSS和html5动画经典案例_第18张图片

30个html+CSS和html5动画经典案例_第19张图片

 这两处需要注意一下。

 应用场景 :热门导航 热门列表项

10.CSS开发小米商城产品栏目展示效果

30个html+CSS和html5动画经典案例_第20张图片

 代码部分:




    
    
    
    小米商城
    


    

需要注意的地方:

提到了怪异盒子模型:box-sizing: border-box;这样设置可以使得原本

实际高度变为border的设置高度

此外

 /* 文字不要换行 y1行显示*/

            white-space: nowrap;

            /* 超出的部分隐藏 */

            text-overflow: ellipsis;

            overflow:hidden;

img是行内块级元素,默认格式存在空隙,导致插入的图片有空隙,需要转换为块级元素

30个html+CSS和html5动画经典案例_第21张图片

运行效果

30个html+CSS和html5动画经典案例_第22张图片 

 应用场景,列表项,分栏,图片的设置

你可能感兴趣的:(前端,html,前端)