首页
站长资源
网络推广
建站知识
免费源码
网络编程
模板素材
奇闻怪事
民俗文化
主页
/
网站建设
/
CSS 网页布局排版实例
网站建设
2021-07-03 08:43
www.dzhlxh.cn
网站建设
代码如下:
<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>
提示:您可以先修改部分代码再运行
上一篇:
浮动后的li元素居中实现方法
下一篇:
css之自动换行实现代码
网站设计
商城网站建设怎样建
免费制作自己的网站
企业网站建设的一般要素
如何搭建自己的网站
网站建设的主要工作流程
开发一个网站的过程是什么
如何创建一个自己的网站
网站栏目名称
时间同步服务器地址
移动端手机网站制作
百度k站:百度K站的原因
可外链网盘:支持外链的网盘有哪些
百度指数会员:如何利用百度指数会员
电信虚拟主机:电信虚拟主机的优势
穷站长:搜索引擎优化是提高网站流量的方法
常德网站建设公司:常德网站建设多少钱
金源码搜索
金源码导航
免费网站源码
商城网站建设怎样建
免费制作自己的网站
企业网站建设的一般要素
如何搭建自己的网站
网站建设的主要工作流程
网站模板下载
1
败笔网络安全技术
2
ai怎么调整画板顺序? ai设置画板顺序的教程
3
南宁企业建站
4
网络安全第五空间
5
网页设计制作详细流程
网站建设
电脑任务栏假死点击没反应的解决方法(win7与xp
3dmax怎么使用衰减来控制布料材质?
呀!小米在泰国遇到山寨的了!还很受欢迎
ai打开提示配置错误请卸载并重新安装该产品该怎
品味街头摄影大师带给我们的经典