第三章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 ...
随机推荐
- Jumpserver堡垒机
堡垒机介绍 搭建简易堡垒机 安装步骤 wget --no-check-certificate https://olivier.sessink.nl/jailkit/jailkit-2.19.tar.b ...
- MFC实现一元稀疏多项式运算器
MFC实现一元稀疏多项式运算器 基本要求 输入并建立两个多项式 多项式a与b相加,建立和多项式c 多项式a与b相减,建立差多项式d 输出多项式a, b, c, d.输出格式:比如多项式a为:A(x)= ...
- python中的一个现象，db.commit和db.commit()
假设有一个表,有自增字段,在开发环境中(sublime/Liclipse等)执行insert语句时,如果调用db.commit,那么数据库中不会有这条记录,但也不报错,再次插入成功时,自增自段加1. ...
- spark运行wordcount程序
首先提一下spark rdd的五大核心特性: 1.rdd由一系列的分片组成,比如说128m一片,类似于hadoop中的split2.每一个分区都有一个函数去迭代/运行/计算3.一系列的依赖,比如:rd ...
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
- 转：string.Format格式化用法
String.format()方法使用说明(比较详细) 地址:https://blog.csdn.net/thc1987/article/details/17528093 典型案例 原文地址:http ...
- LeetCode 867 Transpose Matrix 解题报告
题目要求 Given a matrix A, return the transpose of A. The transpose of a matrix is the matrix flipped ov ...
- elasticsearch更新doc文档
在elasticsearch-head中: http://localhost:9200/my_index/products/2/ _update { "script" : { &q ...
- 解决双系统(Window10+Ubuntu16.10)下ubuntu安装git时提示软件包git没有可安装候选问题
选择升级系统: sudo apt-get update 升级之后再输入: sudo apt-get install git 可成功安装.
- python接口测试实例--数据驱动（程序与数据分离）
#encoding=utf-8import requestsimport jsonimport osimport hashlibimport picklefrom conf import * stat ...