CSS田字布局

<style type="text/css"> 
*{ margin:0; padding:0; list-style:none; } 
.nav{ max-width:960px; overflow:hidden; margin:0 auto; border:5px solid #F60; padding:10px; } 
.nav ul{ margin:-10px 0 0 -10px; list-style:none; padding:0; } 
.nav li{ width:25%; float:left; } 
.nav li a{ color:#fff; display:block; background:#F60; line-height:30px; margin:10px 0 0 10px; text-align:center; font-size:12px; text-decoration:none; } 
.nav li a:hover{ background:#F00}

@media (max-width: 480px) { 
    .nav{ padding:5px; } 
    .nav ul{ margin:-5px 0 0 -5px; }

.nav li{ width:50%; } 
    .nav li a{ margin:5px 0 0 5px; } 

</style>

<body> 
    <div class="nav"> 
        <ul> 
            <li><a href="#">首页</a></li> 
            <li><a href="#">关于我们</a></li> 
            <li><a href="#">新闻中心</a></li> 
            <li><a href="#">联系我们</a></li> 
            <li><a href="#">首页</a></li> 
            <li><a href="#">关于我们</a></li> 
            <li><a href="#">新闻中心</a></li> 
            <li><a href="#">联系我们</a></li> 
        </ul> 
    </div> 
</body>

不会到会,只是一个过程!

时间: 2024-10-29 00:21:30

CSS田字布局的相关文章

CSS布局之品字布局

最近有同学面试被问到关于品字布局的问题.虽然我觉得这种布局确实比较难看,应该也不会用到,但是既然有人问到,我还是自己尝试写了一下品字布局.其实很简单. 先看效果: 第一种: 第二种: 第一种: 其实实现方法很简单,基本思路: (1)三块高宽是确定的: (2)上面那块用margin: 0 auto;居中: (3)下面两块用float或者inline-block不换行: (4)用margin调整位置使他们居中. inline方法代码如下: <!DOCTYPE html> <html>

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志. 按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作.然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了. 主流的浏览

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

PHP.4-DIV+CSS标准网页布局准备工作(下)

DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin

DIV+CSS列表式布局(同意图片的应用)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!--gbk,gb2312 中文-->

React-Native入门指南(三) ——CSS和UI布局

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下: 第1篇hello react-native 第2篇认识代码结构 第3篇css和布局 第4篇学会react-native布局 第5篇ui组件 还有几篇需要这这周完成(这块会时刻更新): 第6篇JSX语法 第7

品字布局

满屏品字布局 思路:上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可. <div class="header">头部</div> <div class="left">左</div> <div class="right">右</div> .header,.left,.right{height: 300px;} .header{

PHP.3-DIV+CSS标准网页布局准备工作(上)

DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,div用于搭建网站结构(框架).css用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获

css实现左右布局

css实现左右布局显示是前端进行页面设计的基础,也是全面了解并学习css一个很好的切入点,因为其中会涉及到对许多css基础点的认知.实现css入门,理解左右布局的实现方式是必经之路,同时也能使我们在项目中涉及前端编码的部分受益. 下面我们就介绍自己总结的7种css实现前端左右布局的方式,如还有其他方式,请告诉我. 1. table---table的li实现 实现原理: table标签是能够具有实现左右布局的属性,也是我们项目中使用最多的.table布局也是页面布局中使用的最早的布局方式,随着前端