【代码笔记】Web-CSS-CSS Align

番茄西红柿发布于2019-04-23 11:49 / 1111人阅读

一，效果图。

二，代码。

复制代码

DOCTYPE html><html><head><meta charset="utf-8"><title>CSS Aligntitle><style>body {margin: 0;padding: 0;}
    .container {position: relative;width: 100%;}
    .center {margin: auto;width: 70%;background-color: #b0e0e6;}
    .right {position: absolute;right: 0px;width: 300px;background-color: #b0e0e6;}
    .right {float: right;width: 300px;background-color: #b0e0e6;}style>head><body><div class="center"><p>In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since.p><p>Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.p>div><p><b>Note: b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.p><div class="right"><p>In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since.p><p>Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.p>div><div class="container"><div class="right"><p><b>Note: b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.p>div>div><div class="right"><p>In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since.p><p>Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.

复制代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1218.html

【代码笔记】Web-CSS-CSS id和Class选择器

一，效果图。二，代码。 DOCTYPE html> CSS id和class选择器 #para1 { text-align: center; color: red; } .center { text-align: center; } p.center...

Pluser 2019-04-23 11:54 评论0 收藏0
【代码笔记】Web-CSS-CSS Text（文本）

摘要：文本加上上划线全变成大写文本的第一行缩进加上下划线全变成小写加上下划线首字母大写去掉链接的下划线参考资料菜鸟教程一，效果图。二，代码。 DOCTYPE html> CSS Test(文本) body { color: red } h1 { color: #00ff00; ...

tain335 2019-04-23 11:53 评论0 收藏0
【代码笔记】Web-CSS-CSS Table(表格）

一，效果图。二，代码。 DOCTYPE html> CSS Table表格 table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid green;...

sevi_stuo 2019-04-23 11:52 评论0 收藏0
【代码笔记】Web-CSS-CSS 教程

一，效果图。二，代码。 DOCTYPE html> CSS 教程 body { background-color: #d0e4fe; } h1 { color: range; text-align: center; } p { fon...

endless_road 2019-04-23 11:55 评论0 收藏0
【代码笔记】Web-CSS-CSS 语法

一，效果图。二，代码。 DOCTYPE html> CSS 语法 p { color: red; text-align: center; } Hello world! this paragraph is styled with css 参考资料：《菜鸟教程》

zhangwang 2019-04-23 11:55 评论0 收藏0