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基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- abp vnext2.0核心组件之.Net Core默认DI组件切换到AutoFac源码解析
老版Abp对Castle的严重依赖在vnext中已经得到了解决,vnext中DI容器可以任意更换,为了实现这个功能,底层架构相较于老版abp,可以说是进行了高度重构.当然这得益于.Net Core的D ...
- 每日一练_PAT_B_PRAC_1004客似云来
题目描述 NowCoder开了一家早餐店,这家店的客人都有个奇怪的癖好:他们只要来这家店吃过一次早餐,就会每天都过来:并且,所有人在这家店吃了两天早餐后,接下来每天都会带一位新朋友一起来品尝.于是,这 ...
- Java 中序列化与反序列化
一. 序列化和反序列化概念 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.将程序中的对象,放入文 ...
- Python3(十一) 原生爬虫
一.爬虫实例 1.原理:文本分析并提取信息——正则表达式. 2.实例目的:爬取熊猫TV某个分类下面主播的人气排行 分析网站结构 操作:F12查看HTML信息,Ctrl+Shift+C鼠标选取后找到对应 ...
- docker 修改 bridge网桥网段
首先停止正在使用的 Docker 服务: $ sudo service docker stop 接着删除 Docker 默认网桥 docker0 : $ sudo ip link set dev do ...
- Webpack实战（八）：教你搞懂webpack如果实现代码分片（code splitting）
2020年春节已过,本来打算回郑州,却因为新型冠状病毒感染肺炎的疫情公司推迟了上班的时间,我也推迟了去郑州的时间,在家多陪娃几天.以前都是在书房学习写博客,今天比较特殊,抱着电脑,在楼顶晒着太阳,陪着 ...
- WARNING: The host '$hostname' could not be looked up with resolveip. (转)
环境介绍:CentOS6.X MySQL版本:5.5.X以上 执行scripts/mysql_install_db脚本时,抛出一条Warning,主机名和IP地址无法解析: The host '$ho ...
- vue自带的实例属性和方法($打头)
Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...
- java 循环变量
方法:是一段完成特定功能代码的片段. 格式: [修饰符1 修饰符2 ......]返回值类型 方法名(形式参数列表){ java语句;....... } 形式参数:在方法被调用时用于接收外界输入的数据 ...
- sublime3 快捷键总结
配置环境:win7 sublime3 1,快速html5模板页(已安装Emmet插件) 输入html:5后,然后 ctrl+e 2,快速复制 ctrl+shift+d 复制光标所在当前行 3,向上/向 ...