第三章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 ...
随机推荐
- Cross-origin plugin content from must have a visible size larger than 400 x 300 pixels, or it will be blocked. Invisible content is always blocked.
Cross-origin plugin content from must have a visible size larger than 400 x 300 pixels, or it will ...
- stm32 硬件错误
进入该模式,程序死机. 一般来说都是内存错误 1. 数组越界,装入数据溢出, 2. 堆和栈设置不当,这里面硬件的堆和栈在汇编文件中,如果有freertos等,重点检查,任务堆栈使用情况,一般任务堆栈溢 ...
- [No0000B2]ReSharper操作指南3/16-配置ReSharper与代码校错
配置ReSharper ReSharper功能具有默认配置,这些配置基于.NET世界中的约定和最佳实践.但是,每个功能都可以根据您的需求和喜好灵活调整. ReSharper首选项可以在以下位置进行配置 ...
- Sticks POJ - 1011 少林神棍 dfs四次剪枝
http://poj.org/problem?id=1011 题意:若干根棍子被截成小段的木棒,现在给你这些木棒,问最短可以拼出的棍子长度. 题解:搜索,dfs(r,m) 二个参数分别代表还剩r个木棒 ...
- page 页 分页 分段
小结: 1. 页:磁盘和内存间传输数据的最小单位: MySQL: What is a page? https://stackoverflow.com/questions/4401910/mysql-w ...
- AndroidStudio_ListView
在这里梳理一下ListView的用法: 1.建立一个activity,例如建立一个ListViewActivity,这时将生成两个文件:ListViewActivity.java和activity_l ...
- da5_模块
一.模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思就是说把python代码写到里面,文件名就是模块的名称,test.py test就是模块名称. 什么是包? 包, ...
- LeetCode 669 Trim a Binary Search Tree 解题报告
题目要求 Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so t ...
- java执行字符串数学表达式【记录】
https://stackoverflow.com/questions/3422673/evaluating-a-math-expression-given-in-string-form 1. goo ...
- vue项目引用 iView 组件——全局安装与按需加载
框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安 ...