0

0

利用CSS简单布局的不同组合类型

PHP中文网

PHP中文网

发布时间:2017-07-15 18:07:19

|

1239人浏览过

|

来源于php中文网

原创

关于css布局页面的简单组合方式:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS格式与布局title>

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑}/*注意*/
/*.创造力{ width:200px; height:200px; background-color:#F00; margin:10px 0px 0px 10px; float:left}
*/
#menu{ width:1200px; height:45px; background:#90F; margin-top:20px}
.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#000; color:#F00; cursor:pointer} 
/*鼠标放上来*/
style>


head>

<body>

<ol style="list-style:none">
    <li>足球li>
    <li>篮球li>
    <li>羽毛球li>
ol>

<ol style="list-style-image:url(../IMG/QQ%E5%9B%BE%E7%89%8720170711193040.gif)">
    <li>足球li>
    <li>篮球li>
    <li>羽毛球li>
ol>


<div style="width:300px; height:300px; background-color:#0F0; position:fixed; top:20px; left:20px" >div>

<div style="width:200px; height:500px; background-color:#099">div>
<div style="width:200px; height:500px; background-color:#060">div>
<div style="width:200px; height:500px; background-color:#055">div>




<div style="width:200px; height:500px; background-color:#099">div>
<div style="width:200px; height:500px; background-color:#060">div>
<div style="width:200px; height:500px; background-color:#055">div>

<div style="width:400px; height:400px; position:absolute; top:100px; left:100px">
<div style="width:300px; height:300px; background-color:#0F0; position:absolute; top:50px; left:50px">
div>
div>

<div style="width:200px; height:500px; background-color:#099">div>
<div style="width:200px; height:500px; background-color:#060">div>
<div style="width:200px; height:500px; background-color:#055">div>

<div style="width:300px; height:300px; background-color:#0F0; position:absolute; top:200px; left:200px">
div>

<div style="width:300px; height:300px; background-color:#0F0; position:relative">
div>

<div class="创造力">1div>
<div class="创造力">2div>
<div class="创造力">3div>
<div class="创造力">4div>
<div class="创造力">5div>
<div class="创造力">6div>

<div style="clear:both">div>

<div style="width:800px; height:500px; background-color:#0F0">div>



<div id="menu">
    <div class="text">首页div>
    <div class="text">产品介绍div>
    <div class="text">产品图片div>
    <div class="text">产品参数div>
    <div class="text">关于服务div>
    <div class="text">联系我们div>
div>

body>
html>

 

瑞宝通JAVA版B2B电子商务系统
瑞宝通JAVA版B2B电子商务系统

瑞宝通B2B系统使用当前流行的JAVA语言开发,以MySQL为数据库,采用B/S J2EE架构。融入了模型化、模板、缓存、AJAX、SEO等前沿技术。与同类产品相比,系统功能更加强大、使用更加简单、运行更加稳 定、安全性更强,效率更高,用户体验更好。系统开源发布,便于二次开发、功能整合、个性修改。 由于使用了JAVA开发语言,无论是在Linux/Unix,还是在Windows服务器上,均能良好运行

下载

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

129

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

77

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

81

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

60

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

444

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

15

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

12

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

5

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

CSS教程
CSS教程

共754课时 | 17.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号