css的网页布局案例
常见行布局：
导航使用position:fixed固定住
导航会脱离文档流，不占据空间
导致下面的元素上移，因此需要将下面的元素的padding-top设置成导航的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
} .header{
width:100%;
height:50px;
background:#333;
color:#fff;
text-align: center;
line-height:50px;
position:fixed;
} .banner{
width:1200px;
height:200px;
margin:0 auto;
background:#ccc;
padding-top:50px;
}
</style>
</head>
<body>
<div class="header">导航</div>
<div class="banner">banner图</div>
</body>
</html>
如果行高的单位是百分比，那么是基于当前字体尺寸的百分比行间距
经典的两列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
} .header{
width:100%;
height:60px;
background:#000;
color:#fff;
line-height:60px;
position:fixed;
} .logo img{
float:left;
margin-left:20px;
} ul{
list-style:none;
float:right;
margin-right:20px;
} ul li{
float:left;
margin-right:20px;
} ul li a{
text-decoration: none;
color:#fff;
} .container{
width:100%;
height:400px;
background:rgb(173,216,230);
padding-top:150px;
} .left{
width:35%;
float:left;
padding-left:15%;
} .right{
width:35%;
float:right;
padding-left:15%;
} .left h1,
.right h1{
font-size:20px;
margin-bottom:10px;
} .item{
height:40px;
line-height:40px;
} .item span{
background:rgb(201,98,79);
margin-right:2em;
color:#fff;
} .footer{
width:100%;
height:60px;
background:#333;
color:#fff;
text-align: center;
line-height:60px;
} .footer span{
margin-right:30px;
} .footer span:last-child{
margin-right:0;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="cat-little.jpg" alt="logo" height="60px"></div>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
<li><a href="#">导航5</a></li>
</ul>
</div>
<div class="container">
<div class="left">
<h1>推荐哦</h1>
<div class="item">
<span>此乃路径</span>
html5与css3实现动态网页
</div>
<div class="item">
<span>此乃路径</span>
html5与css3实现动态网页
</div>
<div class="item">
<span>此乃路径</span>
html5与css3实现动态网页
</div>
<div class="item">
<span>此乃路径</span>
html5与css3实现动态网页
</div>
<div class="item">
<span>此乃路径</span>
html5与css3实现动态网页
</div>
</div>
<div class="right">
<h1>其他相关</h1>
<div class="item">
HTML CSS JavaScript
</div>
<div class="item">
HTML CSS JavaScript
</div>
<div class="item">
HTML CSS JavaScript
</div>
</div>
</div>
<div class="footer">
<span>友链</span>
<span>友链</span>
<span>友链</span>
<span>友链</span>
<span>友链</span>
</div>
</body>
</html>
图文混排使用：dl dt dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
} .container{
background:#ccc;
} .content{
width:1000px;
margin:0 auto;
} dl{
width:300px;
float:left;
text-align:center;
margin-right:50px;
} dl:last-child{
margin-right:0;
} dl img{
width:300px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<dl>
<dt><img src="cat.jpg"></dt>
<dd>这是一段关于图片的简要描述</dd>
</dl>
<dl>
<dt><img src="cat.jpg"></dt>
<dd>这是一段关于图片的简要描述</dd>
</dl>
<dl>
<dt><img src="cat.jpg"></dt>
<dd>这是一段关于图片的简要描述</dd>
</dl>
</div>
</div>
</body>
</html>
css的网页布局案例的更多相关文章
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- PHP.4-DIV+CSS标准网页布局准备工作（下）
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
- 利用css进行网页布局
网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- StringBuffer StringBuilder String 区别
String 字符串常量 不可变 使用字符串拼接时是不同的2个空间 StringBuffer 字符串变量 可变 线程安全 字符串拼接直接在字符串后追加 StringBui ...
- Android View如何获取焦点
Android新启动Activity,dialog或者其他窗体中中包含EditText, 新启动的activity的焦点默认在EditText上,这是android系统会弹出软键盘,挤压activit ...
- 【5min+】 这些C#的运算符您都认识吗？
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- 【限时免费】近1000G JAVA学习视频下载
2020的情人节是个极特殊的情人节,面对肆虐的疫情,我们无法出门,宅在家里,也无法阻止你作为一名优秀程序员的梦想. 或许没有鲜花.没有蛋糕…… 姜小白就为大家备好了一份大礼,将自己近几年整理收藏的全网 ...
- python 类 --导入类
导入类 1.1.导入单个类 如何导入单个类 以上一节为例,编写一个car.py程序 编写一个新程序my_car.py 希望在my.car.py文件中直接使用car.py中的函数,使用from car ...
- Rust学习笔记一 数据类型
写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差. 自学了Java.Kotlin.Python. ...
- python批量删除子文件夹中的空子文件夹
例如A文件夹下有许多子文件夹,我需要获得的是子文件夹中的图片,但是现在子文件夹中不光有图片,还混入了空的文件夹(在使用OpenImages工具箱的时候,按照检索的方式下载的图片文件中是带有label的 ...
- Why Oracle VIP can not be switched to original node ?
Oracle RAC is an share everything database architecture. The article is how to check out why virtual ...
- css 浏览兼容问题及解决办法 （2）
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...
- vue 过渡 & 动画
过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...