一、主要内容

继续CSS

二、CSS

第一个： postion
网页有一类就是返回顶部，一直在右下角，还有打开一个网页顶部有个菜单，滚动滑轮，顶部永远在上面。
position： 
fiexd  ==>固定在页面的某个位置，他可以结合上下左右来控制他的位置。
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div onclick="GoTop();" style="width: 50px;height: 50px;color: white;
  9.     position: fixed;
  10.     bottom: 20px;
  11.     right:20px;
  12.     " >返回顶部</div>
  13.     <div style="height: 5000px;" >dfsdfsd</div>
  14.     <script>
  15.         function GoTop(){
  16.             document.body.scrollTop = ;
  17.         }
  18.     </script>
  19. </body>
  20. </html>
效果如下：
 
 
 
 
 
实现顶部固定在上面
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .pg-header{
  8.             height: 48px;
  9.  
  10.             color: #dddddd;
  11.             position: fixed;
  12.             top:;
  13.             right:;
  14.             left:;
  15.         }
  16.         .pg-body{
  17.  
  18.             height:5000px;
  19.             margin-top:50px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="pg-header" >头部</div>
  25.     <div class="pg-body" >内容</div>
  26. </body>
  27. </html>
 
position:  relative+ absolution
放在父类标签的某个位置。
  1. <body>
  2.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
  3.         <div style="position: absolute;left: 0;bottom: 0; width: 50px;height: 50px;"></div>
  4.     </div>
  5.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
  6.         <div style="position: absolute;right: 0;bottom: 0; width: 50px;height: 50px;"></div>
  7.     </div>
  8.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
  9.         <div style="position: absolute;right: 0;top: 0; width: 50px;height: 50px;"></div>
  10.     </div>
  11. </body>
样式格式：
 
记住2点即可：
1、fixed 定位位置
2、relative + absolute 相对父类定义位置。
 
 
写一个三层
透明度：opcity:0.5
层级顺序，越大就在上面
  1. <body>
  2.     <div style="z-index: 10; position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-200px;height: 400px;width: 500px;"></div>
  3.     <div style="z-index: 9; position: fixed;
  4.     top: ;
  5.     left: ;
  6.     right: ;
  7.     bottom: ;
  8.     opacity: 0.5;
  9.     "></div>
  10.     <div style="height: 5000px;
  11.         asdfsdf
  12.     </div>
  13. </body>
  • 如果我想隐藏2个页面，可以加入一下面语句
  1. style="display: none;
 
我定义一个边框，超过我就隐藏或者出现滚动条 overflow  : hidden或者auto
隐藏
  1. <div style="height: 200px;width: 300px;overflow: hidden;">
  2.     <img src="data:images/01.jpg" alt="">
  3. </div>
滚动条
  1. <div style="height: 200px;width: 300px;overflow: auto;">
  2.     <img src="data:images/01.jpg" alt="">
  3. </div>
 
放在鼠标上出现hover
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .pg-header{
  8.             position: fixed;
  9.             right:;
  10.             left:;
  11.             top:;
  12.             height: 48px;
  13.  
  14.             line-height:48px;
  15.         }
  16.         .pg-boder{
  17.             margin-top: 50px;
  18.  
  19.         }
  20.         .w{
  21.             width:980px;
  22.             margin:  auto;
  23.         }
  24.         .pg-header .menu{
  25.             display: inline-block;
  26.             padding:  10px;
  27.         }
  28.         .pg-header .menu:hover{
  29.  
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="pg-header">
  35.         <div class="w">
  36.             <a class="logo">LOGO</a>
  37.             <a class="menu">全部</a>
  38.             <a class="menu">42区</a>
  39.             <a class="menu">段子</a>
  40.             <a class="menu"></a>
  41.         </div>
  42.     </div>
  43.     <div class="pg-boder">
  44.         <div class="w">a</div>
  45.     </div>
  46. </body>
  47. </html>
显示效果：
 
写一个登录
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="height: 35px;width: 400px;position: relative;">
  9.         <input type="text" style="height: 35px;width: 370px;padding-right: 30px;">
  10.         <span style="position: absolute;right: 6px;top:10px;background-image: url(1.jpg);height: 16px;width: 16px;display: inline-block;"></span>
  11.     </div>
  12. </body>
  13. </html>
 
写了一个首页top
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .pg-header{
  8.  
  9.             height:38px;
  10.             line-height:38px;
  11.         }
  12.         .main{
  13.             float: right;
  14.             color: black;
  15.             font-size:15px;
  16.             display: inline-block;
  17.             padding: 20px;
  18.         }
  19.         .main span:hover{
  20.  
  21.         }
  22.         .p1{
  23.             float: left;
  24.             border: 1px solid #dddddd;
  25.             margin: 10px;
  26.             padding:10px;
  27.             position: relative;
  28.         }
  29.         .hot{
  30.             position: absolute;
  31.             right:;
  32.             top:;
  33.         }
  34.         .pc{
  35.             border:1px solid red;
  36.             margin: 60px;
  37.         }
  38.  
  39.         .menu{
  40.             display: inline-block;
  41.             padding:  10px;
  42.         }
  43.     </style>
  44. </head>
  45. <body style="margin: 0  auto">
  46.     <div class="pg-header">
  47.         <div style="width: 980px;margin: 0 auto;">
  48.             <div style="float: left; font-size: 15px;">*收藏本站</div>
  49.             <div class="main">
  50.                 <span class="menu">登录</span>
  51.                 <span class="menu">注册</span>
  52.                 <span class="menu">我的订单</span>
  53.                 <span class="menu">我的收藏</span>
  54.                 <span class="menu">VIP会员俱乐部</span>
  55.                 <span class="menu">客户服务</span>
  56.                 <span class="menu">关注</span>
  57.                 <span class="menu">手机版</span>
  58.             </div>
  59.         </div>
  60.  
  61.     </div>
  62. </body>
  63. </html>
 
 
 
 
 

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

  1. 一个初学者的辛酸路程-前端js

    内容回顾: 1.CSS的基本概念: 层叠样式表. 2.CSS的三种书写方式 ① 行内样式 <div style="color: red;">sdfdsf</div ...

  2. 一个初学者的辛酸路程-python操作SQLAlchemy-13

    前言 其实一开始写blog,我是拒绝的,但是,没办法,没有任何理由抗拒.今天呢,要说的就是如何使用Python来操作数据库. SQLAlchemy SQLAlchemy是Python编程语言下的一款O ...

  3. 一个初学者的辛酸路程-FTP-9

    前言 今天,我要描述一个FTP的故事 主要内容 嗯,今天主要以阶梯性的形式来做一个FTP项目. 第一步: 我要实现这么一个功能,一个FTP客户端,1个FTP服务端,2端建立连接以后可以进行通讯. 服务 ...

  4. 一个初学者的辛酸路程-socket编程-8

    前言: 你会发现会网络是多么幸福的事情 主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...

  5. 一个初学者的辛酸路程-Python基础-3

    前言 不要整天沉迷于学习-. 字典 一.我想跟你聊聊字典 1.为何要有字典? 大家有没有想过为什么要有字典?有列表不就可以了吗? 也许大家会这么认为,我给大家举个例子,大家就明白了. 比如说,我通讯录 ...

  6. 一个初学者的辛酸路程-了解Python-2

    前言 blog花了一上午写的,结果笔记本关机了,没有保存,找不到了,找不到了啊,所以说,你看的每一篇blog可能都是我写了2次以上的--.哎!! 代码改变世界,继续......... Python基础 ...

  7. 一个初学者的辛酸路程-初识Python-1

    前言 很喜欢的一句话,与诸位共勉. 人的一切痛苦,本质上都是对自己无能的愤怒----王小波. 初识Python 一.它的爸爸是谁 首先,我们需要认识下面这位人物. 他是Python的创始人,吉多范罗苏 ...

  8. 一个初学者的辛酸路程-依旧Django

    回顾: 1.Django的请求声明周期?   请求过来,先到URL,URL这里写了一大堆路由关系映射,如果匹配成功,执行对应的函数,或者执行类里面对应的方法,FBV和CBV,本质上返回的内容都是字符串 ...

  9. 一个初学者的辛酸路程-继续Django

    问题1:HTTP请求过来会先到Django的那个地方? 先到urls.py  ,里面写的是对应关系,1个URL对应1个函数名. 如果发URL请求过来,到达这里,然后帮你去执行指定的函数,函数要做哪些事 ...

随机推荐

  1. 【CCPC-Wannafly Winter Camp Day3 (Div1) I】石头剪刀布（按秩合并并查集）

    点此看题面 大致题意: 有\(n\)个人,第\(i\)个人坐在编号为\(i\)的座位上,每个人等概率有石头.剪刀.布中的一张卡片.有两种操作:第一种是第\(y\)个人挑战第\(x\)个人,如果胜利则\ ...

  2. python selenium 下拉框

    下拉框的处理如下代码: 定位select有很多种方式,这里介绍两种定位方式 1.二次定位 先定位到下拉框:self.dr.find_element_by_css_selector('#business ...

  3. layui table 用法

    1.使用模板列 改变样式 获取嵌套数据{ field: '', width: '12%', title: '响应状态', sort: true, templet: function (d) { if ...

  4. MySQL中的if和case语句使用总结

    create table test( id int primary key auto_increment, name ), sex int ) ),(),(),() ,'男','女') from te ...

  5. 堆优化dijkstra

    单源最短路径 题目链接:https://www.luogu.org/problemnew/show/P4779 直到做了这个题才发现我之前写的堆优化dijkstra一直是错的.. 这个堆优化其实很容易 ...

  6. AngularJS 外部文件中的控制器

    在大型的应用程序中,通常是把控制器存储在外部的文件中. <!DOCTYPE html><html><head><meta http-equiv="C ...

  7. docker基础——关于安装、常用指令以及镜像制作初体验

    为什么使用docker docker就是一个轻量级的虚拟机,他解决的是服务迁移部署的时候环境配置问题.比如常见的web服务依赖于jdk.Tomcat.数据库等工具,迁移项目就需要在新的机器重新配置这些 ...

  8. thinkphp5,单图,多图,上传

    /** * 上传单图 */ function upload($path, $filename) { $file = request()->file($filename); $info = $fi ...

  9. 内置函数系列之 sorted排序

    sorted排序函数语法: sorted(可迭代对象,key=函数(默认为None),reverse=False) 将可 迭代对象的每一个元素传进key后面的函数中,根据函数运算的结果(返回值)进行排 ...

  10. 【转载】CString,string,char*之间的转换

    本文转自 <> 这三种类型各有各的优点,比如CString比较灵活,是基于MFC常用的类型,安全性也最高,但可移植性最差.string是使用STL时必不可少的类型,所以是做工程时必须熟练掌 ...