day--16页面布局
后台页面布局
一、fixed布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--对body标签执行CSS样式操作 -->
<style>
body{
margin:;
}
.pg-header{
height:48px;
background-color:#2459a2;
color:white;
}
.left{
float:left;
}
.right{
float:right;
}
.pg-content .menu{
position:fixed;
top:48px;
left:;
bottom:;
width:200px;
background-color:#dddddd;
}
.pg-content .content{
position:fixed;
top:48px;
right:;
bottom:;
left:200px;
background-color:pink;
overflow:auto;
}
</style>
<!-- 上面overflow是滚动条，当内容超过页面的高度之后，定义overflow会出现滚动条，让能够拉动看到下面的内容 -->
<!-- 最小宽度，当比例小于最小宽度失效，执行最小宽度 -->
<!-- 另外一个移动的边框会受到影响，会出现什么情况 -->
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
<p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
<p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
<p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
<p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id='f1' action="http://www.oldboyedu.com">
<input type="text"/>
<input type="submit" value="提交" />
<a onclick="submitForm();">提交吧</a>
</form>
<script>
function submitForm(){
document.getElementById('f1').submit()
}
</script>
</body>
</html>
行为 样式 结构 相分离的页面
js CSS HTML
行为即让页面动起来，JavaScript来实现的，样式是CSS，结构是HTML代码，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test {
background-color: red;
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id="test">
dasdfasdf
</div>
<script>
var mydiv = document.getElementById('test')
mydiv.onclick = function(){
console.log("adasfda")
}
</script>
</body>
</html>
写代码要规范，要把样式，行为分开，不能混淆，虽然功能是一样的，但是看起来很Low,上面代码实现了行为结构相分离的原则，行为在<script>标签中，样式在<style>中，结构是单独的<HTML>代码。
样式 行为 结构相分离的鼠标放上去变色情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="" width="300px">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName('tr');
var len = myTrs.length;
for(var i=;i<len;i++){
myTrs[i].onmouseover = function(){
this.style.backgroundColor = 'red';
}
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
上面this是当执行那个函数的时候，就生效。通过JS来修改样式。
day--16页面布局的更多相关文章
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- Office 365 - SharePoint 2013 Online 之母版页和页面布局
1.打开https://login.microsoftonline.com,登陆,点击SharePoint,如下图: 2.打开网站集,可以查看.添加.删除等管理操作: 3.打开一个站点,如下图: 4. ...
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- Swift - 使用TableView的静态单元格进行页面布局
通过使用静态单元格的列表,我们可以很方便的进行页面布局.下面通过一个“添加任务页面”来进行演示. 效果图如下: 实现步骤: 1,在storyboard中拖入一个TableViewController, ...
- APP界面设计与页面布局的23条基本原则
一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...
随机推荐
- 转- --python 3 编码
对Python3编码的整理!!! py编码终极版 说起python编码,真是句句心酸.算起来,反复折腾两个来月了.万幸的是,终于梳理清楚了.作为一个共产主义者,一定要分享给大家.如果你还在因为编码而头 ...
- Linux监控工具Spotlight on Unix
1.介绍 Spotlight on Unix是一款Linux系统运行状况的监控工具,可以安装在Windows下,监控Linux服务器的运行状况. 监控项目包括:CPU.内存.交换空间.虚拟内存等的使用 ...
- Java9都快发布了，Java8的十大新特性你了解多少呢？
Java 9预计将于今年9月份发布,这是否会是一次里程碑式的版本,我们拭目以待.今天,我们先来复习一下2014年发布的Java 8的十大新特性. Java 8可谓是自Java 5以来最具革命性的版本了 ...
- 使用css将图像居中
默认情况下,图像属于内联元素.这意味着它们与周围的文本一起流动.为使图像居中,我们应该将其转换成块级元素,通过将display属性的值设置为block就可以完成转换. <html> < ...
- Kali2.0第一节
kali2.0很好的做了工具缩减,以及图形处理,重要的是msf更快了!汉化也远远超过了1.0 如果想要汉化,选择设置里面的Region&language 将language选择设置为中文,注 ...
- Shiro后台实现验证权限
今天发现一个问题:使用shiro的时候,虽然隐藏掉了一些菜单,但是当我们通过get请求直接访问菜单的时候还是会访问到,也就是shiro可以在界面实现隐藏一些信息,但是没有真正的根据权限码验证请求,于是 ...
- [转]数据对齐对CPU的影响
[转]http://www.cnblogs.com/wuzhenbo/archive/2012/06/05/2537465.html 1.前言 在IBM开发社区上发现一篇叫'Data alignmen ...
- u盘的一些理解
U盘是由主控板+FLASH+外壳组成的,当主控板焊接上空白FLASH后插入电脑,因为没有相应的数据, 量产工具 电脑只能识别到主控板,而无法识别到FLASH,所以这时候电脑上显示出U盘盘符,但是双击 ...
- 如何设置使eclipse修改代码不重启tomcat
tomcat配置 1.server.xml reloadable="true"<Context docBase="ins" path="/ins ...
- Tomcat启动项目时内存溢出问题如何解决
在Eclipse中,内存溢出(报不能创建JAVA虚拟机错时,也可能是这里配错了.) 1.双击Tomcat,点击Open launch configuration,Arguments, 2.在VM ar ...