码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式第四篇

时间:2017-09-27 11:35:50      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:技术   鼠标   html   apple   dex   调用   ges   导航   tom   

?针对现在网站的图片过大问题,可以用相应的工具进行压缩,并且可对图片进行切割处理。

1.如果一个页面的图片过大,可以对其切割,代码<img src=”1.jpg”><img src=”2.jpg”><img src=”3.jpg”>,如这样排列的图片不是块元素,中间会有空隙,要把图片写成块元素。Img {display:block;}

 

1.对网站中的图片处理,要保证做一个静态网页,对图片的处理要做到尽量不变形。如下图的效果图:

 

技术分享

代码实现:

.content {

. background: url(/imges/content-bg47-1.png) top center no-repeat;

}

.content-1, .content-2, .content-3 {

. background: url(/imges/content-bg47-2.png) bottom center no-repeat;

. padding: 71px 0px 50px;

}

.contact-2 {

. background: url(/imges/content-bg47.png)center center no-repeat;

. background-size: 1186px 100%;

. padding: 0 70px;

}

一点关于CSS3样式的应用:

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍

 

技术分享

鼠标移上去,背景对动态的变化,

/* Ujarak */

.words::before {

content: ‘‘;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background:rgba(255,255,255,0.6);

z-index: -1;

opacity: 0;

-webkit-transform: scale3d(0.3, 1, 1);

transform: scale3d(0.3, 1, 1);

-webkit-transition: -webkit-transform 0.8s, opacity 0.4s;

transition: transform 0.4s, opacity 0.8s;

}

.words:hover a span{color: #00468d;}

.words:hover {

 

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

 

.words:hover::before {

opacity: 1;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

鼠标滑过图片会相应的变大,

 

/*hover style css */

.team-pic img{  cursor: pointer;  transition: all 0.6s;  }  

.team-pic img:hover{transform: scale(1.5);  }  

对导航菜单侧面滑出的效果展示并点击其他部分隐藏的效果实现:

 

技术分享

  1. 先外部引用JQuery库:<script src="js/jquery-3.2.1.min.js"></script>

  2. 写一个jQuery调用函数‘main.js‘:

  3. ;$(function(){

    ‘use strict‘;

       var nav_mobile=$(‘#nav‘),

       navmobile=$(‘.top-menu‘),

    overlay=$(‘.overlay‘),

    nav_toggle=$(‘#nav-toggle‘);

    function showMenu(){

    overlay.fadeIn();

    //console.log(‘clicked‘);

    navmobile.css(‘left‘,0);

    }

    function hideMenu(){

    overlay.fadeOut();

    //console.log(‘clicked‘);

    navmobile.css(‘left‘,-navmobile.width());

    }

    nav_toggle.on(‘click‘,showMenu)

    overlay.on(‘click‘,hideMenu)

    })

  4. headher.html中的div如是写:

    <div id=nav class="top-menu">

    </div>

  5. 对与内容页要写:<div class="overlay"></div>点击按钮菜单显示,内容页上面覆盖一个灰色图层

    <button type=‘button‘ class="navbar-toggle" id=nav-toggle>

    <img src=images/menu.png/></button>

  6. Css样式实现:

/* nav mobile */

.nav-menu li a{height:25px;line-height:25px;padding:5px 20px;font-size:14px;}

.nav-menu li:hover {height: 35px;border-bottom: 4px solid #bd8934;}

.top-menu{width:200px;background:#333;height:auto;position:fixed;top:0;left:-200px;transition:left 0.5s;z-index:99999999;padding-bottom:80px;}

   .top-menu ul li{width:200px;}

.menu-child{left:75px;top:auto;width: 120px;padding-top:8px;background-position:30px 0px;}

li.ab>a,li.cul >a,li.cp >a{background:url(images/sj2.png)no-repeat right 25px;padding-right:20px;}

 li.ab:hover a,li.cul:hover a,li.cp:hover a{background:none;}

.overlay{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.3);display:none;z-index:100;}

button#nav-toggle {display: block; float: right; margin-top: 20px; background: transparent; border: none;width: 45px;}

.nav-menu li li:hover { width: 114px;}

.nav-menu li li a {font-size: 12px;line-height:20px; }

/*nav mobile end*/

实现标题样式:

技术分享

1.对外层div写样式

技术分享

2.对内层span写样式:

技术分享

 

 

CSS样式第四篇

标签:技术   鼠标   html   apple   dex   调用   ges   导航   tom   

原文地址:http://www.cnblogs.com/cheryshi/p/7600571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!