zoukankan      html  css  js  c++  java

  • h5-11

    背景色　　background-color

    dashed实线

    透明度

    　　文字不透明

    <style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 200px;
            height: 200px;
            /*背景色 rgb() rgba() 透明不影响内容    a透明度 */
             background-color: rgba(255,0,0,.5);         /*0.5其中0可以省略*/
            border: 10px dashed blue;
        }
        
    </style>
    <div class="box">hjhjh</div>

     　　文字透明

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }        
 6         .box{
 7             width: 200px;
 8             height: 200px;
 9             background-color: rgb(255,0,0);
10              opacity: 0.5; /*让整个盒子包括文字内容都会起作用*/
11             border: 10px dashed blue;
12         }
13         
14     </style>

     简易导航栏

    　　导航一般使用列表制作

     1  <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6 
 7         ul {
 8             list-style: none;
 9         }
10 
11         .nav {
12             width: 960px;
13             height: 40px;
14             margin: 100px auto;
15         }
16 
17         .nav ul {
18             overflow: hidden;
19             /*溢出隐藏*/
20         }
21 
22         .nav ul li {
23             float: left;
24             width: 120px;
25             height: 40px;
26             font-size: 18px;
27             font-family: "Microsoft Yahei";
28             line-height: 40px;
29             text-align: center;
30         }
31 
32         .nav ul li a {
33             display: block;
34             /*改为块状元素*/
35             background-color: #ccc;
36             color: #666;
37             text-decoration: none;
38             /*规定添加到文本的修饰，下划线、上划线、删除线等，此处为空*/
39         }
40 
41         .nav ul li a:hover {
42             background-color: yellowgreen;
43             color: #fff;
44             font-weight: bold;
45             /*字体粗细：粗体*/
46         }
47     </style>
     <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>

    background-image背景图片

     1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }        
 6         .box{
 7             width: 400px;
 8             height: 500px;
 9             padding: 10px;
10             background-color: #ccc;
11             /*背景图 默认会从左上角显示 会水平或者垂直平铺 padding区域有背景图*/
12             background-image: url(images/in_12.jpg);
13             /* background: #ccc url(images/in_12.png); */
14             border: 10px dashed blue;
15         }
16         
17     </style>
    <div class="box"></div>

    图片在div内平铺

     background可合并为

    <style>
        *{
            margin: 0;
            padding: 0;
        }        
        .box{
            width: 400px;
            height: 500px;
            /*background-color: #ccc;
            background-image: url(images/in_12.png);*/
            background:url(images/in_12.jpg) #ccc;
            /*background-repeat: repeat; 默认就是平铺*/
            /* background-repeat: no-repeat;  两个方向不平铺*/
            /* background-repeat: repeat-x; 只平铺水平方向*/
            /* background-repeat: repeat-y;  只平铺垂直方向*/
            border: 10px dashed blue;
        }
        
    </style>

    与上图效果相同

    建议导航栏-----渐变背景

    将渐变线条平铺在块内

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }        
 6         ul{
 7             list-style:none;
 8         }
 9         .nav{
10             width: 960px;
11             height: 40px;
12             margin: 100px auto;
13         }
14         .nav ul{
15             overflow: hidden;
16         }
17         .nav ul li{
18             float: left;
19             width: 120px;
20             height: 40px;
21             font-size: 18px;
22             font-family: "Microsoft Yahei";
23             line-height: 40px;
24             text-align: center;
25         }
26         .nav ul li a{
27             display: block;
28             /* 120px;
29             height: 40px;*/
30             background-image: url(images/jbbg.jpg);
31             background-repeat: repeat-x; 
32             /* background-repeat: no-repeat; */
33             color: #FFF;
34             text-decoration: none;
35         }
36         .nav ul li a:hover{
37             background-image: url(images/jbbg2.jpg);
38             color: #fff;
39             font-weight: bold;
40         }
41     </style>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
        </ul>
    </div>

    background-position表示方法　　（图像定位）

    1、单词表示法

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }        
 6         .box{
 7             width: 400px;
 8             height: 500px;
 9             background: #ccc url(images/jbbg.jpg);
10             background-repeat: no-repeat;
11             /*
12               背景图定位 水平方向 垂直方向 
13               默认  left   top
14                水平 left/center/right
15                垂直 top/center/bottom
16             */
17             background-position:right top;
18             /* background-position:center center; */
19             border: 10px dashed blue;
20         }
21         
22     </style>
    <div class="box"></div>

     2、像素表示法

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }        
 6         .box{
 7             width: 400px;
 8             height: 500px;
 9             background: #ccc url(images/1.jpg);
10             background-repeat: no-repeat;
11             /* 100px 表示水平向右移动100px 150px 表示垂直向下移动150px*/
12             background-position: 100px 150px;
13             /* background-position: -100px -150px; */
14             border: 10px solid blue;
15         }
16         
17     </style>
        <div class="box"></div>

    百分比表示法

     1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }    
 6         /*
 7           素材 234*248
 8         */    
 9         .box{
10             width: 400px;
11             height: 400px;
12             border: 3px solid red;
13             background-image: url(images/meng.jpg);
14             background-repeat: repeat;
15             /* 盒子的宽-图片的宽 看成100%*/
16             background-position: 30% 50%; 
17         }
18     </style>
    <div class="box"></div>

     background-position的body大背景

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }    
 6         body{
 7             background: url(images/c3.jpg) no-repeat center top #000;
 8         }
 9         /*.box{*/
10         /*     400px;
11             height: 400px;
12             border: 3px solid red;
13             background-image: url(images/meng.jpg);
14             background-repeat: no-repeat;
15             background-position: 30% 50%;
16         }*/
17     </style>
        <div class="box"></div>

     background-attachment　　背景图片固定

     1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }    
 6         body{
 7             background:fixed #fff url(images/c4.jpg) no-repeat 50% 0;
 8             /* background-attachment: fixed;    fixed表示背景图固定 */
 9             /* background: #fff url(images/c4.jpg) no-repeat 50% 0; */
10 
11             
12         }
13         .box{
14             width: 100px;
15             height: 100px;
16             background: yellowgreen;
17             margin-bottom: 20px;
18         }
19     </style>
        <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

     1     <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }    
 6         body{
 7             /* background:fixed #fff url(images/c4.jpg) no-repeat 50% 0; */
 8             /* background-attachment: fixed;    fixed表示背景图固定 */
 9             background: #fff url(images/c4.jpg) no-repeat 50% 0;    /*默认时*/
10 
11             
12         }
13         .box{
14             width: 100px;
15             height: 100px;
16             background: yellowgreen;
17             margin-bottom: 20px;
18         }
19     </style>
  • 相关阅读:
    TP5.1 遇见问题整理
    PDO 基础
    php7 连接 mysql 的两种方式
    [php] 添加接口访问日志(文件)
    curl 向远程服务器传输file文件
    VBoxManage
    linux 系统下安装多个php版本
    vim中文乱码问题
    vim 翻页命令
    php list()函数
  • 原文地址：https://www.cnblogs.com/qianfur/p/12443049.html
Copyright © 2011-2022 走看看