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基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
随机推荐
- 曹工说Spring Boot源码（13）-- AspectJ的运行时织入（Load-Time-Weaving），基本内容是讲清楚了（附源码）
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- YYC松鼠短视频系统上传视频会被压缩的问题如何解决？
uni.chooseVideo({ count: 1, compressed: false, sourceType: ['album', 'camera'], success: (res) => ...
- 解决Eclipse无法安装STS
使用Eclipse Neon安装Spring Tool Suite报错: Cannot complete the install because one or more required items ...
- selenium高级应用 - 结束Windows中浏览器的进程
结束Windows中浏览器的进程 #-*- coding:utf-8 #结束Windows中浏览器的进程 from selenium import webdriver import unittest ...
- 开发中常见的common.js--1
common.js 1.基于代码重用的目的,方便在页面中调用: 2.跟普通的js包含文件并没有其他不一样,主要是一些js经常用到的函数,或者字符串.数组方法的简单扩展: 3.封装的兼容性的方法.[po ...
- STM32片外SRAM作运行内存
本例演示用的软硬件: 片内外设驱动库:STM32CubeF41.24.1的HAL库1.7.6,2019年4月12日 IDE:MDK-ARM 5.28.0.0,2019年5月 开发板:片外SRAM挂在F ...
- 博客圆美化主题推荐之Slience
博客圆美化主题推荐之Slience 一.前言 本博客美化主题作者为:Esofar,本文仅在教导如何快速把该美化主题应用到自己的博客中,详细部署内容见Silence - 专注于阅读的博客园主题. 二.博 ...
- coroutine - 示例
分享流畅的python一书, coroutine 章节中的出租车仿真的例子. from collections import namedtuple import queue import random ...
- 手把手带你阅读Mybatis源码（二）执行篇
前言 上一篇文章提到了MyBatis是如何构建配置类的,也说了MyBatis在运行过程中主要分为两个阶段,第一是构建,第二就是执行,所以这篇文章会带大家来了解一下MyBatis是如何从构建完毕,到执行 ...
- CSS选择器有哪些？选择器的优先级如何排序？
CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器 e.g. 说明 id选择器 #id #header 选择id="header ...