1024
问
热门
后端
前端
数据库
移动端
小程序
WEB
运维
大数据
区块链
注册
登录
默认
JAVA
C语言
Python3
C++
JavaScript
GO
Mysql
Android
Swift
物联网
人工智能
大数据
云计算
区块链
CSS 网页布局排版实例
Penelope
·
更新时间:2024-09-20
· 504 次阅读
代码如下:
<html> <head> <style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px; } #content{ float:left; text-align:center; padding-right:200px; /* 内容往回挤200px */ } #links{ float:right; width:200px; border:1px solid #000000; margin-left:-200px; /* 强行往左拉回200px */ text-align:center; } #footer{ clear:both; /* 不受float影响 */ text-align:center; height:30px; border:1px solid #000000; } --> </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent"> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>
提示:您可以先修改部分代码再运行
网页布局
布局
CSS
需要
登录
后方可回复, 如果你还没有账号请
注册新账号
相关文章
Java 正则表达式
Laurie
2020-11-30
811
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
Chipo
2021-01-27
831
解析proxy代理模式在Ruby设计模式开发中的运用
Kelli
2021-01-23
683
利用css动画实现节流
Kefira
2023-02-26
562
CSS动画实现跳动的足球(疯狂世界杯)
Jacinthe
2023-02-26
865
CSS样式覆盖的操作代码
Viridis
2023-02-26
166
css实现文字充电效果的示例代码
Tertia
2023-02-26
443
使用canvas制作炫酷黑客帝国数字雨背景html+css+js
Elina
2023-03-29
1421
Androidstudio六大基本布局详解
Rabia
2023-04-04
1027
关于CSS渲染:CSS是如何绘制颜色的
Querida
2023-04-14
183
CSS中height:100vh和height:100%的区别
Serafina
2023-04-19
951
CSS实现鼠标悬停svg图标描边效果
Rhea
2023-04-19
734
36种漂亮的CSS3网页按钮Button样式(主要结合before与after)
Malinda
2023-04-19
935
纯CSS实现了下划线的交互动画效果
Kathy
2023-04-19
677
CSS 实现块级元素靠右的方法
Nora
2023-04-19
653
纯CSS实现鼠标悬停图片上升显示描述案例
Pandora
2023-04-19
1001
基于css实现炫酷按钮动画效果案例代码
Tani
2023-04-19
1624
css圆角三角形的实现代码
Tanisha
2023-04-19
597
Android常用布局使用技巧示例讲解
Rhea
2023-05-12
1183
JS+CSS实现超漂亮的动态翻书效果(思路详解)
Thalia
2023-05-17
1676
我要提问
致谢
帮助他人,成就自己。
人生最大成功就是伸出热情而温暖的双手,尽自己所能去帮助身边的每一个人,只要无私的奉献,就会收获到美好的生活。
1024问感谢每一位朋友的帮助和支持。
软件开发网提供编程的基础软件技术培训教程,软件开发编程实例讲解Go,Node,HTML,CSS,Javascript,Python,Java,Ruby,C,PHP,MySQL等软件开发编程语言以及数据开发的基础知识,也提供大量的软件开发在线实例、从入门到精通就在1024问。
育儿网
微养生
全球行
美食街
育儿
菜谱大全
海南旅游
女性
养狗百科
星座