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基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- 聊聊SpringBoot | 第一章:快速搭建SpringBoot第一个应用
快速搭建SpringBoot第一个应用 1.简介 本章仅介绍如何快速搭建第一个SpringBoot应用,细节内容下一章再做讲解,如果有需要,各位可以直接到Spring官网去了解. 从 Spring B ...
- 七、django学习之聚合函数
七.django学习之聚合函数 如何使用 from django.db.models import Avg,Max,Min,Sum models.Book.objects.all().aggregat ...
- 05讲基础篇：某个应用的CPU使用率居然达到100%，我该怎么办
小结 CPU 使用率是最直观和最常用的系统性能指标,更是我们在排查性能问题时,通常会关注的第一个指标.所以我们更要熟悉它的含义,尤其要弄清楚用户(%user).Nice(%nice).系统(%syst ...
- C++调用DLL方法
调用的原理: 调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法:隐式 ...
- Go语言实现：【剑指offer】跳台阶
该题目来源于牛客网<剑指offer>专题. 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 1阶:共1种跳法: 2阶 ...
- 关于在osgearth 中 出现 arial.ttf : file not handled 的问题
这是由于配置osg时 freetype 插件没有配置到位. 我个人的解决方法 打开CMAKE,点击advance,不勾选OSG_TEXT_USE_FONTCONFIG. 同时将freetype路径设置 ...
- The Divide and Conquer Approach - 归并排序
The divide and conquer approach - 归并排序 归并排序所应用的理论思想叫做分治法. 分治法的思想是: 将问题分解为若干个规模较小,并且类似于原问题的子问题, 然后递归( ...
- 2020.2.22 bzoj5336 party
#include<iostream> #include<cstdio> #include<cstring> #include<cctype> #incl ...
- C#开源组件DocX处理Word文档基本操作(二)
上一篇 C#开源组件DocX处理Word文档基本操作(一) 介绍了DocX的段落.表格及图片的处理,本篇介绍页眉页脚的处理. 示例代码所用DocX版本为:1.3.0.0.关于版本的区别,请参见上篇,而 ...
- [Redis-CentOS7]Redis打开远程连接(十) Could not connect to Redis at 127.0.0.1:6379: Connection refused
通过网络无法访问Redis redis-cli 172.16.1.111 Could not connect to Redis at 127.0.0.1:6379: Connection refuse ...