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基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- Marginalize
在David M.Blei 的Distance Dependent Chinese Restaurant Processes 中提到:DDCRP 的一个重要性质,也是和dependent DP 的一个 ...
- Asp.Net Core 混合全球化与本地化支持
前言 最近的新型冠状病毒流行让很多人主动在家隔离,希望疫情能快点消退.武汉加油,中国必胜! Asp.Net Core 提供了内置的网站国际化(全球化与本地化)支持,微软还内置了基于 resx 资源字符 ...
- ROS机器人之动作(一）
前面我们探讨了ros的两种通信方式,话题和服务,服务机制常用于同步的请求/响应交互方式. 话题则是单工通信,尤其是接收方有多时(比如传感器数据流),然而,当需要完成的任务比较复杂时, 服务和话题都不是 ...
- 每日一练PAT_B_PRAC_1005斐波那契凤尾
NowCoder号称自己已经记住了1-100000之间所有的斐波那契数.为了考验他,我们随便出一个数n,让他说出第n个斐波那契数.当然,斐波那契数会很大.因此,如果第n个斐波那契数不到6位,则说出该数 ...
- Deep Learning for Chatbots（Introduction）
聊天机器人又被称为会话系统,已经成为一个热门话题,许多公司都在这上面的投入巨大,包括微软,Facebook,苹果(Siri),Google,微信,Slack.许多创业公司尝试通过多种方式来改变与消费者 ...
- HDU 1005 Number Sequence(矩阵快速幂，快速幂模板)
Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...
- ajax jsonp跨域 【转】
跨域的基本原理: JSONP跨域GET请求是一个常用的解决方案, JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...
- Go语言实现：【剑指offer】两个链表的第一个公共结点
该题目来源于牛客网<剑指offer>专题. 输入两个链表,找出它们的第一个公共结点. Go语言实现: //长度长的先走个长度差,然后ab一起比较后面结点 //长度一样,公共结点可能在首结点 ...
- one-hot编码（pytorch实现）
n = 5 #类别数 indices = torch.randint(0, n, size=(15,15)) #生成数组元素0~5的二维数组(15*15) one_hot = torch.nn.fun ...
- Ubuntu Xftp 配置
sudo apt-get updatesudo apt install openssh-serversudo apt-get install vsftpdsudo service vsftpd res ...