首页 > 代码库 > 一个初学者的辛酸路程-jQuery

一个初学者的辛酸路程-jQuery

2024-09-06 05:58:22   216人阅读

前言：

主要概要：

1、HTML+CSS补充

2、DOM事件

3、jQuery示例

 

内容概要：

1、布局

代码如下

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .w{
            width:980px;
            margin:0 auto;
            border:1px solid greenyellow;
        }
    </style>
</head>
<body>
    <div style="background-color: black;color: white;">
        <div class="w">标题</div>
    </div>
    <div>
        <div class="w">内容</div>
    </div>
</body>
</html>
View Code

效果如下：

技术分享

 

 2、clear  both的另外一种写法 （清除浮动）

常规写法就是如下所示：

<body>
    <div style="background-color: greenyellow;">
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</body>

　　接着，我们换另外一种写法

注意：有content才会加标签，一般都是这么写，不能写display: none

    <style>
        .clearfix:after{
            content: ‘.‘;
            display: block;
            clear: both;
            visibility: hidden;
            height:0;
        }
    </style>

所有网站这个都会用到。

以后就写一个公共的CSS，放在引用即可，after是指在这个标签内容的后面

技术分享

<link rel="stylesheet" href="http://www.mamicode.com/commons.css">

 3、页面布局，拖动浏览器如何让格式不变

第一种方法：

在外面定义一个div给一个固定宽度，如果缩小他会自动出现滚动条。如下图

技术分享

写法如下：

<div style="width: 800px;">
　　　输入标签
</div>

 方法2：@media

    <style>
        @media (min-width: 800px){
        .item{
            width:20%;
            float: left;
            }
        }
        @media (max-width: 700px){
        .item{
            width:50%;
            float: left;
            }
        }

    </style>

 

一个初学者的辛酸路程-jQuery


联系
我们