一、主要内容

继续CSS

二、CSS

第一个： postion

网页有一类就是返回顶部，一直在右下角，还有打开一个网页顶部有个菜单，滚动滑轮，顶部永远在上面。

position：

fiexd ==>固定在页面的某个位置，他可以结合上下左右来控制他的位置。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div onclick="GoTop();" style="width: 50px;height: 50px;color: white;

    position: fixed;

    bottom: 20px;

    right:20px;

    " >返回顶部</div>

    <div style="height: 5000px;" >dfsdfsd</div>

    <script>

        function GoTop(){

            document.body.scrollTop = ;

        }

    </script>

</body>

</html>

效果如下：

实现顶部固定在上面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 48px;

            color: #dddddd;

            position: fixed;

            top:;

            right:;

            left:;

        }

        .pg-body{

            height:5000px;

            margin-top:50px;

        }

    </style>

</head>

<body>

    <div class="pg-header" >头部</div>

    <div class="pg-body" >内容</div>

</body>

</html>

position: relative+ absolution

放在父类标签的某个位置。

<body>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">

        <div style="position: absolute;left: 0;bottom: 0; width: 50px;height: 50px;"></div>

    </div>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">

        <div style="position: absolute;right: 0;bottom: 0; width: 50px;height: 50px;"></div>

    </div>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">

        <div style="position: absolute;right: 0;top: 0; width: 50px;height: 50px;"></div>

    </div>

</body>

样式格式：

记住2点即可：

1、fixed 定位位置

2、relative + absolute 相对父类定义位置。

写一个三层

透明度：opcity:0.5

层级顺序，越大就在上面

<body>

    <div style="z-index: 10; position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-200px;height: 400px;width: 500px;"></div>

    <div style="z-index: 9; position: fixed;

    top: ;

    left: ;

    right: ;

    bottom: ;

    opacity: 0.5;

    "></div>

    <div style="height: 5000px;

        asdfsdf

    </div>

</body>

如果我想隐藏2个页面，可以加入一下面语句

style="display: none;

我定义一个边框，超过我就隐藏或者出现滚动条 overflow : hidden或者auto

隐藏

<div style="height: 200px;width: 300px;overflow: hidden;">

    <img src="data:images/01.jpg" alt="">

</div>

滚动条

<div style="height: 200px;width: 300px;overflow: auto;">

    <img src="data:images/01.jpg" alt="">

</div>

放在鼠标上出现hover

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            position: fixed;

            right:;

            left:;

            top:;

            height: 48px;

            line-height:48px;

        }

        .pg-boder{

            margin-top: 50px;

        }

        .w{

            width:980px;

            margin:  auto;

        }

        .pg-header .menu{

            display: inline-block;

            padding:  10px;

        }

        .pg-header .menu:hover{

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">42区</a>

            <a class="menu">段子</a>

            <a class="menu"></a>

        </div>

    </div>

    <div class="pg-boder">

        <div class="w">a</div>

    </div>

</body>

</html>

显示效果：

写一个登录

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height: 35px;width: 400px;position: relative;">

        <input type="text" style="height: 35px;width: 370px;padding-right: 30px;">

        <span style="position: absolute;right: 6px;top:10px;background-image: url(1.jpg);height: 16px;width: 16px;display: inline-block;"></span>

    </div>

</body>

</html>

写了一个首页top

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .pg-header{

            height:38px;

            line-height:38px;

        }

        .main{

            float: right;

            color: black;

            font-size:15px;

            display: inline-block;

            padding: 20px;

        }

        .main span:hover{

        }

        .p1{

            float: left;

            border: 1px solid #dddddd;

            margin: 10px;

            padding:10px;

            position: relative;

        }

        .hot{

            position: absolute;

            right:;

            top:;

        }

        .pc{

            border:1px solid red;

            margin: 60px;

        }

        .menu{

            display: inline-block;

            padding:  10px;

        }

    </style>

</head>

<body style="margin: 0  auto">

    <div class="pg-header">

        <div style="width: 980px;margin: 0 auto;">

            <div style="float: left; font-size: 15px;">*收藏本站</div>

            <div class="main">

                <span class="menu">登录</span>

                <span class="menu">注册</span>

                <span class="menu">我的订单</span>

                <span class="menu">我的收藏</span>

                <span class="menu">VIP会员俱乐部</span>

                <span class="menu">客户服务</span>

                <span class="menu">关注</span>

                <span class="menu">手机版</span>

            </div>

        </div>

    </div>

</body>

</html>

一个初学者的辛酸路程-前端cs的更多相关文章

一个初学者的辛酸路程-前端js
内容回顾: 1.CSS的基本概念: 层叠样式表. 2.CSS的三种书写方式 ① 行内样式 <div style="color: red;">sdfdsf</div ...
一个初学者的辛酸路程-python操作SQLAlchemy-13
前言其实一开始写blog,我是拒绝的,但是,没办法,没有任何理由抗拒.今天呢,要说的就是如何使用Python来操作数据库. SQLAlchemy SQLAlchemy是Python编程语言下的一款O ...
一个初学者的辛酸路程-FTP-9
前言今天,我要描述一个FTP的故事主要内容嗯,今天主要以阶梯性的形式来做一个FTP项目. 第一步: 我要实现这么一个功能,一个FTP客户端,1个FTP服务端,2端建立连接以后可以进行通讯. 服务 ...
一个初学者的辛酸路程-socket编程-8
前言: 你会发现会网络是多么幸福的事情主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...
一个初学者的辛酸路程-Python基础-3
前言不要整天沉迷于学习-. 字典一.我想跟你聊聊字典 1.为何要有字典? 大家有没有想过为什么要有字典?有列表不就可以了吗? 也许大家会这么认为,我给大家举个例子,大家就明白了. 比如说,我通讯录 ...
一个初学者的辛酸路程-了解Python-2
前言 blog花了一上午写的,结果笔记本关机了,没有保存,找不到了,找不到了啊,所以说,你看的每一篇blog可能都是我写了2次以上的--.哎!! 代码改变世界,继续......... Python基础 ...
一个初学者的辛酸路程-初识Python-1
前言很喜欢的一句话,与诸位共勉. 人的一切痛苦,本质上都是对自己无能的愤怒----王小波. 初识Python 一.它的爸爸是谁首先,我们需要认识下面这位人物. 他是Python的创始人,吉多范罗苏 ...
一个初学者的辛酸路程-依旧Django
回顾: 1.Django的请求声明周期? 请求过来,先到URL,URL这里写了一大堆路由关系映射,如果匹配成功,执行对应的函数,或者执行类里面对应的方法,FBV和CBV,本质上返回的内容都是字符串 ...
一个初学者的辛酸路程-继续Django
问题1:HTTP请求过来会先到Django的那个地方? 先到urls.py ,里面写的是对应关系,1个URL对应1个函数名. 如果发URL请求过来,到达这里,然后帮你去执行指定的函数,函数要做哪些事 ...

随机推荐

POJ-2513 Colored Sticks---欧拉回路+并查集+字典树
题目链接: https://vjudge.net/problem/POJ-2513 题目大意: 给一些木棍,两端都有颜色,只有两根对应的端点颜色相同才能相接,问能不能把它们接成一根木棍解题思路: 题 ...
Gym 100169A 最短路
题意:不久后滑铁卢将会变得非常冷,但是幸运的是,很多建筑都被桥梁和隧道连接着,所以你不需要总是走在外面.但是现在建筑物之间的连接是错综复杂的,很难知道某两个建筑物之间的最优路线,所以需要你写程序判断 ...
caffe RandomOrderChannels
就是将rgb图的3个channel随机打乱顺序,给定一个概率值是否执行这个操作,v系列模型的概率一般都设置的为0 void RandomOrderChannels(const cv::Mat& ...
jQuery UI datepicker z-index默认为1 怎么处理
最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...
C#语言概述
C#语言概述一..NET Framework .NET Framework是Windows的一个不可或缺的组件,它包括公共语言运行库(CLR)和类库两部分. CLR是Microsoft的公共语言基础 ...
pycharm中常用设置
当安装时检查版本过低首先 pip --help 进入帮助,找到复制,然后 pip install --disable-pip-version-check 要安装的包这样就会跳过版本检测. 在py ...
4、SpringBoot+Mybatis整合------一对多
开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis/tree/c00b56dbd51a1e26ab9fd99020 ...
Python爬虫，看看我最近博客都写了啥，带你制作高逼格的数据聚合云图
转载请标明出处: http://blog.csdn.net/forezp/article/details/70198541 本文出自方志朋的博客今天一时兴起,想用python爬爬自己的博客,通过数据 ...
【学时总结】◆学时·VI◆ SPLAY伸展树
◆学时·VI◆ SPLAY伸展树平衡树之多,学之不尽也…… ◇算法概述二叉排序树的一种,自动平衡,由 Tarjan 提出并实现.得名于特有的 Splay 操作. Splay操作:将节点u通过单旋. ...
MongoDB模糊查询
模糊查询简介MongoDB查询条件可以使用正则表达式,从而实现模糊查询的功能.模糊查询可以使用$regex操作符或直接使用正则表达式对象. MySQL MongoDB select * from s ...

一个初学者的辛酸路程-前端cs

一、主要内容

二、CSS

一个初学者的辛酸路程-前端cs的更多相关文章

随机推荐

热门专题