一个初学者的辛酸路程-前端cs
一、主要内容
继续CSS
二、CSS
<!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>
<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>
<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;
<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>
<!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>
<!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请求过来,到达这里,然后帮你去执行指定的函数,函数要做哪些事 ...
随机推荐
- 实现接口Controller定义控制器
实现接口Controller定义控制器 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求并将其转换为一个模型.在Spring MVC中一个控制器可以包含 ...
- [NVIDIA编程教程]OpenACC: Directives for GPUs
NVIDIA已经在过去五年里大力发展CUDA技术,我们估计CUDA开发人员超过15万,很多重要的科学应用正在CUDA的帮助下完成.但是我们仍然有一个很长的路要走,以帮助每个人从GPU计算中享受到好处. ...
- Linux利用i节点删除乱码文件
Linux删除乱码文件 当文件名为乱码的时候,无法通过键盘输入文件名,所以在终端下就不能直接利用rm,mv等命令管理文件了. 但是我们知道每个文件都有一个i节点号,我们可以考虑通过i节点号来管理文件. ...
- java设计模式——外观模式(门面模式)
一. 定义与类型 定义:门面模式,提供一个统一的接口,用来访问子系统中的一群接口,门面模式定义了一个高层接口,让子系统更容易使用 类型:结构性 二. 使用场景 子系统越来越复杂,增加外观模式提供简单调 ...
- ABP学习 解决：Update-Database : 无法将“Update-Database”项识别为 cmdlet、函数、脚本文件或可运行程序的名称的问题
原因: 没有引用EntityFramework命令 解决: 在程序包管理器控制台执行如下命令:Import-Module 项目路径\packages\EntityFramework.6.1.3(EF版 ...
- Kiwi,BDD行为测试框架--iOS攻城狮进阶必备技能
简介 Kiwi 是一个适用于iOS开发的行为驱动测试框架,旨在提供一个足够简单易用的BDD库. 项目主页: https://github.com/kiwi-bdd/Kiwi 示例下载: https:/ ...
- Python 初始—(字符编码解码)
字符编码之间的编码转换则需要通过Unicode 进行转换,那么需要一个编码和解码实现与Unicode进行关联转换 例如utf-8转gbk utf-8----decode----->Unicode ...
- hdu5691 Sitting in Line（状压dp）
1 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
- BZOJ1004: [HNOI2008]Cards(Burnside引理 背包dp)
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4255 Solved: 2582[Submit][Status][Discuss] Descript ...
- php-5.6.26源代码 - 如何用C语言支持“类似异常”机制
代码编写在文件php-\Zend\zend.h #define zend_bailout() _zend_bailout(__FILE__, __LINE__) #ifdef HAVE_SIGSETJ ...