微语 微语：代码适合中午敲，早晚出BUG

JavaSrcipt的引入四种方式 JavaScript

1.外链式

<script type="text/javascript" src="js/main.js"></script>

2.协议方式

<a href="javascript:alert('我是协议方式!')">点击</a>

3.内嵌式

    <script>
            alert("我是内嵌式"); 
   </script>

4.行内式

<button onclick="alert('我是行内式')">按钮</button>
小诸葛 JavaScript引入 3-8
评论(0) 浏览(350)

闲来无事写了个工具栏 前端

效果图

预留了顶部位置准备加图标的，有需要的可以研究，也可以自己改进。

CSS

    /* 小菜单 */
            .nav-fl{
                font-size: 14px;
                width: 726px;
                height: 100px;
                background-color: #ffffff;
                margin: 0 auto;
            }
            /* 菜单下的列表 */
            .nav-fl li{
                width: 120px;
                height: 100px;
                border-right: 1px dashed;
                text-align: center;
                position: relative;
                float: left;
                overflow: hidden;

            }
            /* 菜单下面按钮样式 */
            .nav-fl button{
                width: 60%;
                height:30px;
                border: 0;
                color: #fff;
                background-color: #55aaff;
                margin-top:12px;
                cursor: pointer;
            }
            .nav-fl span:nth-child(1){
                margin-top:40px;
                padding: 5px 0;
                width: 110px;
                display: inline-block;
            }
            /* 菜单下面的列 */
            .nav-fl .cs{
                width: 120px;
                height: 100px;
                background-color:#fff;
                position: absolute;
                transition: all 0.2s;

            }
            .nav-fl li:last-child{
                border-right:0;
            }
            li:hover .cs{
                /* 像上移动 */
                margin-top:-40px;
            }

HTML

<div class="nav-fl">
            <ul>
                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>
                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>

                <li>
                    <div class="cs">
                        <span>相册图库</span>
                        <span>图片相册介绍</span>
                        <a href="#"><button>点击进入</button></a>

                    </div>
                </li>
            </ul>
        </div>
小诸葛 导航栏 3-7
评论(0) 浏览(369)

nth-child的使用方法 前端

废话不说多少先上效果图

图一：
nth-child的使用方法
图二：
nth-child的使用方法
仔细观察就会发现图二第二行都没有了下边框，虽然解决办法有很多，比如给每个元素单独添加id选择器和类名选择器去逐一选择，但是这样会很麻烦，代码一多也容易造成代码冗余，这里推荐一种方法可以很快捷的实现上面功能。

.nav-fl li:nth-child(n+4){
               border-bottom: 0;
            }

选择了第四个元素和之后的元素。

更多使用方法如下：

first-child：选择第一个li标签设置字体大小为12px。

li:first-child{
    font-size:12px;
}

last-child：选择最后一个li标签设置字体大小为12px。

li:last-child{
    font-size:12px;
}

nth-child(n)：选择第n个li标签设置字体大小为12px.

li:nth-child(3){
    font-size:12px;
}

nth-child(odd)：选择为奇数li标签设置字体大小为12px，或者通过nth-child(n+1)，nth-child(2n-1) 也可以选择奇数行

li:nth-child(odd){
    font-size:12px;
}

nth-child(even)：选择的偶数行li设置字体大小为12px，或者通过另外的方法选择奇数行：nth-child(2n)

li:nth-child(even){
  font-size:12px;
}

不只是上面的固定写法，还有更灵活的组合方法，例如：

/* 选择前三个元素设置其背景颜色 */
li:nth-child(-n+3){
    background: #5555ff;
}

/* 选择第二个元素以及之后的元素 */
    li:nth-child(n+2){
        background: #0ab1fc;
    }
/* 选择第倒数第3个元素 */
    li:nth-last-child(3){
        background-color: #55007f;
    }
/* 选择倒数第三个以及之前的元素*/
            li:nth-last-child(n+3) {
                background-color: saddlebrown;
            }
/* 选择第一个元素和之后每+1个元素状态，1,3,5...*/
            li:nth-child(2n+1){
                background: red;
            }

方法还有很多，可以看以上案例，通过举一反三去实现自己需要的效果，重要的是思想，看到一个效果不要着急上手，先思考如何去实现，以及实现的细节，其次才是上手。

小诸葛 nth-child 3-7
评论(0) 浏览(360)

定位+隐藏+hover 前端

效果图

CSS

ul {
                list-style: none;
            }

            .linda{
                margin-top: 50px;
                height: 400px;
            }
            .linda li {
                padding: 13px;
                float: left;
            }
            /* 第一个li */
            .linda li:nth-child(1) {
                padding-left: 0;
            }
            /* 最后一个li */
            .linda li:last-child {
                padding-right: 0;
            }

            .linda .img {
                /* 超出隐藏 */
                overflow: hidden;
                /* 绝地定位 */
                position: relative;
                width: 280px;
              }
            /* 给图片设置动画效果 */
            .lid-img {
                transition: all 0.5s;/* 动画 */
                left: 0;
                bottom: 0;
                position: absolute;/* 定位 */
                text-align: center;
                width: 100%;
                height: 0px;/* 初始值0让一开始隐藏 */
                background-color: rgb(23 21 21 / 48%);
            }

            .linda .img:hover .lid-img {
                /* 鼠标移入显示图片盒子,给盒子设置高度 */
                height: 80px;
            }
             /* 给span设置样式 */
            .lid-img span {
              vertical-align:middle;
              display: inline-block;
              margin: 15px 5px;
              width: 50px;
              height: 50px;
              border: solid 1px #fff;
              background: url(images/img-sprite.png) no-repeat;

            }
             /* 这里是第二个span,不用设置别的属性了,因为第一个已经设置了 */
            .lid-img span:nth-child(2) {
                background-position: -42px 0;
            }
             /* 第三个span */
            .lid-img span:nth-child(3) {
                background-position: -85px 0px;
            }

            .linda img {
                /* 以盒子高度为参考,给图片高度100%,但是图片没有对齐盒子底部 */
                vertical-align: bottom;/* 此代码也可以解决底部三像素,底部对齐 */
                width: 100%;
                height: 100%;
            }

HTML

<div class="linda banx ">
            <ul>
                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="img">
                        <img src="images/t1.jpg" alt="">
                        <div class="lid-img">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
小诸葛 动画 3-6
评论(0) 浏览(392)

解决li转成行内块产生的空格间隙 前端

解决li转成行内块产生的空格间隙

使用无序列表做菜单的时候，把li转成行内块，发现li之间有空格间隙，解决办是给ui字体大小设置为0，给li重新定义字体大小。

代码如下：

CSS


            ul {
                background-color: black;
                width: 100%;
                background-color: saddlebrown;
                text-align: center;
                font-size: 0;
            }

            li {
                background-color: white;
                display: inline-block;
                font-size: 16px;
            }

HTML

<ul>
    <li>菜单1</li>
    <li>主页</li>
    <li>日记</li>
    <li>照片</li>
</ul>
小诸葛 行内块 3-6
评论(0) 浏览(370)

表单的属性 前端

  1. 表单标签
  2. 表单域
  3. 表单按钮
小诸葛 表单属性 3-6
评论(0) 浏览(366)

input type="属性值" 前端 

input type="button" 普通按钮

input type="checkbox" 复选框

input type="color" 颜色选择器

input type="date" 日期，包括年，月和日

input type="datetime-local" 日期时间，包括年，月，日，小时和分钟

input type="email" 邮箱

input type="file" 上传文件

input type="hidden" 不显示，隐藏元素

input type="image" 图片按钮

input type="month" 年月

input type="number" 数值

input type="password" 密码

input type="radio" 单选框

input type="range" 滑块

input type="reset" 重置

input type="search" 搜索

input type="submit" 提交

input type="tel" 电话

input type="text" 文本

input type="time" 时间

input type="url" 网址

input type="week" 周
小诸葛 input 3-6
评论(1) 浏览(803)

日用CSS 前端

CSS超出隐藏

overflow: hidden;

解决底部三像素


vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit

清除浮动

类名::after{
            content: "";
            display: block;
            clear: both;
            }
小诸葛 日用CSS 3-5
评论(0) 浏览(418)

友情链接 申请

会飞的鱼 lerte程序员 六思逸 微4e 迎風别葉 峡州仙士之页 郑羊羊咩的窝 微资源论坛 91影视网 拾光博客

I am 小诸葛

是一名前端工程师，独立开发者、博主

最新评论