第三章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 ...
随机推荐
- TOP100summit2017：豆瓣耿新跃---站在公司整体目标下看技术管理
壹佰案例:耿新跃老师您好,很荣幸又一次邀请到您担任壹佰案例大会的联席主席,在去年的壹佰案例大会上,您给我们带来很多非常经典的案例点评和提炼.您在去年壹佰案例峰会上最大的感触是什么呢? 耿新跃:我个人最 ...
- MySQL的JDBC驱动源码解析
原文: MySQL的JDBC驱动源码解析 大家都知道JDBC是Java访问数据库的一套规范,具体访问数据库的细节有各个数据库厂商自己实现 Java数据库连接(JDBC)由一组用 Java 编程语言 ...
- tensorflow的variable的eval()和read_eval()有什么不同
eval()返回的数值标量 read_eval()返回的是这个变量的tensor,类型是read 直接上代码: def tensoflow_test(): t = tf.Variable(initia ...
- Django：模板template（二）
将跨站请求伪造和验证码的东西记一下 CSRF Cross Site Request Forgery.跨站请求伪造 链接:GET请求:表单:POST请求 某些恶意的网站上,包含链接.表单.按钮.Java ...
- HTTP协议之Transfer-Encoding
HTTP协议中的Transfer-Encoding 浏览器和服务器端支持持久连接 持久连接(Persist Connection) HTTP1.0默认不是持久连接的 HTTP1.1默认是持久连接的 在 ...
- wfp（Application的运用）
1.Application中封装了wpf的一些常用的功能,如检查未经处理的异常,处理命令行参数等. 2.如何启动wpf程序: app.xaml可用于启动wpf的窗体.也可以不用这用方式.直接创建一个a ...
- Multiple SSH keys for different accounts on Github or Gitlab
[inside this square brackets give a name to the followed acc.] name = github_username email = github ...
- Page10：Lyapunov稳定概念及判定定理[Linear System Theory]
内容包含连续和离散系统的Lyapunov稳定概念及其各种判别定理
- [daily][centos][nginx] 在centos7使用nginx启用对文件目录的http访问
1. 安装nginx yum install nginx 2. 修改配置 2.1 提供目录权限: 我需要访问的目录是 /home/data, 用户是data, 所以修改如下配置: [root@S205 ...
- 贪吃蛇java版
主要的蛇的类 import java.awt.Color; import java.awt.Graphics; import java.awt.HeadlessException; import ja ...