html学习3-CSS补充

position

fixed：把标签固定在页面的某处

例子：使用fixed制作“回到顶部”按钮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

    position:fixed;bottom:20px;right:20px">

        返回顶部

    </div>

    <div style="height:5000px;background-color:#dddddd">

        ddfdfdadfdf

    </div>

    <script>

        function GoTop(){

            document.documentElement.scrollTop = 0;

            console.log(document.documentElement.scrollTop)

        }

    </script>

</body>

</html>

例子2：固定页面头部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .pg-header{

            height:48px;

            background-color:black;

            color:#dddddd;

            position:fixed;

            top:0;

            right:0;

            left:0;

        }

        .pg-body{

            background-color:#dddddd;

            height:5000px;

            margin-top:50px;

        }

    </style>

</head>

<body>

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

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

</body>

</html>

absolute：把标签固定在页面的某处，位置是绝对固定的

relative：通常和absolute一起用

<div style='position:relative;'>
   <div style='position:absolut;top:0,right:0;'></div>
<div/>

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="width:50px;height:50px;

    background-color:black;

    position:absolute;

    right:0;

    bottom:0;">

    </div>

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

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

    </div>

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

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

    </div>

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

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

    </div>

    <div style="height:5000px;background-color:#dddddd;">

        ddfdfdadfdf

    </div>

</body>

</html>

页面分层显示：

z-index

opacity 透明值：0-1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="display:none;z-index:10;

    position:fixed;background-color:white;

    height:100px;

    width:500px;

    top:50%;

    left:50%;

    margin-left:-250px;margin-top:-200px;

    ">

        <input type="text">

        <input type="text">

        <input type="text">

    </div>

    <div style="display:none;z-index:9;position:fixed;background-color:#dddddd;

    top:0;

    bottom:0;

    left:0;

    right:0;

    opacity:0.5;

    "></div>

    <div style="height:5000px;background-color:green;">

        ddfdfdadfdf

    </div>

</body>

</html>

overflow

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

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

        <img src="IMG_1980.JPG">

    </div>

    <p></p>

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

        <img src="IMG_1980.JPG">

    </div>

</body>

</html>

hover

鼠标移动到标签时，属性才生效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .pg-header{

            position:fixed;

            right:0;

            left:0;

            top:0;

            height:48px;

            background-color:#2459a2;

            line-height:48px;

            }

        .pg-body{

            margin-top:50px;

            }

        .w{

            width:980px;

            margin:0 auto;

            }

        .pg-header .menu{

            display:inline-block;

            padding:0 10px 0 10px;

            color:white;

            }

        .pg-header .menu:hover{

            background-color:blue;

            }

    </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">1024</a>

        </div>

    </div>

    <div class="pg-body">

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

    </div>

</body>

</html>

background-color　　背景颜色

background-image:url('xxx.gif')#默认。div大，图片重复放

background-repeat:no-repeat/repeat-x/repeat-y 图片重复加载

background-position:10px 10px/position-x/position-y 移动背景图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <span style="background-image:url('微笑.gif');height:20px;width:20px;display:inline-block;"></span>

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

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

        <span style="position:absolute;right:0;top:10px;background-image:url('微笑.gif');height:25px;width:25px;display:inline-block;"></span>

    </div>

    <div style="width:200px;height:200px;border:1px solid red;

     background-image:url('土拨鼠.gif');

     background-repeat:no-repeat;

     background-position-x:10px;

     background-position-y:10px"></div>

</body>

</html>

结束

html学习3-CSS补充的更多相关文章

jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置代码例子:(通过fixed标签将某些内容固定 ...
如何从零开始学习DIV+CSS
CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...
学习完毕-css
最近零零散散学习了css 最后附带链接,里面有css的全部demo.有空的可以练习练习,下一步 --->js -----http://www.w3cschool.cc/css/css-examp ...
ReactNative学习之css样式使用
前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...
Learning ROS for Robotics Programming Second Edition学习笔记(三) 补充 hector_slam
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
HTML+CSS补充
1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...
2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践

随机推荐

python3读取、写入、追加写入excel文件
由于excel版本不同,python处理的时候选择的库页不同. 一.操作对应版本表格需要用到的库 1.操作xls格式的表格文件,需要用到的库如下: 读取:xlrd 写入:xlwt 修改(追加写入):x ...
《NVMe-over-Fabrics-1_0a-2018.07.23-Ratified》阅读笔记（4）-- Controller Architecture
4 Controller架构 NVMe over Fabrics使用与NVMe基础规格说明书中定义相同的controller架构.这包括主机和controller之间使用SQ提交队列和CQ完成队列来执 ...
DeepLearningDTU: Building a RNN step by step
exercise 5: Week 5 - Recurrent Neural Networks Building your Recurrent Neural Network - Step by Step
ET框架之自写模块SmartTimerModule
1.代码结构图 2.SmartTimer 模块Entity: using System; namespace ETModel { [ObjectSystem] public class SmartTi ...
大数据-es(elasticsearch)
elasticsearch elasticsearch是lucene作为核心的实时分布式检索,底层使用倒排索引实现. 倒排索引原理索引表中的每一项都包括一个属性值和具有该属性值的各记录的地址.由于不 ...
js -- 正则表达式集合
在做项目中,有时需要进行正则验证,但我又不太会正则表达式. 在一次又一次的寻找正则表达式的过程中,我最后总结了一个用于验证的函数,把我们常用的正则写在方法里,就不用每次都去网上找了. 可以根据需求进行 ...
无聊学习一下MVP这个概念
记录一下学习MVP,好处是便于替换前台页面(winfrom替换成asp.net),不改变页面逻辑层及其以后的层 M:业务逻辑 V:页面 P:页面逻辑 ,充当页面和业务逻辑的中间层规则:V和M不能直 ...
Docker - 构建一个简单的应用镜像
概述做个简单的可用镜像背景之前的镜像, 都是命令教程类的这次我想构建一个可以用的简单镜像镜像 1. 环境 os centos7 docker 18.09 docker image ja ...
Pandas数据结构（一）——Pandas Series
Pandas 是 Python 中基于Numpy构建的数据操纵和分析软件包,包含使数据分析工作变得快速简洁的高级数据结构和操作工具.通过Pandas Series 和 Pandas DataFrame ...
php一些实用的自制方法
时间戳转多久之前 function mdate($time = NULL) { $text = ''; $time = $time === NULL || $time > time() ? ti ...

html学习3-CSS补充

html学习3-CSS补充的更多相关文章

随机推荐

热门专题