返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

css设置图片特效集合

2020-04-17 文章标签: css 排版 浏览次数:

我们来介绍css入门,我们从基础标签介绍起,现阶段我们看到的网站大部分是div和css可以实现,一些效果要借助于javascript。我们先总css说起,包含知识点css背景大小,css多背景图,css设置设计带花纹的网页边框,css设计圆边页面,css设计分栏版式,css设计滑动门菜单,css设计焦点图

css教程

1.css设置背景大小

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
    margin:2px;
    float:left;
    border:solid 1px red;
    background:url(//freemuban.com/img/202004171638bg.jpg) no-repeat center;
    /*设计背景图像完全覆盖元素区域*/
    -moz-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
/*设计元素大小*/
.h1 { height:120px; width:192px; }
.h2 { height:240px; width:384px; }
</style>
</head>
<body>
<div class="h1"></div>
<div class="h2"></div>
</body>
</html>

2.css多背景图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
#call {
    width: 218px;
    height: 200px;
    padding: 1px;
    background-image: url(//freemuban.com/img/call_top.gif), url(//freemuban.com/img/call_btm.gif), url(//freemuban.com/img/call_mid.gif);
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-position: top center, bottom center, top center;
}
h1 {
    margin-top: 16px;
    margin-left: 16px;
    font-size: 14px;
}
p {
    font-size: 12px;
    padding: 12px;
}
</style>
</head>
<body>
<div id="call">
    <h1>公司公告</h1>
    <p>公告内容</p>
</div>
</body>
</html>

3.css设计带花纹的网页边框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>带花纹边框</title>
<style>
* {
    padding : 0;
    margin : 0;
}
body {
    font-family : 宋体, Arial, Helvetica, sans-serif;
    color : #024977;
    font-size : 14px;
    background: #dfbfc0;
    text-align: center;
}
p {
    padding: 0 20px;
    line-height: 1.8em;
    text-indent: 2em;
    text-align: left;
}
#container {
    width: 810px;
    margin: 0 auto;
    background: url(//freemuban.com/img/202004171639bg1.jpg) repeat-y;
}
#header {
    width: 790px;
    height: 120px;
    margin: 0 auto;
    background: #fff;
    border-top: #FFFFFF 2px solid;
}
#header .logo {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}
#header #title {
    float: right;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 5px;
    font-family: 黑体;
    margin-top: 20px;
    margin-right: 60px;
}
#header #title span {
    display: block;
    margin: 10px 0 0 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 5px;
}
#menu_container {
    clear: both;
    width: 790px;
    margin: 0 auto;
    height: 36px;
    background: #f7f392;
}
#menu {
    width: 790px;
    height: 36px;
    margin: 0 auto;
}
#menu ul {
    width: 790px;
    height: 36px;
    float: left;
    margin: 0px;
    padding: 0;
    list-style: none;
    border-bottom: #FFFFFF 2px solid;
    border-top: #FFFFFF 2px solid;
    background: #f7f392;
}
#menu ul li {
    margin: 0px;
    padding-bottom: 0px;
    display: inline;
}
#menu ul li a {
    position: relative;
    float: left;
    display: inline;
    height: 28px;
    width: 100px;
    margin-right: 10px;
    text-align: center;
    padding: 8px 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #f54f06;
}
#content_container {
    clear: both;
    width: 790px;
    margin: 0 auto;
    padding-bottom: 20px;
    padding-top: 20px;
    background: #FFFFFF;
}
#content {
    width: 790px;
    margin: 0 auto;
    padding: 0px;
}
h2 { padding: 40px auto; }
#footer_container {
    clear: both;
    width: 790px;
    margin: 0 auto;
}
#footer {
    margin: 0 auto;
    color: #033a5d;
    height: 50px;
    font-size: 14px;
    background: #999999;
    border-bottom: 2px #FFFFFF solid;
    border-top: 2px #FFFFFF solid;
    padding-top: 20px;
}
#footer a,
footer a:hover {
    color: #033a5d;
    font-weight: bold;
    text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="logo"><img src="//freemuban.com/img/202004171639logo.jpg"></div>
        <div id="title">高质.高效 <span>是我们一直的追求</span> </div>
    </div>
    <div id="menu_container">
        <div id="menu">
            <ul>
                <li><a href="#" class="current"><span></span>首页</a></li>
                <li><a href="#" target="_parent"><span></span>一起约吧</a></li>
                <li><a href="#" target="_blank"><span></span>快速服务</a></li>
                <li><a href="#"><span></span>合作伙伴</a></li>
                <li><a href="#"><span></span>联系我们</a></li>
            </ul>
        </div>
    </div>
    <div id="content_container">
        <div id="content">
            <h2>世纪佳缘简介</h2>
            <p>世纪佳缘是国内领先的在线婚恋交友网站,2003年10月8日创立于中国上海。自创立以来,世纪佳缘致力为用户提供全方位的在线生活服务。2011年5月11日,世纪佳缘登陆美国纳斯达克股票市场,成为国内首家上市的在线婚恋交友平台,自上市以来世纪佳缘净收入已连续18个季度保持同比两位数或以上的增长。</p>
            <p>2015年,世纪佳缘移动端用户登录次数占比达到72%。2014年这一数字约为68%。截至2015年底,世纪佳缘用户注册总数超1.6亿,年平均月活跃用户数约为530万。世纪佳缘自2013年起大力推进公司主营业务从PC端向移动端转移,并在移动端进行多品牌的战略布局,相继推出求爱网、求约会等移动端产品,2014年更是加速布局移动端,5月推出爱真心App后,世纪佳缘新版App也在当年12月正式上线。</p>
            <p>覆盖PC和移动端的同时,世纪佳缘一对一红娘业务也保持着稳步提升。截至2016年5月,一对一红娘业务已经覆盖全国73个主要城市103家线下实体店,除一对一红娘业务外,世纪佳缘还于2015年7月推出红娘经纪人业务,截至2016年5月,红娘经纪人已覆盖全国9大城市21个线下实体店,红娘经纪人总数已超过14000人。 红娘经纪人业务是全球分享经济大潮中的创新一员,作为中国互联网婚恋交友行业的先驱和优秀代表,世纪佳缘CEO吴琳光受邀参加2015年乌镇世界互联网大会时表示:“国家近两年提倡的‘互联网+’是全球互联网共同的趋势,特别是分享经济更是未来的发展潮流,世纪佳缘会继续坚持创新,拥抱创新,不断开拓新业务,服务好用户。”</p>
        </div>
    </div>
    <div id="footer_container">
        <div id="footer">Copyright@ 2017 | Designed by us <a href="#" target="_parent">联系我们</a> </div>
    </div>
</div>
</body>
</html>

4.css设计圆边页面

<!doctype html>
<html>
<meta charset="utf-8">
<title></title>
</head><style>
body {
    text-align: center;
    background-color: #CCCCCC;
    font-family: 黑体;
}
.container {
    width: 800px;
    margin: 0 auto;
}
.header {
    width: 100%;
    height: 200px;
    background-image: url(//freemuban.com/img/202004171641bg.gif);
}
.menu {
    width: 796px;
    height: 35px;
    padding-top: 5px;
    text-align: center;
    border-left: green 2px solid;
    border-right: green 2px solid;
    background-color: #f0d835;
}
ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: 100%px;
    height: 35px;
    padding: 4px;
    background-color: #f0d835;
}
li {
    float: left;
    background-color: #f0d835;
    height: 31px;
    padding: 0px 20px;
}
.content {
    width: 796px;
    background-color: #FFFFFF;
    padding: 0px;
    height: 200px;
    border: green 2px solid;
}
.footer {
    width: 800px;
    height: 80px;
    background: url(//freemuban.com/img/202004171641footer_bg.gif);
    padding-top: 20px;
}
</style>
<body>
<div class="container">
    <div class="header"></div>
    <div class="menu">
        <ul>
            <li>首页</li>
            <li>热门推荐</li>
            <li>精华帖</li>
            <li>交流区</li>
            <li>经典收藏</li>
            <li>历史记录</li>
            <li>通讯录</li>
            <li>关于我们</li>
        </ul>
    </div>
    <div class="content"></div>
    <div class="footer">@2017 版权所有|关于我们|联系我们|</div>
</div>
</body>
</html>

5.css设计分栏版式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分栏版式</title>
<style>
body {
    background-image: url(//freemuban.com/img/202004171642bg.jpg);
    background-repeat: repeat-x;
    text-align: center;
}
.container {
    text-align: center;
    background-color: #d3eeeb;
    width: 800px;
    height: 720px;
    margin: 0 auto;
}
.header { width: 800px; }
.content {
    background-color: #fff;
    width: 800px;
}
table {
    text-align: center;
    width: 790px;
    margin: 5px;
}
.l1 {
    width: 270px;
    height: 210px;
    background-image: url(//freemuban.com/img/202004171642left1.jpg);
}
.l2 {
    width: 270px;
    height: 270px;
    background-image: url(//freemuban.com/img/202004171642left2.jpg);
}
.r1 {
    width: 520px;
    height: 210px;
    background-image: url(//freemuban.com/img/202004171642right1.gif);
}
.r2 {
    width: 520px;
    height: 270px;
    background-image: url(//freemuban.com/img/202004171642right2.gif);
}
</style>
</head>
<body>
<div class="container">
    <div class="header"><img src="//freemuban.com/img/202004171642banner.jpg"></div>
    <div class="content">
        <table  cellspacing="0" cellpadding="0">
            <tr>
                <td class="l1"></td>
                <td class="r1"></td>
            </tr>
            <tr>
                <td class="l2"></td>
                <td class="r2"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

6.css设计滑动门菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门菜单</title>
<style type="text/css">
body {
    font-size: 13px;
    line-height: 38px;
}
.content {
    width: 600px;
    height: 220px;
    background: #FBEBFC;
    font-size: 14px;
    line-height: 2em;
    color: #2E4583;
    padding:6px 24px 12px;
    float: left;
}
.menu ul {
    padding: 0;
    list-style-type: none;
    background: #fff;
}
.menu li {
    float: left;
    margin: 0;
    padding: 0;
    background: url(//freemuban.com/img/2020041716444.gif) no-repeat right top;
}
.menu li a {
    display: block;
    background: url(//freemuban.com/img/2020041716443.gif) no-repeat left top;
    padding: 0 15px;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.menu li a:hover { color: #c00; }
.menu li.first { background: url(//freemuban.com/img/2020041716442.gif) no-repeat right top; }
.menu li.first a {
    background: url(//freemuban.com/img/2020041716441.gif) no-repeat left top;
    color: #000;
}
.menu li.first a:hover { color: #f00; }
.menu li:hover { background: url(//freemuban.com/img/2020041716442.gif) no-repeat right top; }
.menu li:hover a {
    background: url(//freemuban.com/img/2020041716441.gif) no-repeat left top;
    color: #f00;
}
</style>
</head>
<body>
<div class="container">
    <div class="menu">
        <ul>
            <li class="first"><a href="#">首 页</a></li>
            <li><a href="#">CSS教程</a></li>
            <li ><a href="#">CSS实例</a></li>
            <li><a href="#">CSS层与布局</a></li>
            <li><a href="#">CSS特效</a></li>
        </ul>
    </div>
    <div class="content">
        <p> 什么是滑动门技术?究其本意,就是根据文本自适应大小,进行滑动。我们可以用背景图片来营造这样的现象,一个在左一个在右,把这两个图片想象成可以滑动的门,当文本较少的时候,两个图片重叠的就多些,当文本较多的时候就滑动开,重叠的所谓“滑动门”,就是两个嵌套的元素,各自使用一个背景图像,二者中间部分重叠,两端不重叠,这样,左右两端的花纹就可以都被显示出来,中间部分的宽度可以自动适应,因此宽度变化时,依然可以保证左右两端的图案不变。“滑动门”这个名称很形象地描述了这种方法的本质,两个图像就像两扇门,二者可以滑动,当宽度小的时候,就多重叠一些,宽度大的时候,就少重叠一些。</p>
    </div>
</div>
</body>
</html>

7.css设计焦点图,焦点图在网页中经常遇到

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦点图</title>
<style>
* {
    margin: 0;
    padding: 0;
}
#menu {                          /*dl标记类样式*/
    position: relative;               /*相对定位*/
    height: 454px;                 /*高度*/
    width: 730px;                 /*宽度*/
    background: #ccc;              /*dl标记的背景颜色*/
    text-align: center;
    margin: 6px auto;
}
#menu dt {                         /*dt样式类*/
    position: absolute;             /*绝对定位*/
    right: 5px;                   /*右边框离父级元素的距离*/
    bottom: 5px;                 /*下边框离父级元素的距离*/
}
#menu dt a {                      /*a样式类*/
    float: left;                  /*左对齐*/
    display: block;              /*定义为块级元素*/
    padding: 1px 4px;
    border: 1px solid #ccc;       /*为列表项加边框*/
    margin-left: 2px;
    text-decoration: none;        /*不显示下划线*/
    color: #309;               /*字体颜色*/
    background: #999;
    font-size: 12px;
}
#menu dt a:hover {               /*鼠标悬停时的a样式类*/
    background: #fff;
    color: #FF0000;
}
#menu dd {               /*dd类样式*/
    width: 730px;       /*宽度*/
    height: 454px;       /*高度*/
    overflow: hidden;    /*隐藏溢出*/
}
</style>
</head>
<body>
<dl id="menu">
    <dt>
        <a href="#img1">1</a>
        <a href="#img2">2</a>
        <a href="#img3">3</a>
        <a href="#img4">4</a>
    </dt>
    <dd>
        <img src="//freemuban.com/img/2020041716461.jpg" id="img1"/>
        <img src="//freemuban.com/img/2020041716462.jpg" id="img2"/> 
        <img src="//freemuban.com/img/2020041716463.jpg" id="img3"/>
        <img src="//freemuban.com/img/2020041716464.jpg" id="img4"/>
    </dd>
</dl>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。