第三章Div水平居中
1.div居中
text-align:center可以让元素里面的文字内容居中，但并不能让div居中。要让div水平居中必须设置div宽度，外边距设置为margin:0 auto
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>最简单的页面</title>
<style type ="text/css" >
body
{
text-align :center;
} .poetry_box
{
background-color:#E8E8E8;
width:250px;
margin:0 auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class ="poetry_box" >
<h1 >春晓</h1>
<address >唐代·孟浩然</address>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</div>
</form>
</body>
</html>
2.div居右
让div居右显示有两种方式：浮动和定位
浮动：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>最简单的页面</title>
<style type ="text/css" > .poetry_box
{
float:right;
background-color:#E8E8E8;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class ="poetry_box" >
<h1 >春晓</h1>
<address >唐代·孟浩然</address>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</div>
</form>
</body>
</html>
定位：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AlignCenter.aspx.cs" Inherits="布局.AlignCenter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>最简单的页面</title>
<style type ="text/css" > .poetry_box
{
position:absolute ;
right:0;
background-color:#E8E8E8;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class ="poetry_box" >
<h1 >春晓</h1>
<address >唐代·孟浩然</address>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</div>
</form>
</body>
</html>
第三章Div水平居中的更多相关文章
- 大div中，三个小div水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 《Django By Example》第三章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...
- 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记
第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...
- 《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- 第三章SignalR在线聊天例子
第三章SignalR在线聊天例子 本教程展示了如何使用SignalR2.0构建一个基于浏览器的聊天室程序.你将把SignalR库添加到一个空的Asp.Net Web应用程序中,创建用于发送消息到客户端 ...
- Knockout应用开发指南 第三章：绑定语法（3）
原文:Knockout应用开发指南 第三章:绑定语法(3) 12 value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...
- Knockout应用开发指南 第三章：绑定语法（2）
原文:Knockout应用开发指南 第三章:绑定语法(2) 7 click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...
- Knockout应用开发指南 第三章：绑定语法（1）
原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
随机推荐
- is7.5和iis8文件上传大小限制30M修改方法
C:\Windows\System32\inetsrv\config\schema\ 下的IIS_schema.xml文件,但是考虑到安全等问题,而且这个文件默认是只读的,所以不建议直接修改这个配置文 ...
- org.hibernate.HibernateException: connnection proxy not usable after transaction completion
今天yuan男神的程序报了这个错, getHibernateTemplate().saveOrUpdate(obj); getHibernateTemplate().flush(); getHiber ...
- [No0000115]打开Excel2016提示内存或磁盘空间不足的解决方法
症状: 法一:右键文件,并 解除锁定: 法二: 在系统的服务中查看Windows Firewall服务 和Windows Update服务是否开启,如果没有开启就把他们启动一下. 1.在桌面的[计算机 ...
- [No0000102]JavaScript-基础课程2
var bob = new Object(); bob.age = ; // 这一次我们已经添加了一个方法,setAge bob.setAge = function (newAge){ bob.age ...
- NodeJS websocket qr based on location
https://juejin.im/post/5a5728436fb9a01c982c7d93 http://www.cnblogs.com/panhe-xue/p/5902108.html---br ...
- 抽屉之Tornado实战（4）--发帖及上传图片
对于链接,点击获取标题时,本质发送ajax请求,然后去链接抓取信息,发布又是发送ajax请求 发布信息,还要有发布者的信息,并在信息表需要记录发布者的用户名,发布者的头像,发布者的id,而这些信息可以 ...
- json 脚本入库的几种方法
json 脚本入库的几种方法,见代码: #-*- encoding: utf-8 -*- #第一种mongodb入库 # from pymongo import * # import json # c ...
- Mybatis中dao接口和mapper 的加载过程
这里考虑的是mybatis和spring整合的场景 1.在系统启动的时候,会去执行配置文件中有关扫描mybatis接口的配置:通过MapperScannerConfigurer扫描接口生成spring ...
- 【python基础】os.path模块常用方法详解
os.path模块 主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. 更多的方法可以去查看官方文档:http://docs.python.org/library/os.path. ...
- 那些年读过的书《Java并发编程的艺术》一、并发编程的挑战和并发机制的底层实现原理
一.并发编程的挑战 1.上下文切换 (1)上下文切换的问题 在处理器上提供了强大的并行性就使得程序的并发成为了可能.处理器通过给不同的线程分配不同的时间片以实现线程执行的自动调度和切换,实现了程序并行 ...